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
<

15. Media and External Media

In WordPress, you can upload images, videos and other media to your website. You can do it by clicking on the Add Media button when writing a post or if the media is not related to any page or post, by clicking "Add New" under Media » Library. There are cases when you want to display a media on your site but you don't want to upload it. For instance, when you want to add a YouTube or Vimeo video to a page or post. In these cases you should add the embed code manually to a page or post.

In most cases, these options give you enough flexibility, but sometimes it would be useful to have a non self-hosted media library (in addition to the standard WordPress media library containing self hosted media). For instance, when you want to display YouTube and Vimeo videos or any other non self-hosted media in slideshows and listings.

The External Media library has been designed for this purpose in the Dottoro theme. You fill find an "External Media" menu under Media on the WordPress admin. Here you can add external media to your site.

Creating External Media

The External Media Screen works the same way as the Posts Screen. To add a new external media to your site, click on "Add New". Give it a name and specify the content - the embed code of the media.
You can also use the "Create Content" button in the "Source Options - Get Embed Code" box below the editor to create the content. Just paste the URL of the video into the URL field and click on "Create Content". It will add the embed code to the content editor above.
Optionally, you can specify the width and height of the media before clicking on the "Create Content" button. Please note that the dimensions of the media in the embed code might be different from the specified dimmensions. It is based on the provider of the media how to handle the given width and height.

Tip: You can add any HTML to the content of an external media, not just the embed code of a video. You can also use shortcodes in them.

If you are done, click Publish. Your media is ready to use.
To display your media in a slideshow or listing, just add it to a gallery and use the [slideshow] or [gallery_list] shortcode to display the gallery. But before you do that, you should set a thumbnail, poster image, description and other information for your media.

Media Settings

These options can be found in the "General Options" and "Image Options" meta boxes on the Edit External Media screen. Additionally, some of the options are also presented for self hosted media (under Media main menu).

General Options
Caption Specifies a caption for the media. The caption can be displayed with the [post_media] shortcode (show_caption attribute).
Description Specifies a description for the media. The description can be displayed with the [post_content] shortcode.
Tooltip Sets a tooltip for the media. If the media is displayed in a slideshow and the slideshow has non-custom navigation buttons (disc, rect, numbered or image) and the Show Tooltip option of the slideshow is enabled, the tooltip will appear when the mouse hovers over the navigation button. Additionally, the [post_tooltip_text] shortcode allows you to display the tooltip in custom navigations, slides and/or listings.
CSS Class Here you can assign CSS classes to the media. These CSS classes will be added to the holder HTML element of the media in both slideshows and listings. You can use this option to apply individual styles to the item.
Additionally, since selectors allow you to target posts, pages and media according to their attributes, such as CSS class, this option is also useful to apply individual settings to the item. For instance, you can select an individual post template for the item in a slideshow or listing (more on selectors).
Target URL Specifies a target URL for the media.
A link pointing to this URL can be displayed with the [post_visit_site] shortcode. Additionally, if an overlay appears over the media and it contains a [visit_site_button] shortcode, the button will open this URL.
Finally, it is also possible to put the post titles and thumbnails and for image attachments, the image itself into a link pointing to this URL. For details, please see the link_to attribute of the [item_settings] shortcode.
Poster Image Here you can set a poster image to the media. If it is not set, the featured image will be used instead.

If a poster image (or the featured image) is set, it will be displayed instead of the real content until the user clicks on it. If the media is a video and it is displayed in a slideshow, we highly recommend to set a poster image. It makes slide transitions much smoother.

Additionally, the theme has advanced support for YouTube and Vimeo videos. When the user clicks on the poster image, the video will automatically start playing. If a slide transition starting, the video will be automatically paused and the poster image appears again. If the user clicks again on the poster image, the video will start playing from the same point it has been paused.

Tip: For poster images, it is advisable to set the width and height of the media (Source Options meta box above - use the Save Changes button to save). The theme will resize the poster image to the size of the media that can result in faster page loading.
Thumbnail Sets a thumbnail for the media. If it is not set, the featured image will be used instead.
The thumbnail is displayed for image navigations in slideshows. Additionally, you can use the [post_thumbnail] shortcode to display the thumbnail in custom navigations, slides and/or listings.

For further details and examples, please see Overview of galleries, gallery listings and slideshows.