May 22, 2020
Estimated Post Reading Time ~

Image crop tools not functioning properly but working in AEM

I'm having concerns about the Image Crop Tool in AEM 6.0.

I had an existing code working in CQ5 (with regards to Image Crop Tool), but when I tried to use AEM6.0, this certain tool won't work properly anymore.

When I try to crop the image, it doesn't really do the cropping, the original image will just be displayed.

No error is being displayed to the logs that make it more complicated. I am using com.day.cq.wcm.commons.AbstractImageServlet class for this.

Does anyone who could help with this? Is there any enhancement or changes from CQ5 to AEM6 with regard to this tool?

Below is a snippet of the image:

<tab_image_wide
        jcr:primaryType="cq:Widget"
        allowUpload="{Boolean}false"
        cropParameter="./imageWide/imageCrop"
        ddGroups="[media]"
        fileNameParameter="./imageWide/fileName"
        fileReferenceParameter="./imageWide/fileReference"
        itemId="tab_image_wide"
        name="./imageWide/file"
        requestSuffix="/imageWide.img.png"
        title="Image (Wide)"
        xtype="smartimage">
        <cropConfig jcr:primaryType="cq:Widget">
            <aspectRatios jcr:primaryType="cq:Widget">
                <freeCrop
                    jcr:primaryType="cq:Widget"
                    text="Free Crop"
                    value="0,0"/>
                <wideScreen
                    jcr:primaryType="cq:Widget"
                    text="Widescreen (16:9)"
                    value="16,9"/>
            </aspectRatios>
        </cropConfig>
    </tab_image_wide>
Thanks,

Best How To:
Check the image's field xtype. In old versions it was smartimge, now you need to use html5smartimage.

Example
<items jcr:primaryType="cq:WidgetCollection">
        <image
            jcr:primaryType="cq:Widget"
            cropParameter="./imageCrop"
            ddGroups="[media]"
            fileNameParameter="./fileName"
            fileReferenceParameter="./fileReference"
            name="./file"
            title="Image"
            uploadUrl="/tmp/upload_test/*"
            xtype="html5smartimage">
        </image>


By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.