Asset Editor Cropping in AEM 6.3

Accepted Solutions (1)

Accepted Solutions (1)

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)

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

  }

})();

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