Dottoro Theme Documentation

Tutorial to get your theme to work

PrologueFirst StepsFront PageCreating a custom front pageBlog, News and Portfolio post typesPost Type specific settingsGeneral settingsSingle post settingsCategory / Tag / Date archive page settingsPermalink settingsOptions on single post pagesGeneral page optionsImage optionsGallery settingsPage Templates and PagesPage SettingsPage TemplatesPages created from page templatesGeneral page settingsGallery settingsBlog page settingsNews page settingsPortfolio and Imagefolio page settingsContact page settingsArchives page settingsAuthors page settingsBoomarks page settingsSitemap page settingsSpecial pagesCategory and tag page settingsArchive and date page settingsSearch page settingsAuthor page settings404 page settingsHeader and MenuSubheadersSubheader specific shortcodesPredefined SubheadersCreating SubheadersAssigning subheaders to pagesFooterWidgets in the FooterCopyright and other notices in the FooterSidebarWidgets on the SidebarWidth and alignment of the sidebarWidget AreasWidgetsBreadcrumbShortcodesShortcodes In Alphabetical OrderShortcodes By CategoriesNested ShortcodesPost TemplatesOverlaysMedia and External MediaOverview of galleries, gallery listings and slideshowsGalleries and Gallery ListingsAbout Galleries In GeneralCreating And Managing Galleries[gallery_list] shortcodeSlideshows and Popup SlideshowsSlideshowsPopup SlideshowsSlideshow SettingsMost Often Used Slideshow OptionsAll Slideshow OptionsSlideshow Templates - Slideshow Specific ShortcodesStyling Guide For SlideshowsStyling Of Slideshow and Post TemplatesSlidesPopupsSelectorsWeb FontsGeneral Theme SettingsUser RolesExport / Import SettingsCreating theme designsLocalizationHeadingsChild ThemesCSS ClassesResponsive DesignCSS Extension JavaScript ToolkitJavaScript LibraryAction HooksFilter HooksCompatibility Issues
<

Gallery Shortcodes

[gallery]

The WordPress [gallery] shortcode allows you to display image galleries on your pages and posts (Gallery Shortcode WordPress Codex).
In the Dottoro theme, there is a similar shortcode, the [gallery_list] shortcode.
The main difference between the [gallery] and [gallery_list] shortcodes is that the [gallery] shortcode displays WordPress galleries while the [gallery_list] shortcode displays Dottoro galleries. Additionally, the [gallery_list] shortcode provides much more options than the [gallery] shortcode (more on Dottoro Galleries and the [gallery_list] shortcode).

To make the WordPress [gallery] shortcode more flexible, we have extended its features in the Dottoro theme as described in the following table.

Additional Attributes:
dottoro_overlay Specifies the identifier of the overlay to appear over the images. Default is 'dottoro_gallery'.
To get the identifier of an overlay, go to Templates » Overlays and click on the overlay. Here you will find the id of the overlay.
If you don't need any overlay, set this attribute to an empty string.
More on Overlays.
dottoro_frame Specifies whether to show a frame around the images, or not (true | false)
dottoro_gallery_popup In Dottoro Theme, clicking the gallery images will open a popup slideshow displaying the images in an attractive manner. With the dottoro_gallery_popup attribute, you can specify the identifier of the gallery popup that should be used. If the dottoro_gallery_popup attribute is not specified, the "Gallery Popup" setting of the page/post determines it (see Gallery Popup option under Theme Options » General for details).
To get the identifier of a gallery popup, go to Popups » Gallery Popups and click on the popup. Here you will find the id of the popup.
For further details, please see Popup Slideshows.

Live example

[dottoro_gallery]
The dottoro_gallery shortcode is deprecated from version 1.42 and should not be used.
You can use the image_options, [gallery_button] and [popup_opener] shortcodes instead. Additionally, you can create multiple galleries for every page and post (read more in the Galleries section).

The WordPress gallery is not identical to the Dottoro Gallery. In the Dottoro Theme, you can create multiple galleries for every post and page (see Gallery Settings).

You can make a gallery available to your users in more ways (read more in the Galleries section). One way is using the [dottoro_gallery] shortcode. It allows you to display any HTML content that opens a gallery or galleries in a popup slideshow.

Additionally, with this shortcode, you can create custom galleries as well. Also see the examples section below.

Attributes:
add_to_gallery
The function has been removed in version 1.42
Boolean that sets whether the media set with the href attribute should added to the gallery or not.
align The horizontal alignment of the shortcode content ( left | center | right | empty string ). Default is an empty string.
If the 'for' is specified (and the 'value' is not), this attribute is omitted.
for The identifier of the HTML element that should open the popup slideshow when the user clicks on it.
If this attribute is specified the content of the dottoro_gallery shortcode will be omitted.
If the value attribute is specified both the for attribute and the shortcode's content are omitted.
group Specifies a gallery identifier or a comma separated list of gallery identifiers.
  • If the for attribute is specified, then clicking on the associated element opens the popup slideshow containing the images of the gallery or galleries identified by the group attribute of the dottoro_gallery shortcode.
  • If the value attribute is specified, then clicking on link generated by the dottoro_gallery shortcode opens the popup slideshow containing the images of the gallery or galleries identified by the group attribute.
  • If the dottoro_gallery shortcode has a content, then clicking on it opens the popup slideshow containing the images of the gallery or galleries identified by the group attribute.
  • If the href attribute is not empty, then the image whose URL is specified by the href attribute will be added to the gallery or galleries identified by the group attribute.
If the group attribute is not specified:
  • If the dottoro_gallery shortcode is within a subheader or slide, the shortcode identifies the gallery of the subheader/slide that can be managed under Gallery Settings on the Edit Subheader/Slide screen.
  • Otherwise, the shortcode identifies the gallery of the current page/post that can be managed under Gallery Settings on the Edit Page/Post screen.
Predefined gallery identifiers (the number of them will probably be increased in the future; they always start with an underscore '_'):
  • _current_post - Displays the gallery of the current post. This is useful if you want to display the gallery of the current page/post in a subheader/slide.
height If the dottoro_gallery shortcode adds a media to a gallery (see href attribute), then this attribute allows you to specify the height of the media in the popup slideshow. This is mostly useful for flash and video.
href This attribute has two functions:
  • If the add_to_gallery attribute is not set to false, then the image whose URL is specified by the href attribute is added to the gallery or galleries identified by the group attribute. If the gallery still doesn't exist, it is created dynamically.
  • If the dottoro_gallery shortcode displays a link (the value attribute is not empty or the shortcode has a content), clicking on the link opens the popup slideshow and it will start with the image specified by the href attribute.
overlay The identifier of the overlay that should appear over the content of the shortcode.
To get the identifier of an overlay, go to Templates » Overlays and click on the overlay. Here you will find the id of the overlay.
If the overlay attribute is not specified, no overlay will appear unless the deprecated show_hoverelem attribute is set to true. In this case, the built-in overlay 'Gallery' will be used.
Please note that if the 'for' attribute is specified, the overlay attribute will be omitted and no overlay will appear.
More on Overlays.
show_frame Boolean that sets whether to show a frame around the content of the shortcode. This attribute has effect only if the shortcode has content (and if the 'value' and 'for' attributes are not specified).
show_hoverelem
This attribute is deprecated from version 1.29. Use the overlay attribute instead.
Boolean that sets whether to show the magnifier over the content of the shortcode. (default: false)
value Sets the text of the link that opens the popup slideshow.
If this attribute is specified both the 'for' attribute and the shortcode's content are omitted.
width If the dottoro_gallery shortcode adds a media to a gallery (see href attribute), then this attribute allows you to specify the width of the media in the popup slideshow. This is mostly useful for flash and video media.
Examples:

This example shows how to create a link that opens the gallery of the current page (that can be managed under Gallery Settings on the Edit Page/Post screen):

[dottoro_gallery value="Show the gallery"/]

This example is the same as the previous one, but it also adds an image to the gallery. Clicking on the link opens a popup slideshow that will start with this image.

[dottoro_gallery value="Show the gallery" href="http://www.example.com/myimage.jpg"/]

This example displays an image that opens the gallery.

[dottoro_gallery]<img src="IMAGE_URL" width="300" height="300" />[/dottoro_gallery]

This example displays a heading element that opens the gallery.

[dottoro_gallery for="example"/]
<h1 id="example">Show the gallery</h1>

This example defines two different galleries (fruits, friends) on the same page. The fruits gallery contains three, the friends gallery two images. Clicking on the 'Show Fruits' link opens the fruits gallery, clicking on the 'jennifer' image opens the friends gallery.

[dottoro_gallery group="fruits" href="http://www.example.com/banana.jpg"/]
[dottoro_gallery group="fruits" href="http://www.example.com/pear.jpg" value="Show Fruits"/]
[dottoro_gallery group="fruits" href="http://www.example.com/peach.jpg"/]

[dottoro_gallery group="friends" href="http://www.example.com/peter.jpg"/]
[dottoro_gallery group="friends" for="img_jen" href="http://www.example.com/jennifer.jpg"/]
<img id="img_jen" src=" http://www.example.com/jennifer.jpg"/>

Live example

For further details, please see the Galleries section.