Easy for novice, powerful for experienced users

Templates

In the Dottoro theme, you can choose from two basic slider types: single and carousel, and with the help of slideshow templates you can specify what slideshow components and how you want to display. For example, you can place the navigation buttons below, next to, or above the slides, the play/pause button over the slides, etc.

The template system gives you full control not just over the main components of a slideshow, but also over the look and feel of the slides. Images, videos, pages and posts and any custom HTML content can be displayed in slideshows and with the help of post templates you can specify what data and where you want to display. Image titles and descriptions, post thumbnails, titles, excerpts, categories and tags, authors, custom fields can all be displayed.
Moreover, This is true not just for the slides but also for custom navigation buttons.

1. Slideshow templates

The theme comes with a couple of predefined slideshow templates that can be used as a model to create your custom ones.
For instance, if you select the "Single Basic" profile for your slideshow, then it will use the "Basic" slideshow template by default (Slideshow Template option in the General section). The "Basic" slideshow template displays the navigation buttons below the slides. If you want to move the navigation above the slides, you don't need to do anything else just:

  • Go to Templates » Slideshow Templates.
  • Click on the "Basic" slideshow template and copy its content to the clipboard.
  • Click on "Add New" at the top of the page to create a new slideshow template.
  • Give your template a name and paste the content of the "Basic" slideshow template into the content editor.
  • Then move the slider_navigation shortcode above the slides in the content.
  • Finally, click save and select the new slideshow template for your slideshow (Slideshow Template option in the General section).

Original template:
[slider_slides]
    [inner_wrapper_custom]
        [slider_buttons_wrapper type="autoplay" class="abspos autohide"]
            [slider_button type="play" /]
            [slider_button type="pause" /]
        [/slider_buttons_wrapper]
        [slider_button type="prev" class="abspos center" /]
        [slider_button type="next" class="abspos center" /]
        [slider_timeline /]
    [/inner_wrapper_custom]
[/slider_slides]
[range_control /]
[slider_navigation /]
New template:
[slider_navigation /]
[slider_slides]
    [inner_wrapper_custom]
        [slider_buttons_wrapper type="autoplay" class="abspos autohide"]
            [slider_button type="play" /]
            [slider_button type="pause" /]
        [/slider_buttons_wrapper]
        [slider_button type="prev" class="abspos center" /]
        [slider_button type="next" class="abspos center" /]
        [slider_timeline /]
    [/inner_wrapper_custom]
[/slider_slides]
[range_control /]
Original slideshow:
thumbnail
New slideshow:
thumbnail

Further reading:

Slideshow Templates - Slideshow Specific Shortcodes.

2. Post templates

The theme comes with a couple of predefined post templates and you can also create custom ones. With the help of the post templates you can manage the content of slides, custom slides and navigation items. Post thumbnails, any type of media, image titles, descriptions, titles, excerpts, categories, tags, authors and custom fields can all be displayed.

In addition, to make post templates more flexible, similar to other theme options you can use selectors for post templates as well. For instance, with the help of selectors you can select different post templates for posts according to their post format, post type, author, and so on.

You can read more about post templates in the documentation.

Let's see some examples.

Example 1

If you select the "Carousel - Vertical" profile for your slideshow, you will see something like this:
thumbnail
Leme
Leme is an upper-middle-class neighborhood in the South Zone of the City of Rio de Janeiro, ...

As you can see, in this slideshow, the post thumbnail is displayed on the left, the post title and description on the right in every slide. This is because, the "Carousel - Vertical" slideshow uses the "Slider - Post thumbnail, title and excerpt" post template for displaying slides.

The content of this post template:

<div class="left_column">[post_media class="js-flex-height-media-on" /]</div>
[post_title /]
[post_content /]
[clear /]
If you want to change the content of the slides, you should create a custom post template. For instance, if you want to display the date and author of the posts below the title but above the content, you will need something like this:
<div class="left_column">[post_media class="js-flex-height-media-on" /]</div>
[post_title /]
[post_date /][post_author /]
[post_content /]
[clear /]

To set up this post template for your slideshow:

  1. Create a new post template under Templates » Post Templates.
  2. Give it a name.
  3. Set its content and save it.
  4. Optionally, select the categories of the template (Categories option below the content editor). If you only want to use this template for slides, select Slides and remove the selection from the other checkboxes. Remember to click "Save Changes".
  5. Finally, open the edit screen of your slideshow and select your post template for the "Post Template" option in the "Slide Settings" section.
  6. Save Changes.
You are done. Now if you take a look at your slideshow, you will see that the date and author will be displayed below the title and above the content.
thumbnail
Leme
Leme is an upper-middle-class neighborhood in the South Zone of the City of Rio de Janeiro, ...

Example 2

Post templates give you total creative freedom. For instance, you can add a slideshow to each slide displaying a gallery of the post that belongs to the slide. To do this, you need to create two slideshows. One for the slideshows within slides and one for the whole slideshow. In this example, both slideshows are created from the "Single - Basic" profile (call them slideshow_inner and slideshow_main).

Additionally, the main slideshow uses the following custom post template:

<div class="left_column" style="margin-right:10px;">
    [slideshow name="slideshow_inner"]
        [item_settings media_width="584" media_height="369" /]
        [navigation_settings type="disc" item_width="16" item_height="16" align="center" /]
    [/slideshow]
</div>
[post_title style="margin-bottom:12px;" /]
[post_content /]
[clear /]
And the result is:
thumbnail
Portfolio Post with Single Slider
Etiam vehicula, massa vitae semper egestas, libero odio interdum arcu, vitae malesuada ipsum dolor ut lorem. Suspendisse pellentesque, diam a interdum tincidunt, elit metus ullamcorper sapien, et luctus mi felis nec ipsum. Nulla consectetur massa a elit imperdiet, nec porttitor diam laoreet. Cras tristique et nunc sed fringilla. Vestibulum vitae pretium purus, a scelerisque quam. Fusce in neque ante. Proin quam libero, luctus sit amet semper at, hendrerit vel elit. Mauris nulla ipsum, faucibus sagittis tempor sit amet, venenatis eu elit. In sodales interdum tincidunt. Donec vel massa varius, ultricies ligula et, iaculis ipsum. Nullam ultricies viverra dignissim. Nullam viverra tristique lorem id lobortis. Aliquam congue mi risus, ac ...

3. Custom Slides

Custom slides allow you to display additional information for each slide. Similar to the slides, you can select post templates for custom slides, but while slide transitions are controlled by the JavaScript slider for slides, transitions for custom slides are controlled by CSS.

3.1. Example 1

This example displays the post thumbnails in the slides above the navigation, the post titles and descriptions in the custom slides below the navigation.

The slideshow template:
[slider_slides]
    [inner_wrapper_custom]
        [slider_buttons_wrapper type="autoplay" class="abspos autohide"]
            [slider_button type="play" /]
            [slider_button type="pause" /]
        [/slider_buttons_wrapper]
        [slider_button type="prev" class="abspos center" /]
        [slider_button type="next" class="abspos center" /]
        [slider_timeline /]
    [/inner_wrapper_custom]
[/slider_slides]
[slider_navigation /]
[slider_custom_slides]
    [item_settings post_template="dottoro_slider_title_desc" /]
[/slider_custom_slides]
The result:
thumbnail
Leme
Leme is an upper-middle-class neighborhood in the South Zone of the City of Rio de Janeiro, Brazil, next to Copacabana, Urca and Botafogo. The neighborhood takes its name from a nearby rock formation whose shape resembles the rudder of a ship. In the years 50-60 high buildings were constructed as the hotel Le Méridien. Le Méridien closed in 2007 and was sold in 2009 to Windsor Hotels for around R0 million. After a refurbishment, it was reopened in January 2011 as the Windsor Atlantica Hotel. Every year in the days leading up to New Year's on December 31 the traditional processions honoring Yemaja begin here. The famous party of Réveillon or New Year's Eve in Copacabana extends completely into Leme as well. (Wikipedia)

3.1. Example 2

This example displays the galleries on the left and the corresponding post data on the right.

The slideshow template:
[row]
    [col2]
        [slider_slides]
            [inner_wrapper_custom]
                [slider_buttons_wrapper type="autoplay" class="abspos autohide"]
                    [slider_button type="play" /]
                    [slider_button type="pause" /]
                [/slider_buttons_wrapper]
                [slider_button type="prev" class="abspos center" /]
                [slider_button type="next" class="abspos center" /]
                [slider_timeline /]
            [/inner_wrapper_custom]
        [/slider_slides]
    [/col2]
    [col2]
        [+row]
            [+col2]
                [slider_custom_slides map_gallery="_parent_post"]
                    [item_settings post_template="dottoro_slider_title_desc" /]
                [/slider_custom_slides]
            [/+col2]
            [+col2]
                [slider_custom_slides]
                    [item_settings post_template="dottoro_slider_title_desc" /]
                [/slider_custom_slides]
            [/+col2]
        [/+row]
    [/col2]
[/row]
[slider_navigation /]
The result:
thumbnail
Portfolio Post with Single Slider
Etiam vehicula, massa vitae semper egestas, libero odio interdum arcu, vitae malesuada ipsum dolor ut lorem. Suspendisse pellentesque, diam a interdum tincidunt, elit ...
Chili pepper
The chili pepper (also chile pepper or chilli pepper, from Nahuatl chīlli is the fruit of plants from the genus Capsicum, members of the nightshade family, ...

3.1. Further Examples

You can find further examples for the use of custom slides in the predefined slideshow templates that come with the theme. For instance, the "Popup - Bottom Panel" slideshow template displays the post title in the bottom panel, the "Popup - Right Panel" slideshow template displays the post title and description on the right panel. You can view the content of the templates under Templates » Slideshow Templates.

Just click on the plus sign over the images to see the gallery popups that are using these templates in action. ("Fullsize Single - Right Panel" and "Fullsize Single - Bottom Panel").

gallery_popup_right_panel
gallery_popup_bottom_panel

Further reading:

[slider_custom_slides] shortcode.

More features

This is a demo site for the Dottoro Slider,
which is part of the Dottoro WordPress Theme
i