adobe cq5 display thumbnail from the uploaded smart image

Question

I'm building a custom component in CQ5 and I faced with some issues.

The idea is:

• In a paragraph system custom components called imageItem to be added.
• Each ImageItem is consisted of image and it's thumbnail (autogenerated).
• In order to drag and drop the gallery image into galleryitem component I'm using the cq5 smartimage component on the first tab.
• On the second tab I want to show the preview of the thumbnail of the dragged image (saying that the thumbnails are auto-generated while uploading image as resource and can be accessed adding the following path to the original image url: {image_url}.thumb.100.100.jpg)

Is there any cq5 component that can display those images for the following url?

Answer 1

I'm assuming you're talking about doing all of this within the component's dialog --

If you just want to show an image in a dialog without providing all the editing capabilities that xtype smartimage gives you, you can use a label widget with the html property set to:

<img src="{your-thumbnail-image-path}" />

Now, since you want that to match whatever image you have loaded in your smartimage on the other tab, you'll want to set up a listener on the smartimage to update your label's html whenever you change the image in the first tab.

To see an example of some out-of-the-box dialog listeners, take a look at the list component's dialog in CRXDE Lite at

/libs/foundation/components/list/dialog/items/list/items/listFrom/listeners

In your case, you'll probably want to listen for the imagestate event (found in the events section of the API docs), and when it fires you'll want to do something like this:

function(smartImg) {
    var dialog = this.findParentByType('dialog'),
        label = dialog.find('name', 'thumbnailPreviewLabel')[0];

    label.update('<img src="' + smartImg.referencedFileInfo.dataPath + '.thumb.100.100.jpg" />');
}

where thumbnailPreviewLabel is the name attribute for your label widget.

For this example I took a few shortcuts like defining the listener inline in the dialog.xml (which is a little ugly because of the escaped HTML characters - you'll probably want to define the function in a separate javascript file and just use it by name here), and I used the raw path to a DAM rendition since the thumbnail servlet wasn't working for me.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Dialog"
    title="Image Thumbnail Preview"
    xtype="dialog">
    <items
        jcr:primaryType="cq:Widget"
        xtype="tabpanel">
        <items jcr:primaryType="cq:WidgetCollection">
            <image
                jcr:primaryType="cq:Widget"
                cropParameter="./imageCrop"
                ddGroups="[media]"
                fileNameParameter="./fileName"
                fileReferenceParameter="./fileReference"
                mapParameter="./imageMap"
                name="./file"
                requestSuffix=".img.png"
                rotateParameter="./imageRotate"
                title="Image"
                xtype="html5smartimage">
                <listeners
                    jcr:primaryType="nt:unstructured"
                    imagestate="function(smartImg) { this.findParentByType('dialog').find('name', 'thumbnailPreviewLabel')[0].update('&lt;img src=&quot;' + smartImg.referencedFileInfo.dataPath + '/jcr:content/renditions/cq5dam.thumbnail.140.100.png&quot; /&gt;'); }"/>
            </image>
            <preview
                jcr:primaryType="cq:Widget"
                anchor="100%"
                title="Image Thumbnail Preview"
                xtype="panel">
                <items jcr:primaryType="cq:WidgetCollection">
                    <thumbnail
                        jcr:primaryType="cq:Widget"
                        name="thumbnailPreviewLabel"
                        html=""
                        xtype="label"/>
                </items>
            </preview>
        </items>
    </items>
</jcr:root>