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

[jezwn]

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

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

Thanks in advance.

[arunpatidar]

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]"/>

[jezwn]

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