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.
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.
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.
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.