Expand my Community achievements bar.

SOLVED

custom crop Image options

Avatar

Level 3

Hi , 

 

I would like to add more crop options to AEM asset editor. currently we have few like 2:3 and 3:5 and etc.

How can I achieve this. Is there any file I can customize. sample example would be great help.

 

And currently original image is overwritten by cropped image. Is there an option to form new image instead of overwriting existing .

 

Thanks

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

6.5
1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Create a clientlibs of  coralui3 with below code

 

(function () {
"use strict";

CUI.imageeditor.plugins.Crop.ASPECT_RATIOS = [
{name: '10_to_9', ratio: 0.9},
{name: '3_to_2', ratio: 0.667},
{name: '2_to_1', ratio: 0.5},
{name: '3_to_5', ratio: 0.5714},
{name: '7_to_5', ratio: 0.714},
{name: '14_to_5', ratio: 0.357},
{name: '9_to_5', ratio: 0.55}
];

CUI.imageeditor.plugins.PluginRegistry.register('crop', CUI.imageeditor.plugins.Crop);

for (var key in CUI.imageeditor.strings) {
if (CUI.imageeditor.strings.hasOwnProperty(key)) {
CUI.imageeditor.strings[key]["crop.aspect_ratios.10_to_9"] = "10 : 9";
CUI.imageeditor.strings[key]["crop.aspect_ratios.3_to_2"] = "3 : 2";
CUI.imageeditor.strings[key]["crop.aspect_ratios.2_to_1"] = "2 : 1";
CUI.imageeditor.strings[key]["crop.aspect_ratios.3_to_5"] = "5 : 3";
CUI.imageeditor.strings[key]["crop.aspect_ratios.7_to_5"] = "7 : 5";
CUI.imageeditor.strings[key]["crop.aspect_ratios.14_to_5"] = "14 : 5";
CUI.imageeditor.strings[key]["crop.aspect_ratios.9_to_5"] = "9 : 5";
}
}

})();



Arun Patidar

View solution in original post

2 Replies

Avatar

Level 10

As far as I know there is unfortunately no easy way to do this. You'll have to write some code.

You can find an answer here: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-assets/asset-editor-croppi...

 

Avatar

Correct answer by
Community Advisor

Create a clientlibs of  coralui3 with below code

 

(function () {
"use strict";

CUI.imageeditor.plugins.Crop.ASPECT_RATIOS = [
{name: '10_to_9', ratio: 0.9},
{name: '3_to_2', ratio: 0.667},
{name: '2_to_1', ratio: 0.5},
{name: '3_to_5', ratio: 0.5714},
{name: '7_to_5', ratio: 0.714},
{name: '14_to_5', ratio: 0.357},
{name: '9_to_5', ratio: 0.55}
];

CUI.imageeditor.plugins.PluginRegistry.register('crop', CUI.imageeditor.plugins.Crop);

for (var key in CUI.imageeditor.strings) {
if (CUI.imageeditor.strings.hasOwnProperty(key)) {
CUI.imageeditor.strings[key]["crop.aspect_ratios.10_to_9"] = "10 : 9";
CUI.imageeditor.strings[key]["crop.aspect_ratios.3_to_2"] = "3 : 2";
CUI.imageeditor.strings[key]["crop.aspect_ratios.2_to_1"] = "2 : 1";
CUI.imageeditor.strings[key]["crop.aspect_ratios.3_to_5"] = "5 : 3";
CUI.imageeditor.strings[key]["crop.aspect_ratios.7_to_5"] = "7 : 5";
CUI.imageeditor.strings[key]["crop.aspect_ratios.14_to_5"] = "14 : 5";
CUI.imageeditor.strings[key]["crop.aspect_ratios.9_to_5"] = "9 : 5";
}
}

})();



Arun Patidar