Using Dynamic Media with AEM Sites Core Components dynamic-media-sites-core-components

Transcript

Hello in this video, we are going to take a look at some of the many features and capabilities of dynamic media, and how those can be used with Adobe Experience Manager sites. So dynamic media is a feature of AEM assets and it offers on-demand image and video transformation capabilities. Features of dynamic media, like image modifiers, smart crop, and image presets, ensure that optimized images can be delivered to any screen or any device. There are a few Ways to integrate dynamic media capabilities with AEM sites, but one of the easiest is to use the AEM core components.

Alright, before we jump into that, let’s first review the configurations needed for dynamic media. So from the AEM start menu under tools, cloud services, you can see a card for dynamic media cloud service configurations. And if we click into that, you can see a list of the current dynamic media configurations. Now these cloud service configurations will connect the current environment of AEM using a dynamic media account to dynamic media. And in this case I have a specific account being used for the weekend site. Once we have connected our dynamic media account, we can then begin to explore some of the powerful features of dynamic media all within the AEM UI. So one of these features is the ability to create image presets. And when I navigate to tools, assets, image presets, I can view the existing presets. Now in this environment, I’ve got a single preset called black and white. And what this preset is configured to do, is take the original rendition of our image, and then return an image that is 960 pixels by 540 pixels, and that’s going to be using the gray scale as the color space. And the multiple image presets can be created all through the UI.

Now let’s take a look at another feature of image profiles. Again, from tools, assets, I can click image profiles and view all of the existing profiles on the current environment. And in this environment, I’ve just got a single profile named smart crop. Now this image profile is configured to use the smart cropping features of dynamic media. And here I can add several targeted dimensions of cropped renditions of the original image, and these dimensions can then be used for an optimized experience on many different devices.

So let’s go ahead and look at this in action. Here I have my original image of a surfer and I’m just viewing it in Photoshop, and I could create all these different renditions and versions and crops all within Photoshop. That’d be such a manual effort. Instead, let me go ahead and upload this image to AEM.

So I’ll navigate to AEM assets, and I’m going to click into a folder that has the image profile and image preset applied from our dynamic media configuration. Next, I’ll go ahead and add the image.

And the first thing that AEM is going to do is process it. Once the image processing is finished, I can click in and view the different renditions available. So here we’ve got our original source image, and then there are several static renditions created by AEM automatically.

And then if we look at our dynamic media renditions, you’ll notice that we’ve got the black and white preset image. This image has been scaled down and the color has been replaced with a gray scale. And you can also see the different renditions created by the smart cropping feature. Now notice that the crop has been smartly created to ensure that the focal point of the image, in this case our surfer, remains within the crop.

All right, so we’ve got dynamic media all configured and now we have an image to work with. Next let’s look at how we can use this image on an AEM sites page.

The first thing that I’m going to do is actually navigate to the template of a page I want to use dynamic media on.

I’ll go ahead and open up the image components policy. Notice that I now have a checkbox to enable dynamic media features for the image. If you don’t see this check box, it means that dynamic media account has not been fully configured for your environment. So go ahead and check this and then save the changes. And what this is going to do is enable these dynamic media features for this image policy. Next I can navigate to a content page that is based on this template. Now I’ll go ahead and drag and drop our image from before onto the page.

And when I open up the dialogue, I can choose to use an image preset.

Notice that we can see the image in black and white.

I also have the option to choose a crop from the smart crop list. Now I can select a single rendition to use or I can select auto which is going to let dynamic media automatically choose the best rendition based on the device width. I’ll set the image to auto.

Now, after saving my changes, I can preview the different smart crops by using the AEM Mobile emulator.

Notice that in the mobile view port, the vertical crop has been selected. And this is pretty different than in desktop or tablet.

For those users who are familiar with dynamic media, it’s also possible to manually add image modifiers. So let’s say I want to flip this image so that the surfer is facing right instead of left. I can add the flip modifier and after saving my changes, notice that the image has been flipped horizontally. It’s also possible to chain multiple image modifiers by adding an ampersand and then a new command. So let’s say I want to modify the saturation and make it a little more de-saturated. I can add the Command op saturation and we’re just going to append it to the current image modifier. Now, after saving the changes, I can see the updated image.

So if you’ve got a user who’s really familiar with dynamic media commands, they can have a lot of power here and all of the available commands are documented, so it’s pretty easy to start experimenting around with some of these different image modifiers. Recall that the dynamic media capabilities are only available to image components that have had the dynamic media policy selected. It’s also important to understand that the capabilities of smart crop and image presets visible in the AEM dialogue are actually driven based off of the image profiles and presets applied to the image itself. So for example, I’ve got another image here that was in a different folder and it has not had the smart crop image profile applied to it. Notice that when I use it on the page, I only see the options for the black and white image preset.

All right. So that’s it for this video on using dynamic media with Adobe Experience Manager sites. Thanks for watching. -