Expand my Community achievements bar.

How can I customize AEM OOTB crop functionality to add custom presets?

Avatar

Level 6

Is it possible to customize the OOTB crop to add additional crop options? Attached below is a screenshot of the available crop options where I would like to add custom options(for eg: 1200x800 @ 72 dpi, 1920 x 400  @ 72 dpi).

jezwn_0-1640689788747.png

 

Or what would be the best way to achieve these dimensions for images from inside AEM?

 

Thanks in advance.

 

2 Replies

Avatar

Community Advisor

Hi,

You need to achieve this via clientlibs

 

(function () {  
   "use strict";  
  
 CUI.imageeditor.plugins.Crop.ASPECT_RATIOS = [ 
   {name: '10_to_9', ratio: 0.9},  
   {name: '3_to_2', ratio: 0.667},  
   {name: '2_to_1', ratio: 0.5},
   {name: '3_to_5', ratio: 0.5714}
  ];  

CUI.imageeditor.plugins.PluginRegistry.register('crop', CUI.imageeditor.plugins.Crop);

 for (var key in CUI.imageeditor.strings) {  
   if (CUI.imageeditor.strings.hasOwnProperty(key)) {  
       CUI.imageeditor.strings[key]["crop.aspect_ratios.10_to_9"] = "10 : 9";  
       CUI.imageeditor.strings[key]["crop.aspect_ratios.3_to_2"] = "3 : 2";  
       CUI.imageeditor.strings[key]["crop.aspect_ratios.2_to_1"] = "2 : 1";  
       CUI.imageeditor.strings[key]["crop.aspect_ratios.3_to_5"] = "3 : 3"; 
   }  
  }  

})();  

Clientlib category

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    allowProxy="{Boolean}true"
    categories="[coralui3]"
    dependencies="[granite.jquery]"/>


Arun Patidar

Avatar

Level 6

Thanks @arunpatidar I tried this, however we needed to define fixed width/height for crop rather than the ratios.

 

And it was achieved using the image profiles and smart crop option, which enabled us to define fixed image dimensions for crop as "image profiles" and using "smart crop" to crop the assets folderwise and individually, as required.

Reference: https://experienceleague.adobe.com/docs/experience-manager-64/assets/dynamic/image-profiles.html?lan...