Asset Editor Cropping in AEM 6.3

[crisr1]

I have the same question as posted on Stack Overflow.

cq5 - AEM DAM apect ratio crop - Stack Overflow

When editing an Asset from http://localhost:4502/mnt/overlay/dam/gui/content/assets/assetedit.html

There are a certain number of crop aspect ratios.  I happen to require 4:3 which is not there.

How does one add a crop setting in 6.3?

[kautuk_sahni]

Moving this question to AEM Assets topic.

~kautuk

[kautuk_sahni]

Please find below some useful references:

1. Component Custom Aspect Ratios

2. Named Transform Image Servlet

3. Re: Set default crop aspect ratio on html5smartimage

I hope this would help you.

~kautuk

[crisr1]

Hello. Thanks for the reply. I am familiar with these online documents. Unfortunately, they are not relevant to my question. Here are the steps to take;

1. start with /assets.html

2. find and select an image. then the path should be /assetdetails.html/content/dam/......

3. click the edit icon. then the path should be /mnt/overlay/dam/gui/content/assets/assetedit.html/content/dam/........

4. The upper left icon allow users to crop the DAM asset using different aspect ratios, 2:3, 5:3, 16:9, square, Free hand

The question is how to add and remove these crop options?

[crisr1 · Accepted solution]

Okay. So editing this file

http://localhost:4502/crx/de/index.jsp#/libs/clientlibs/granite/coralui3/js/coral.js

by adding this file /apps/clientlibs/granite/coralui3/js/coral.js to my project did the trick. It would be much better if Adobe would engineer these features to be more easily customized. I don't like overlaying a js file that is over 71,000 lines to adjust 3 lines of code.

Also the ratios seem to be backwards. It was strange that the ratios need to height over width to come out properly. 4(w) : 3(h) should be a ratio of 1.3334, but needed to be coded as 0.75 in coral.js. Using the same process I had to fix the existing 2:3 crop, which should be a portrait.

[w_biolik]

Hi, it works for me too but it looks so ugly. Did you maybe found better solution for this? Did you contact Adobe what they recommend?

[crisr1]

I wish there was a better solution. It's a huge pain.

[mikes22421318]

There is another workaround which is a little bit less ugly:

Create a custom ClientLib with the category "coralui3"

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

Overwrite the global variables used in the coral.js file

(function () {
   "use strict";

   CUI.imageeditor.plugins.Crop.ASPECT_RATIOS = [
  {name: '16_to_10', ratio: 0.625},
   {name: '16_to_5', ratio: 0.3125},
   {name: '2_to_3', ratio: 1.5}
  ];

   for (var key in CUI.imageeditor.strings) {
   if (CUI.imageeditor.strings.hasOwnProperty(key)) {
  CUI.imageeditor.strings[key]["crop.aspect_ratios.16_to_5"] = "16 : 5";
   CUI.imageeditor.strings[key]["crop.aspect_ratios.16_to_10"] = "16 : 10";
   }
  }
})();