Using Dynamic Media with AEM Assets understanding-aem-dynamic-media

Transcript

Dynamic Media is a rich media content serving service accessed via a simple to use platform agnostic URL to cache delivered content. How does it work? Dynamic Media content comes from a cached Cloud Service and renders the right image rendition, the correct resized and optimized image, for any requesting device. Located as a Content delivery function of AEM Assets, once you add media files in to Assets, they’re immediately made available to The Cloud Service.

Based on the notion of a single master asset, an image asset in this example, Dynamic Media allows for requesting devices to request exactly what type of rendition, version, exact image size is needed by that device at the moment of request, rather than having to manage pre creating a series of derivative variations of any source image in a CMS or a DAM. Any reply image is requested with a series of image processing arguments delivered as part of the URL. Think of this as Photoshop along a URL. Besides simple image delivery, Dynamic Media includes a series of media viewers that present different media types in a viewer that makes sense for that content. Dynamic Media has viewers for video, image sets, spinsets, interaction or shopable images, and can combine these experiences together in mixed media viewers. Media viewers separate the content from the viewer experience and configurations, the way the viewer behaves for any viewer media experience. This way you can easily serve up different experiences of the same content by referencing different configurations, easily created and edited in simple viewer editors.

Where is Dynamic Media? It’s in The Cloud. Dynamic Media is finely served from the world’s largest and most comprehensive cache delivery network, meaning the content loads fast making page load times low. The content populates cache from any one of our regional dual dual co-located server installations, owned and managed by Adobe. Dynamic Media is an ultra performant enterprise class Global Content Serving Service.

Dynamic Media is a rich collection of media editing and authoring tools. A virtual media playground if you like capable of extending the experience and uses of your media in many directions. Since there are so many media viewers to use and edit, this demo will only explain a few of them. Dynamic Media content’s when you add imagery or video in to Assets and publish it to generate a URL published version of Dynamic Media. Then, any CMS can access it with the copy URL to an image or a viewer. I’ve configured this instance of Assets to instantly publish the content to The Cloud immediately upon upload. Once uploaded, select an image and check out some of the Dynamic Media results.

I have a few high res soccer photos. I’ll pick one and tour the viewers and renditions. If your source file was a high pixel count image to start with, a high resolution file, you can zoom in to it to see more detail. This zoom viewer like all the viewers, is responsive, so it will adapt to be whatever size it needs to be for your page layout.

The renditions page shows a series of renditions or derivative treatments of the file generated by AEM Assets. Static renditions are local versions created upon upload. Dynamic renditions are only created when requested, like when this AEM Assets webpage window requests it, like any web browser. I made a few to choose from, some resized, and some with special effects.

The file info widget can confirm some of the settings I used for this image preset like the pixel width and height.

The URL button will allow you to copy and paste this image preset URL to a browser to test it out. Now, this dynamic rendition is being requested by the URL which includes the image preset, a shortcut to image server instructions I’ve already defined. The image presets a shortcut to hide the actual request string to image arguments that tell the image how to look.

Image presets keep images consistent and shorten the URL. I can edit this URL and apply different image effects directly along the URL, requesting the image in a different way each time it resolves. Dynamic Media has several image processing options it can run on images. Over 100 Photoshop like commands can be applied to any image. Let me try out a new width. Add a little sharpening to this image. And maybe a special effect like a green tint.

And maybe flip it left right for some reason, really to show you that these image processing commands happen instantly and are very flexible. By combining them together to get really any kind of image effect you wish. However, we recommend as a best practice, using the image preset shortcut that shortens the URL.

Some of those dynamic renditions created for these images are smart crop versions of the image. Versions that have various crop ratios already applied to the image courtesy of, you guessed it, Smart Crop. When I started this demo, I created a new folder and assigned a Smart Cropped image profile to it. Now, any images added to that folder got Smart Cropped. Is that a proper verb tense? Smart Crop uses Adobe’s artificial intelligence and machine learning technology called Sensei to automate the tasks of creating good crops of images, cropping around obvious points of interest automatically.

When I open this folder, with the Smart Crop filter on it, it shows each image with the new Smart Crop results. In this case, four new cropped treatments, based on my image processing profile, with four different ratios. You can edit them here if you don’t like the Smart Crop results.

Transcript

Understanding and appreciating the power of Dynamic Media is really to use it in a Content Management System or CMS. I happen to have a webpage open in AEM Sites our CMS, that is tightly integrated with AEM Assets and Dynamic Media.

With this CMS, authors do a couple of things to add content to a page. Add the right component onto the page and fill that component with its appropriate content type. We can easily do that with Dynamic Media content, as well.

I’ll add a Dynamic Media component and then some Dynamic Media content into that component. When using the site’s webpage, since the DAM is tightly integrated with the webpage builder, curtesy of the Aspect Picker, you can also find and use Dynamic Media Content since that content originates from the DAM.

With this image now filling the component, you can easily edit what flavor of Dynamic Media treatment you want by clicking on the wrench tool icon and choose a different rendition style. I’ll select the Zoom Viewer style here. Switch to Preview mode and zoom into an area of the image. All viewers are responsive and will resize automatically to fit the page as needed. If you wanted a simple image, select one of your image presets from the list and the image will be generated using that image preset instructions. I made a special image preset which I didn’t specify a width and height in order to let the webpage pass that information.

Using this responsive image preset and adding breakpoints allows the webpage to request what exact width and pixels is best for the requesting window optimizing each request for the best image size rendition needed at that moment. Resize the page and check it out with the file info widget that shows the width of the image changed depending on how wide the page is.

Each time I change the page width, the responsive image preset will request smaller and smaller versions of the image based on the breakpoint width information I added to the component. This is a great way to optimize image requests.

Smart Crop option is another kind of responsive image request where again, the page will select among the various Smart Crop renditions to display based on the width of the page. I made these Smart Crops to start out as a large wide format version, changing to a square, and then, for the very narrow pages, a vertical crop is used. Again, check this out by selecting Smart Crop and then, change the webpage to see the change occur.

Another nice benefit of Dynamic Media is you can download files locally using any image preset you’ve already made. I’ll select a few images and download them so, they’re watermarked with my logo by using the watermark image preset.

If you were wondering where do these image presets come from we create, add and edit image presets and also viewer presets under AEM Tools Assets section. There, you can edit and create all your various presets and viewer settings.

To illustrate what these files will look like, I’ll check one out with my watermark image preset in the renditions list. All those files now have my logo baked into the downloaded file.

So far, we’ve been talking about simple reply images or not simple, if you want to zoom in on them, but you can also make images more interactive and drive pop-up windows by adding interactive targets to image areas and then, linking them to some extra experience like a Quick View image overlay. This is super easy to do in Dynamic Media.

I have an image of three guys modeling some shirts and some matching product skews in my commerce database I can link to. I’ll select an image, click Edit, and then add targets to the image. For my three guys’ image, I’ll add three targets and each target will link to a po-pup to a quick view of that particular product the model is wearing. The clickable image editor allows for linking to content in the AEM commerce engine, basically a database of product information including an image. Or you can add a custom hyperlink or you can even add in an AEM Experience Fragment to the target. Here I’ll add three targets, one each, for each of my three models and link them up to the appropriate product skew reference.

Once completed, I can preview this image by choosing the clickable banner viewer and this will show me any of the targets that I’ve authored and it will also drive to whichever the right click view pop-up experience is.

You can use this interactive image asset in AEM Sites by choosing an interactive media component. Not a standard Dynamic Media component because this asset allows for interaction when you click on the interactive targets to drive the Quick View in this case.

Also, if you’re not using Sites, you can access the embed code for interactive banner and copy and paste it to add it to your webpage directly. Select the asset and under Viewer’s Page, select which interactive view configuration you want and access the embed code here.

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.

Transcript

Using image presets, the URL shortener that generates dynamic renditions, are powerful tools and really a best practice that simplifies the complexities of generating these just in time renditions or variations of your source image file. In AEM Assets, you can access any image preset version of an image by navigating to that asset’s rendition page and select on any rendition under the Dynamic heading. These dynamic renditions are being generated whenever this rendition list editor requests one, previewing the effects that specific image preset will generate when used with any image. At the bottom of this renditions list page is the URL button that will generate a URL to this specific image and dynamic rendition combination. It’s this URL string and variations of it that this tutorial will focus on. Really, what goes in to making of an image preset behind the scenes. It’s simple to create an image preset by using the Image Preset Editor located under AEM tools, Assets, Image Presets. Making choices here will generate a string of image server rules to apply to any image referencing this image preset. Think of an image preset like a CSS style sheet, but for image processing and formatting. An image preset is really your user created name to this URL shortener that hides the long string of commands that act on the image when your request it. The most common use of an image preset is to manage the down sampling of a high pixel count source image, adding back in sharpening to offset the unavoidable image degradation which occurs because of downsizing and enforced as exact file format that your web development requires.

When you create an image preset and begin to edit some of these options in the user friendly interface, the specific image server protocols and values are being constructed in the background. This editor has two tabs worth of image processing controls. These image preset options set as they are will generate nine specific image commands on this final reply image request and of course, you just reference the image preset name to achieve the results from these choices. I’ll make a new image preset to always call to a 600 pixel wide JPG. I’ll name my image preset with the reason to be used, like product hero or article thumbnail, not adding in the pixel count in the name because that might change later. I’ll choose JPG file format to keep things simple, I’ll choose a compression level around 60 to start, I’ll add sharpening, but not use this first option, as I can’t control it. The next tab has more options. Here, I’ll use an unchart mask filter on the final down sampled image with these default values. This will add sharpening to the image once it has been made smaller and I’ll leave the down sampling as by sharp, the default, which also adds a bit of sharpening during down sampling. This graphic shows all the actual image server commands that go into making this kind of image preset. Nine individual commands will generate this type of down sampled image. This explains the overall formula the image server uses, breaking the content with the expression of the content, giving us extreme flexibility of what we want any request to generate, controlled by this image server code and shortened to a simple image preset name. While my simple image preset to this JPEG down sampled image actually contains nine specific image server codes concatenated together with ampersands, the image server has some 80 different image effects that can be used on any image. This editor only shows a few, albeit, some of the most important. It’s simplest to think of these as things you might do on an image in Photoshop, but now available to you via the image server code. So, you can do a lot more than simple resizing of an image if you want to. And this is what the wild card field here, on the second tab is for. You can add any extra image server command you wish in this field and it will be concatenated on to the end of the commands for the rest of the image preset. For my greenish image preset, I added three extra commands to add a green tint to the image pixels, reduced that tinting to 50% opacity, and add a blurring effect to the final image, all by adding extra code into the URL modifier field. Image presets enforce the same image processing effects for all of the images it’s referenced with, making any future change management much simpler. Here are a fewer power tips and best practices for creating image presets. When creating an image preset that needs to generate certain pixel width reply image, you can add in only the width value and not the height. Make the height field null and void. This will never pad an image resized with your new pixel width.

You can also make a special image preset called ‘responsive’ and for this image preset, do not specify either the width or the height, leaving both fields blank and void. This image preset will allow responsive web pages and components to drive what image width in pixels to request based on page or component break size information, further optimizing image calls used with a responsive webpage. Always use sharpening for any image that is going to resize the source image which will be most image calls if your input source images are much larger than your expected web usage, which is of course really the best practice here when using an image server in general.

The image preset is a powerful URL shortener and best practice that optimizes and streamlines a lot of image processing that dynamic media provides.

Transcript

This tutorial will go beyond simple image resizing and use some of Dynamic Media’s other image server treatments to an image. All applied by a simple URL code change. For example, if your source image had transparency in it, you can use the Background Color command to change the background color of that image. Using the Dynamic Media image component, in Sites, I’ll add that command to the URL modifier field and change the color of the background. This works because the source file has transparency in it, so, it was prepared for this potential use case. Other things you can do with images, is via Dynamic Media code use a clipping path in an image to crop to that clipping path or just expose what’s inside the clipping path. In Adobe Photoshop, the tool that most images actually start from, notice I have a few paths in the paths pallet. There is a path around the subject, called product, and there are a few paths which are simple rectangles. I’ll use these as pre-made crops in Dynamic Media, saved as a TIF file format, a format I know supports and includes paths in the file. Once uploaded to Dynamic Media I can address this image and use my extra commands to clip to a path or crop to a path. This graphic shows a few of these image server commands I’ll be using for this tutorial. Background color, clipping to a path, cropping to a path, and adding a text variable to a referenced image.

You can, of course, add these commands to the end of a URL string to add this functionality to any image preset version of your image. Or add these commands in he URL modifier field of a Dynamic Media component in AEM Sites. Clip path E, E for calling to an explicitly referenced path, will clip the image to the contents of the path. Now clipped, you can also use the BGC, or Background Color command, to add a different background color, if you wanted to. And adding incorrect information to a nonexistent path won’t break anything. It just won’t render the effect. Crop path E will crop the image to any explicitly identified path boundary. I have three paths meant for cropping, and I named them for their crop ratio or shape.

The four paths included in the file I can address are square, five-four for a five by four ratio, incorrect here because it’s really four by five, and a sixteen by nine crop ratio.

It’s easy to make a text template file that you can render with Dynamic Media by passing whatever text value you want as part of the URL. To create a simple text space template, starting in Adobe Photoshop, create an area text box, not point text, and fill it with some placeholder text. Eventually, this will be replaced with text that you pass along the URL.

Now, to make this text a variable, in Photoshop choose Image menu, Variables, Define. Enable Text Replacement and give your variable a name that you will eventually use along the URL. I’ll call mine “text1”. Save this as a PSD and upload it into AEM Dynamic Media.

In Sites I’ll add a Dynamic Media component and add my new image with the text into the component. Choose any image preset you want to have this displayed with, and then, in the URL modifier field add the variable, in this case, “$text1=”, and any text that you want to see rendered on this image. I did need to make one edit in the CRXDE to make this work.

Dynamic Media is capable of doing a lot more than simple image resizing, if you understand how to design image files to take advantage of some of these other image server tools available to you.

Transcript

This is a series of images being requested as JPEG file formats with different image quality settings applied at 200% size for illustration purposes. Starting at a 100% image quality, going all the way to 1% image quality to illustrate the balance between image quality versus file size.

The JPEG file format is still the undisputed king of image file formats to achieve useful rendering across the majority of web browsers and mobile applications, despite other arguably better file formats becoming available over the years. JPEG image quality is largely controlled by the amount of lossy compression that is encoded into the file. This lossy compression trades file size for image quality. JPEG lossy image compression can be applied in dynamic media from 1% to 100% quality. The higher the compression quality percentage, the better the image quality and the larger the file, and conversely, the lower the quality setting, the smaller the file is and the worse it looks. At very low quality settings, you can often see JPEG artifacts. The little or not-so-little blocks of solid color. You can easily test the balance of image quality versus file size by creating a URL requesting a JPEG file format, and adjusting the quality parameter value. What makes up this image in file size measured in kilobytes is the grid of pixels requested times the file format used with any available compression. while there are other factors that play into the resulting file size and kilobytes, for the most part an image file is determined by the pixel count, pixels across by pixels high, times compression settings. At Adobe, we’ve developed some best practices to be used when requesting JPEG file format. And the most important one is quality setting, since quality setting has the biggest impact on the file size in kilobytes. Our best practice recommendation is to use a quality setting as 75% as a good balance between making small file sizes that look good, that don’t show JPEG compression artifacts too much. We use 75% quality setting as the image server’s default quality settings, if you call for a JPEG and do not pass a quality setting value in the URL. As the image server is capable of applying a variety of image processing commands to any image, not just the ones available in the dynamic media GUI, we’ve created a special command that forces a JPEG image to always be a certain size in kilobytes. This is the jpegSize command. jpegSize allows users to request what size and kilobytes needs to come back from a JPEG request, and it controls the resulting size and kilobytes by increasing JPEG compression on the image until the designated size is achieved. Understanding how the image file is created to achieve the target size and kilobytes by compressing the image in a lossy way, knowing that using this command can potentially result in images with lots of JPEG compression artifacts that could look bad, hence the need to use this powerful command with great responsibility. Simply put, using the jpegSize will deliver a JPEG at the file size and kilobytes you designate with the command by increasing the image compression until the file size is achieved. We’ve provided two powerful ways to control JPEG file size in kilobytes. The most well known one is applying a designated image compression setting called Image Quality here. Qlt is the precise parameter to be used. Another powerful tool that needs to be used with full understanding of the potential for creating over compressed images is jpegSize, which will compress an image until the designated size in kilobytes is achieved.

Transcript

You can easily add closed captioning to any video with Dynamic Media by adding a special text file that contains the closed captioning info. A .VTT file in assets. And then configure the viewer URL to use that closed captioning or WebVTT side car file for the closed captioning. The video configured with closed captioning will display a small CC button icon at the bottom of the video. Click it to show or hide the closed captioning during playback. The .VTT file is a kind of XML that contains timecode and frameCount and text to show at the point in the video. The way to add the closed caption to video is to append the viewer URL with the reference to the closed captioning .VTT file. As described in our help documentation, this is the formula for appending the reference to the CC file here. For this simple demo, I’ve added the closed captioning .VTT file in the same folder as my video. I have this instance of AEM configured to publish upon upload of any assets because in order for this to work, all assets, specifically the video and the web.VTT file, need to be published out to the cloud servers in order for the viewer URL to resolve correctly.

Now I can grab the copy URL for the video viewer and add my closed caption values based on the code formula found in help.

Here is my video viewer from the copy URL working fine, but without closed captioning. When I append this URL with the closed captioning reference, that will enable closed captioning on this video. If you’re using a Dynamic Media component with a site’s webpage, you can edit that component by adding the caption reference as extra URL modifiers to achieve the same results. For reference, here’s the final URL and closed captioning info. So you can see how this needs to be formed to correctly resolve. In my case, to my Dynamic Media account name, DynamicMediaNADEMO.