Slideshows & Media Carousel

Follow

 

Metro Publisher allows you to add a variety of media to your content via the "Insert Media" button on the text editor.

metro-publisher-insert-media.png

Media Carousel

In order to maintain our promise of clean structured data, we've added a media carousel that responsively displays your media assets within a piece of content. Similar to how videos are currently embedded within a video article, the carousel displays images, videos, sound files, and embeds at the top of the page.

If you include multiple assets, the carousel reveals navigation options to your readers so that they may browse. Think of it as a slideshow that allows all kinds of file types.

NOTE: Audio and video files must be hosted externally. You cannot upload audio or video files directly to your Metro Publisher file center.

 

Media Carousel in Slideshow View

Here is an example of how a slideshow will look in an article. The images will appear at the top of the page in the media carousel. Readers may click through slides, change to gallery view, or open in Expanded View.

article-sample.jpg

Media Carousel with multiple images displayed as a slideshow.

  1. Navigation: Next and previous buttons with slide counter
  2. Expanded View: Button to open slideshow at maximum size within browser window
  3. Gallery View: Displays thumbnail images of slideshow
  4. Title and Description: Basic HTML and text formatting, such as links, can be inserted in the description

NOTE: Slideshow navigation elements appear ONLY if multiple assets are detected. Pro users can change the look and feel of these elements via the CSS.

Media Carousel in Expanded View

Here is an example of how a slideshow will look in the Expanded View. The screen darkens and the images are re-sized to fit within the available space depending on the reader's browser and screen size.

 full-screen-sample.jpg

Media Carousel with multiple images in expanded view mode.

  1. Media Carousel expands to fill browser window. Images are proportionally re-sized according file size and available vertical/horizontal space
  2. Title, Credit, and Description: Including any text formatting or links

 

Media Carousel in Gallery View

Here is an example of how a slideshow will look in when switched to Gallery View. The images tile and allow readers to jump to any one image or media asset.

 gallery-sample.jpg

Media Carousel with multiple images displayed in gallery view.

  1. Slideshow navigation disappears.
  2. User can scan photos or other media and select.

 

Media Carousel with Multiple YouTube Videos

Here is an example of an article that has several YouTube videos.

video-sample.jpg

Media Carousel with Multiple YouTube Videos In Gallery View

Here is an example of the same article with the slideshow switched to gallery view..

video-gallery-sample.jpg

 

Media Carousel with One Asset: SoundCloud

Here is an example of an article that has only one asset – a SoundCloud audio widget.

soundcloud-sample.jpg

Media Player with only one SoundCloud File.

  1. Whenever there is only one asset, no slideshow navigation elements appear
  2. SoundCloud audio player widget displays within piece of content.

 

Stand Alone Slideshows

In the past, slideshows were created and stored within the file library. They were treated like a different object with limited powers and could only be attached to a "real" piece of content. Now, slideshows are themselves a "real" piece of content. In other words, rather than creating an article and attaching a slideshow to it. Slideshows are created and stored as a piece of content because they are content. If you only want the slideshow and don't have a bunch of text, like an article to go with it, you simply don't put any and the slideshow will display as it is, by itself.

Benefits:

  1. Assign slideshows to sections or subsections
  2. Slideshows inherit the ad slots and sprockets of section/subsection
  3. Display slideshows as featured stories on sections/subsections and the homepage
  4. Slideshows appear in featured stories with a thumbnail and icon depending on the type of media contained within the slideshow.

    icons-sample.jpg

    Sample of article with video and a slideshow as featured stories.
 
Have more questions? Submit a request

Comments

Powered by Zendesk