Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Asset Editor Cropping in AEM 6.3

crisr1
Level 4
Level 4

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?

1 Accepted Solution
crisr1
Correct answer by
Level 4
Level 4

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.

View solution in original post

0 Replies
kautuk_sahni
Community Manager
Community Manager

Moving this question to AEM Assets topic.

~kautuk

crisr1
Level 4
Level 4

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?

Screen Shot 2017-10-05 at 9.34.25 AM.png

crisr1
Correct answer by
Level 4
Level 4

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.

View solution in original post

w_biolik
Level 1
Level 1

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
Level 4
Level 4

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

mikes22421318
Level 1
Level 1

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";
   }

  }

})();