Using Smart Crop with AEM Assets Dynamic Media
- Topics:
- Smart Crop
- Image Profiles
CREATED FOR:
- Beginner
- User
Smart Crop uses Adobe Sensei to eliminate the time-consuming and costly tasks of cropping content for responsive design.

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. -
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.