Crop an image in Touch UI page properties

[andyshreve]

Is there a way to use the image crop tool on an image that is displayed inside a page's Touch UI page properties dialog? I have AEM pages where an image has been dropped into a dropzone in a page properties tab, and there is a need to crop the image to a specific dimension. In other words, the image is visible when you open a page's page properties, and doesn't rely on an Image component that has been dropped onto the page. This feature is available in Classic page properties but I don't see how this is done in Touch page properties. I am familiar with how to configure the crop tool in the _cq_editConfig.xml for a component, but I can't find any info on how to configure the crop tool in Touch page properties.

[Gaurav-Behl · Accepted solution]

I'm not aware of any OOB configuration/solution.

A custom solution would be to overlay/create your own component/widget and plugin into "Thumbnail" tab or create a new tab itself based on your requirements.

You may overlay this and register your custom dialog/component to the tab -

/libs/wcm/foundation/components/basicpage/v1/basicpage/tabs/thumbnail utilizes granite/ui/components/coral/foundation/form/fileupload

resources that you might need for custom solution:

Experiencing Adobe Experience Manager - Day CQ: AEM 63 - Add Custom Properties to DAM folders

Experiencing Adobe Experience Manager - Day CQ: HTML 5 Smart Image Component Custom Aspect Ratios

Experiencing Adobe Experience Manager - Day CQ: AEM CQ 56 - Crop Images in a Workflow Step    // backend node/workflow step, in case you want to go with workflow based solution

https://techrevel.blog/2017/05/26/coral-3-granite-ui-components/   // dialog for cropping

AEM Developer Learning : Image Rendition with Cropping in AEM 6.2   // backend code for cropping

Customizing Page Authoring​  // customize author tabs/layers