Using Dynamic Media with AEM Assets

Transcript

Sometimes, the marketing story is to combine a bunch of content in a single frame, or viewer, as we would say. I’ve created this what we call a mixed media asset right here to show off my cool lounger chair and ottoman combination. Here’s my lounger mixed media asset inside of AEM Assets. Click on the badge icon to bring it up in this mixed media asset viewer window to preview it.

This Mixed media asset combines individual product images, videos, and a spin set - a collection of product photos made to look like it’s in a spinning environment.

This mixed media asset is served up in this mixed media viewer by combining or stitching a few viewers together and referencing a collection of different kinds of assets in the same viewer, images, videos, and spin sets.

Assuming you have all the content ready to go and be uploaded, the video, the single beauty shots, and the photos that put together to create the spin set, it’s a relatively simple matter to combine these assets together to present in this viewer. And, like all the other experiences, you can always select which viewer experience you want it presented to once it’s been published.

I’ll step you through how I made this mixed media asset for my lounger and ottoman collection of images and video. I’ll start from scratch, pretending I didn’t already have all these assets in AEM to being with to show you the steps involved in preparing the assets.

To keep things organized, I’ll create a new folder and put all my content in it. Before I add any content to this folder, I’ll make one change to this folder and configure it for Dynamic Media for video. Once I assign a video profile to the folder, any video added will be turned into an adaptive video set, a set of optimized videos at three different sizes in pixel height and compression rate for my default setting that will feed the adaptive viewer responsively, sending the right size video from the set to a requesting device., so, for example, the smallest video for mobile devices and the largest video for high-bandwidth desktop screens. This is all done automatically by the viewer checking every four seconds to show the best video to display at any given moment from the adaptive video set.

When you upload a video to a folder configured for Dynamic Media for video, AEM immediately sends a video out to our cloud encoding service, creating these smaller optimized versions for the adaptive video set and optimizes them for streaming video playback in the adaptive and responsive video viewer from the cache network.

Back in my folder of recently added content, I need to make an asset that uses more than a single image. In this example, I’m going to make a spin set, a set of photos where the product was shot at a few different angles and named appropriately with sequence numbers in the filename to make it easier to sequence the images in order. Click the Create button in the corner and you can see the types of multi-asset, asset types you can make from AEM with Dynamic Media. For now, I’ll choose spin set. In this editor, name the asset and then add the content to the spin set editor.

If your names have logical numberings in the name, AEM will order them for you automatically. If not, you can manually resequence them by dragging their order around in this list.

Now I have a spin set to use individually or add to a mixed media set.

I’m ready to make my mixed media set, combining images, my spin set, and video into my Uber collection of content. Similar to making a spin set, click Create and choose Mixed media set. In the editor, name your mixed media set and add the assets you want. Reorder them to your liking.

Personally, I like to start with the spin set, then, add some images and finish with the video. The order of this vertical list will drive the sequence of the thumbnails at the bottom of the viewer.

And you can always reorder these assets by dragging the items in the list to rearrange them to your liking.

Dynamic Media comes with a bunch of viewers out of the box. You’ll notice that depending on the asset type you’re reviewing, an image for simple zoom viewers, videos, and video viewers for a mixed media set and a combo viewer, Dynamic Media provides a nice collection of viewers to choose from. All of these viewers are responsive in nature and will play on really any device that can render JavaScript and CSS, which is the code base for these viewers.

You can easily customize any of these viewers and create your own configuration of viewer settings in our easy-to-use WYSIWYG editor. If you wish to edit and create your own viewer, you find a viewer from the list of viewers and edit it and save your new configuration.

I’ll create my own spin set viewer configuration. Navigate to the viewer editor by going to Tools, Assets, and Viewer Presets. From this list, choose which viewer you wish to edit.

This editor is a WYSIWYG, what you see is what you get, interface on top of the viewer itself being displayed in the AEM interface, which is also using a web browser to display it.

The editor has a few screen size modes at the top, desktop, tablet, and mobile, to show you what your settings will look like for any of these sizes. To the right are editing tools for the graphical appearance of a viewer art and also, a tab to control the behavior of the viewer experience.

You can select what aspect you wish to edit from this pulldown list of viewer component parts and then make some choices from the various options.

For the spin set viewer, I’ll add a small shadow behind the full screen button on each display size so it’s a bit easier to see, and I’ll also tell the viewer that I always want it to start spinning whenever the viewer loads.

Under Behavior, I’ll choose Auto Spin, enable it, and I’ll set it to spin three spins before it stops.

Save and name this new viewer configuration, and now you can use it with this type of asset. For this or any other spin set, you’ll now see your custom viewer from the list of available viewers to use with the copy URL, or if you’re using AEM Sites, as a viewer choice in the Dynamic Media component. This demonstration was a broad brush overview of many of the important features and content flows of using Adobe Experience Manager Dynamic Media to get the most value out of your marketing media assets. Go forth, and happy imaging.