Introduction

In this article, we will guide you through the process of creating mixed media playlists in Composer. A mixed-media playlist is a Headless CMS collection that combines images and videos. Whether you're building an experience with images, videos, or a combination of both, this article will cover how to create the visuals in Composer.

Please refer to this video, which demonstrates the mechanism used within this article:

About the "H-CMS Mixed Media" experience

We've created an experience to illustrate the technique discussed in this article. We've deployed it to the web so you can test it live while reading this article. Go ahead and interact with the experience below.

NOTE: What you are seeing is the web-published experience running within an iFrame. Below is the HTML code. Note that the "src" value is the URL of the published experience. Pasting that URL in a browser tab will run the experience fullscreen. Try it—if you dare!

Download this sample here

<iframe src="https://web.intuiface.com/h-cms-mixed-content-types" frameborder="0" width="100%" height="auto"></iframe>

"Mixed Media Playlist" Scene

Within the "Mixed Media Playlist" scene, the data template is comprised of the following collections and assets:

• Swap collection (Using the H-CMS Image Playlist as the data source)
  
  • Group (this is repeated once for each item in the data feed)
    • Image Asset (Image you wish to display)
    • Video Asset (Video you wish to display)
    • Text Asset (Label)
    • Text Asset (Media Type) 

Bind the"Image" property of the Image Asset to the "Image" field within the H-CMS data feed, and then bind the "Visibility" property to the "Media Type" field within the data feed.

You now need to create a binding converter to test if the "Media Type" is equal to "image". You will find the "Is Equal To" option under "Math & Logic" > "Is Equal To". In the "Value" parameter field for "Is Equal To", enter the string "image". If the data source equals the value "image", "Is equal to" will return "True". Otherwise, it will return "False". This value will determine the value of the "Visibility" property for the Image Asset.

Perform the same process on the Video Asset in the Group Collection as you did on the Image Asset. Bind the source of the Video Asset to the "Video" field within the data feed of the H-CMS. Then, bind the visibility of the Video Asset to the "Media Type" within the data feed of the H-CMS.

Now create a binding converter to test if the "Media Type" is equal to "video" using the "Is Equal To" converter. In the "Value" parameter field for "Is Equal To", enter the string "video". If the data source equals the value "video", "Is equal to" will return "True". Otherwise, it will return "False". This value will determine the value of the "Visibility" property for the Video Asset.