Is there any official path, preferably requiring little effort / future maintenance, for implementing an image cropping feature within a Touch UI page properties editor? I realize that an author can go to the source image in the DAM and crop it, but we are looking for functionality similar to inline image cropping that is typically present among standard image components via cq:inplaceEditing
in _cq_editConfig.xml
.
I'm aware of the cq/gui/components/common/wcm/pagethumbnail
component which allows authors to pick an asset from the DAM, upload an image from local filesystem, and reset the image to a preview one. Unfortunately, it falls short by not including an image crop feature. eg:
<thumbnail
cq:showOnCreate="{Boolean}true"
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/common/wcm/pagethumbnail"
page="${empty param.item ? requestPathInfo.suffix : param.item}"
quiet="{Boolean}true">
<upload
granite:class="cq-wcm-fileupload"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/fileupload"
async="{Boolean}true"
autoStart="{Boolean}false"
multiple="{Boolean}false"
name="./image/file.sftmp"
sizeLimit="100000000"
text="Upload Image"
uploadUrl="will_be_replaced">
<granite:data
jcr:primaryType="nt:unstructured"
cq-msm-lockable="./image"/>
</upload>
<assetpicker
granite:class="js-browse-activator"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/button"
text="Select Image">
<granite:data
jcr:primaryType="nt:unstructured"
cq-msm-lockable="./image"/>
</assetpicker>
<preview
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/siteadmin/admin/pagepreview"/>
</thumbnail>
I've seen this post https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/crop-an-image-in-touch-ui-page-properties/qaq-p/318414 which suggests that we create our own component, but I'd hate to re-invent the wheel if there is a solution out there already.