Using Smart Crop with AEM Assets Dynamic Media using-smart-crop-with-aem-assets-dynamic-media

Transcript

Hey everyone. In this video, we are going - to be discussing about the AEM Assets Dynamic - Media Smart Crop, introduced - with AEM 6.4. Asset users often use the - same image to deliver content for different - screen sizes, using the - responsive layout. Sometimes, images that - looks good on a desktop will not look good - on a smaller device when we use a responsive - layout option.

User needs to manually crop these - images for different screen sizes. This manual cropping is time - consuming and not very flexible. We can now automate this process, by - using Adobe Sensei powered Smart Crop and let me show you how - this could be done. Before we proceed, make sure you - AEM instance is up and running in Dynamic Media - Scene 7 Mode.

From AEM homepage, click on Assets and navigate to Files - and open the Dynamic Media folder.

Let’s create a new folder - called Smart Crop.

Navigate back to AEM homescreen and - click on Tools and then select Assets.

Select the Image - Profiles option, create a new image profile - and provide a name.

Select the cropping - option as Smart Crop, by default, you get three different - screen sizes with height and width. Optionally, you can customize - the default screen sizes.

To create a - new crop, click on the Add Crop button - and then provide a name, width and height - for your new crop. Save your changes. Now, you have - successfully created an image profile for four - different screen sizes.

Let’s assign the image profile that - we created the Smart Crop folder. Select the Dynamic Media - Smart Crop profile and select the Apply Processing - profile to folder option and browse to select - the Smart Crop folder.

Let’s navigate - back to AEM Assets and then open the Smart Crop - folder that we just created.

Click on the - Create button and select the image files - that you would like to upload.

Click open the hiking man image and - click on the Smart Crop option. You should be able to view - the Smart Crop rendering for different - screen sizes, based on the image - profile you created. You can notice, that the image - has been Smart Cropped using Adobe Sensei artificial - intelligence, to keep the point of interest - focused on each screen size. In this image, it is - the man who is hiking who is our point - of interest. You also have an - option to override the suggested Smart - Crop for each screen, to better focus your - point of interest.

Asset users get more - flexibility to crop Assets, with fewer clicks and it can all be done - within AEM Assets and need not use - any other tools. Now, let’s make some - changes to our default Smart Cropping suggested - by Adobe Sensei. For large screens, let’s show the - entire banner image. For medium screens, we would - want to display less of the sky and bottom rocks - should be visible. For small screens, let’s keep the hiking man focused - on the left side of banner and less rocks - visible. For small screens, let’s keep the hiking man left - oriented and more rocks visible. You also have an option to resize - the Smart Cropping layout.

Make sure, you - Save the changes.

Let’s navigate back to the - Dynamic Media folder.

Click on more options - for the Asset folder and you can notice a Smart Crop - editing option at folder level.

Asset Users can bulk update - the Smart Crop for Assets, within a folder - using this option. You also have an option to - resize a Smart Crop layout. Let’s save - our changes. Open a new tab and - navigate AEM homescreen. Select Sites and then - select We.Retail. Create a new page using a - Dynamic Media demo template. This is a custom template - built using Template Editor and Dynamic Media components - added to its template policy.

Provide a title for the - page and open to edit it.

While the - page loads, let’s switch back to the - Dynamic Media Asset folder tab and open the sample Asset, that - we edited for Smart Cropping.

From the overlay, select the - Renditions option and you can notice the Smart Crop - renditions for this particular image.

Let’s navigate back - to our AEM Sites page and add a Dynamic Media Component - to our sites, using the component.

Click on the Dynamic - Media Component settings and check out - the options.

Drag drop our Smart Crop - image from the Asset finder, onto the Dynamic - Media Component. Click on the Settings - option for the Component and now, you should be able to see an option - to enable Smart Cropping, for this image.

Select the Smart Crop option - and Save your changes.

Click on the Preview option - and you can notice that, the cropped images for a large - screen is being displayed.

Let’s switch back to the - Asset Renditions tab and select the medium screen rendition - for a window size of 800 by 400. Notice that, for - this rendition, you will see less of the sky - portion of this particular image. Navigate back to the - Sites page Preview tab and resize - the window. At one point, you can notice that - the image dynamically changed to the medium screens - Smart Crop rendition. Similarly, let’s do this for our - small and extra small screen sizes. And you can notice that the - image gets switch seamlessly preserving the focus on - our point of interest.

Smart Crop leverages - the power of Sensei, to eliminate the - time consuming and costly tasks of cropping - content for responsive designs. -