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?
Solved! Go to 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.
Views
Replies
Total Likes
Moving this question to AEM Assets topic.
~kautuk
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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?
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
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?
Views
Replies
Total Likes
I wish there was a better solution. It's a huge pain.
Views
Replies
Total Likes
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";
}}
})();
Views
Likes
Replies