{"id":7274,"date":"2019-08-19T17:33:51","date_gmt":"2019-08-19T12:03:51","guid":{"rendered":"https:\/\/www.argildx.us\/?p=7274"},"modified":"2021-06-15T12:25:24","modified_gmt":"2021-06-15T06:55:24","slug":"smart-crop-intelligent-cropping-for-aem-assets","status":"publish","type":"post","link":"https:\/\/www.argildx.us\/technology\/smart-crop-intelligent-cropping-for-aem-assets\/","title":{"rendered":"Smart Crop: Intelligent Image Crop in AEM"},"content":{"rendered":"

What makes websites vibrant and attractive across all touchpoints? When your images, videos and other assets are well customized and come together like the pieces of a solved puzzle, your website experience is elevated. Images optimized for all target devices improve the responsiveness of your <\/span>website.<\/span>\u00a0<\/span>If<\/span>\u00a0your site is on AEM, the different image features are automatically handled by AEM DAM. However, the limited image rendition capabilities of DAM might make your image lose its effectiveness on certain devices.<\/span>\u00a0<\/span><\/p>\n

DAM Asset Update Workflow creates only three renditions for uploaded images, which are not always enough in real-life projects where you need banner images, carousel images, card images, thumbnails, etc. This workflow can be updated to include some custom renditions but a lot of effort\u00a0<\/span>is\u00a0<\/span>required.<\/span>\u00a0<\/span><\/p>\n

Smart Crop helps you improve your image renditions to create responsive designs. It is an intelligent image handling feature in AEM that crops your images while preserving the area of interest.<\/span>\u00a0<\/span><\/p>\n

Avoid Custom Workflow and the Manual Tasks of\u00a0<\/span><\/span>C<\/span><\/span>reating DAM Image Renditions<\/span><\/span><\/h5>\n

We\u2019ve all faced the\u00a0<\/span>hassle\u00a0<\/span>of\u00a0<\/span>using inefficient tools to\u00a0<\/span>crop images exactly the way we want. The custom algorithms\u00a0<\/span>let you crop only in fixed combinations like from the top left, etc. In the process, your relevant logos, banners and other elements in the background might get cropped. You are left to manually grind for minutes and sometimes hours trying to get the image right for different small-screen devices and card sizes. Even harder if you are working on a bulk quantity.<\/span>\u00a0<\/span><\/p>\n

Smart Crop is a\u00a0<\/span>rockstar<\/span> in such scenarios. This feature lets you easily create custom renditions for image cards or banners by preserving the focal point in the image. Authors can now edit more images quickly without all the hassle of custom workflow steps or tedious manual image adjustments.<\/span><\/p>\n

So, What’s this <\/span><\/span>Smart Crop Feature<\/span><\/span>?<\/span><\/span>\u00a0<\/span><\/h5>\n

Smart Crop leverages Adobe Sensei technology to automatically crop the images based on the focal point of the image. For example, if an image has a mountain view and a person, and you want them in your final cropped image. Through this image crop feature, all your renditions will contain the person (or part of the person) and some parts of the mountain depending on the dimension. This feature helps in creating quality experiences for users <\/span>on<\/span>\u00a0all touchpoints. Adobe Sensei automatically judges the image and tries to find points of interest by preserving the important parts of the image. It also enables authors to adjust the smart cropped renditions in place to fit the target devices.<\/span>\u00a0<\/span><\/p>\n

How to use Smart Crop<\/span><\/b><\/h5>\n

To smart crop\u00a0<\/span>an<\/span>\u00a0image<\/span>,\u00a0<\/span>you’ll need<\/span> to start your AEM instance in Dynamic media scene7 mode.<\/span>\u00a0<\/span><\/p>\n

To know how to start dynamic media in S7 mode, refer this<\/a><\/span><\/p>\n

The following demonstration is on AEM 6.4 SP3<\/span><\/p>\n

This image crop feature<\/span>\u00a0<\/span>automatically works from Scene7 server by delivering the necessary image for the screen size.<\/span>\u00a0<\/span><\/p>\n

To create smart cropped images,\u00a0<\/span>you\u00a0<\/span>need to create an image profile for Smart Crop.<\/span><\/p>\n

1. Navigate to Tool > Assets > Image profiles<\/span> \"the<\/span><\/p>\n

 <\/p>\n

2. Create a new image profile. Select Smart Crop as Type in Cropping Options. By default, it gives the dimensions of large, medium and small sizes.\"demonstrating<\/span><\/span><\/p>\n

 <\/p>\n

3. You can create custom responsive image crop by introducing <\/span><\/span>extra-small (for cards) or extra- larg<\/span><\/span>e image sizes (for banner<\/span><\/span>\u00a0or\u00a0<\/span><\/span>carousel images) and provide respective dimensions for them. We can also choose an option for Color and Image Swatch (for products). This automatically detects the prominent color in the image and creates a swatch for the product.<\/span><\/span>\u00a0<\/span>\"the<\/p>\n

 <\/p>\n

4. After creating the Image Profile, you need to apply this profile to a folder where all the images will be uploaded. Select the Image Profile and click on Apply Processing Profile to folder(s). Select folder(s) and click Apply.<\/span><\/span>\u00a0<\/span>\"applying\"different<\/p>\n

 <\/p>\n

5. The images uploaded in that folder will generate smart crop renditions.<\/span><\/span> \"a<\/span><\/p>\n

 <\/p>\n

6. Smart Cropped renditions can also be manually adjusted in the editor to further customize the view of the renditions. Click on Smart Crop option in the menu to open smart crop edits.<\/span><\/span> \"small,<\/span><\/p>\n

 <\/p>\n

7. You <\/span><\/span>can use these images on the page in Dynamic Media component from Dynamic Media group. Drag and drop this component and add the relevant image (with smart cropped renditions) in it. Open the dialog and go to Dynamic Media Settings tab and choose Smart Crop in Preset Type.\u00a0<\/span><\/span>You<\/span><\/span>\u00a0can also add Image Modifiers i.e. extra parameters to be sent to Scene7 server for some image effects.<\/span><\/span>\u00a0<\/span>\"preset<\/p>\n

<\/h5>\n
How <\/span><\/b>will Yo<\/span><\/b>ur O<\/span><\/b>rganization Benefit from Using this Intelligent Image Crop Feature<\/span><\/b>?<\/span><\/b>\u00a0<\/span><\/h5>\n