Asset Editor Cropping in AEM 6.3

Avatar

Avatar

cmrockwe

Avatar

cmrockwe

cmrockwe

04-10-2017

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?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

cmrockwe

Avatar

cmrockwe

cmrockwe

05-10-2017

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.

Answers (6)

Answers (6)

Avatar

Avatar

mikes22421318

Avatar

mikes22421318

mikes22421318

06-11-2018

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

  }

})();

Avatar

Avatar

cmrockwe

Avatar

cmrockwe

cmrockwe

23-08-2018

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

Avatar

Avatar

w_biolik

Avatar

w_biolik

w_biolik

07-12-2017

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?

Avatar

Avatar

cmrockwe

Avatar

cmrockwe

cmrockwe

05-10-2017

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

Avatar

Avatar

kautuk_sahni

Community Manager

Total Posts

5.8K

Likes

1.0K

Correct Reply

1.1K

Avatar

kautuk_sahni

Community Manager

Total Posts

5.8K

Likes

1.0K

Correct Reply

1.1K
kautuk_sahni
Community Manager

05-10-2017

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

Avatar

Avatar

kautuk_sahni

Community Manager

Total Posts

5.8K

Likes

1.0K

Correct Reply

1.1K

Avatar

kautuk_sahni

Community Manager

Total Posts

5.8K

Likes

1.0K

Correct Reply

1.1K
kautuk_sahni
Community Manager

05-10-2017

Moving this question to AEM Assets topic.

~kautuk