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
BedrockMission!

Learn More

View all

Sign in to view all badges

Asset Editor Cropping in AEM 6.3

Avatar

Avatar
Validate 10
Level 3
crisr1
Level 3

Likes

16 likes

Total Posts

75 posts

Correct Reply

5 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile

Avatar
Validate 10
Level 3
crisr1
Level 3

Likes

16 likes

Total Posts

75 posts

Correct Reply

5 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile
crisr1
Level 3

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
Validate 10
Level 3
crisr1
Level 3

Likes

16 likes

Total Posts

75 posts

Correct Reply

5 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile

Avatar
Validate 10
Level 3
crisr1
Level 3

Likes

16 likes

Total Posts

75 posts

Correct Reply

5 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile
crisr1
Level 3

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
Validate 1
Level 1
mikes22421318
Level 1

Likes

2 likes

Total Posts

3 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
mikes22421318
Level 1

Likes

2 likes

Total Posts

3 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
mikes22421318
Level 1

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
Validate 10
Level 3
crisr1
Level 3

Likes

16 likes

Total Posts

75 posts

Correct Reply

5 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile

Avatar
Validate 10
Level 3
crisr1
Level 3

Likes

16 likes

Total Posts

75 posts

Correct Reply

5 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile
crisr1
Level 3

23-08-2018

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

Avatar

Avatar
Level 1
w_biolik
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
View profile

Avatar
Level 1
w_biolik
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
View profile
w_biolik
Level 1

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
Validate 10
Level 3
crisr1
Level 3

Likes

16 likes

Total Posts

75 posts

Correct Reply

5 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile

Avatar
Validate 10
Level 3
crisr1
Level 3

Likes

16 likes

Total Posts

75 posts

Correct Reply

5 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile
crisr1
Level 3

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
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,167 likes

Total Posts

6,281 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,167 likes

Total Posts

6,281 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
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
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,167 likes

Total Posts

6,281 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,167 likes

Total Posts

6,281 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

05-10-2017

Moving this question to AEM Assets topic.

~kautuk