Asset Editor Cropping in AEM 6.3 | Community
Skip to main content
crisr1
crisr1
Level 4
October 4, 2017
Solved

Asset Editor Cropping in AEM 6.3

  • October 4, 2017
  • 7 replies
  • 6702 views

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?

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by crisr1

    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.

    7 replies

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    October 5, 2017

    Moving this question to AEM Assets topic.

    ~kautuk

    Kautuk Sahni
    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    October 5, 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

    Kautuk Sahni
    crisr1
    crisr1Author
    Level 4
    October 5, 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?

    crisr1
    crisr1AuthorAccepted solution
    Level 4
    October 5, 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.

    W
    w_biolik
    December 7, 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?

    crisr1
    crisr1Author
    Level 4
    August 23, 2018

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

    M
    mikes22421318
    November 6, 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";
       }
      }
    })();
      Terms & ConditionsAccessibility statement

      Loading footer...