Slideshows & Media Carousel

Follow

Combined Content Types

With Metro Publisher Release v2.8 we started the process by combining blog entries, reviews, and articles into one single content type. With v2.9 we completed this process by getting rid of video articles and instead allowing all content to contain videos and other media assets.

Slideshows and the Media Carousel

In the past, slideshows were created and stored within the file library. Now, slideshows are themselves a piece of content. Rather than creating an article and attaching a slideshow to it, slideshows will now be created and stored within an article, blog entry, review or event. Or they can stand alone.

Here are some of the important highlights:

  • Media Types: All content may now contain images, slideshows, videos, audio files (ex: SoundCloud), and embeds within a so-called 'Media Slot'. Please note that since the media is contained in a media slot, linking an image or other media to another location is not possible!
  • Media Carousel: All media is displayed directly within a piece of content. For example, no longer do you create a slideshow and attach it to an article. Create and publish slideshows in just a few clicks. The new media carousel will adjust to the content contained within it automatically.
  • Stand-Alone Slideshows: Slideshows now stand alone as a piece of content. That means that slideshows may be assigned to sections and appear among featured stories on your sections and on your homepage.
  • Basic HTML for Description: Basic HTML elements and linking from within slide description field.
 

1. NEW! Media Types

With release v2.9 all pieces of content – articles, reviews, blog entries, and events – display a variety of media directly in the page. Additionally, the types of media have been expanded to be much more flexible.

media-types.jpg

Here are some things to expect:

  1. Vimeo and YouTube: Add Vimeo and YouTube videos just by pasting in a URL. Metro Publisher will detect the source and provide the appropriate sizing and thumbnail (if there is one).
  2. SoundCloud: Embed the SoundCloud audio player simply by pasting in the URL. Metro Publisher will detect the source and display SoundCloud's interactive player automatically.
  3. Flash: Insert custom or third party embed code directly into the new media carousel for things such as interactive Flash widgets.
  4. Embed: Use any third party video service such as Youku.
 

2. Media Carousel

How are these new media types displayed? In order to maintain our promise of clean structured data, we've added a new 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.

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. In case where there is only one asset, no slideshow navigation elements appear
  2. SoundCloud audio player widget displays within piece of content.

 

 

 

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