AEM 6.0 Image crop tools (using Free Crop / Ratio Crop) not functioning properly but working in CQ 5

Question

I'm having a concern on 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 makes it more complicated. I am using com.day.cq.wcm.commons.AbstractImageServlet class for this.

Does anyone who could help on 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,

Answer 1

Check 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>

If doesn't helps:

look at default component /libs/foundation/components/image/image.jsp . Look at line 28 : image.setSelector(".img"); // use image script image.setSelector(".img"); // use image script . Request with .img processed by next servlet /libs/foundation/components/parbase/img.GET.java . There is image cropping applied. Try to use something similar in yours own component