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

Smart Crop uses Adobe Sensei to eliminate the time-consuming and costly tasks of cropping content for responsive design.

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. -
Video assumes that your AEM instance is running on Dynamic Media S7 mode. Instructions on setting up AEM with Dynamic Media can be found here.

Adobe Experience Manager’s Dynamic Media Smart Crop capability includes

  • AEM Asset admins can easily create image profiles for Smart Cropping based on device width and height.
  • Smart cropping can be performed for an individual asset or can be performed for all assets within a folder.
  • Smart Crop Editing Layout can be resized for better visibility.
  • AEM Sites’ Dynamic Media component supports Smart Crop.
  • Published URL for the Smart Cropped asset is available to be used with 3rd party applications that accept hosted assets.
Smart Crop coordinates are aspect ratio-dependent. That is, for the various smart crop settings in an image profile, if the aspect ratio is the same for the added dimensions in the image profile, then the same aspect ratio is sent to Dynamic media. Because of this, the same crop area is suggested in the Smart Crop Editor. For example, a crop setting of 100x100 and 200x200 would result in the same smart crop being generated by the system.