How To Enable Image Cropping in Touch UI Page Properties

372 views Asked by At

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.

0

There are 0 answers