Multiple smartimage widgets in an AEM component dialog

[Community_Admin]

Is there a way to have multiple smartimage widgets in a single dialog? Specifically I'm struggling with the requestSuffix parameter. Most of the other ones I can adapt to get the second widget to save its info to a different location from the first, but I can't see how to do that with requestSuffix. If the values are the same for both widgets, then once an image is selected, I see the same image in both tabs of the dialog. If I change it to something like /image2.img.png, it's no longer hitting the component as the resource. If I change it to .image2.img.png, the script handling this selector appears to break. I might be able to change that script, but that doesn't seem like it'll be a very flexible approach.

Any other options? I'm in CQ 5.4 if that matters.

[Community_Admin · Accepted solution]

Joel,

Good question. Using multiple image in a dialog is kind of complicated but can be done. But I am not sure how to use them in multifield (Love to here if some has done that using OOTB xtype). Here is example of using mutiple image in dialog

<items jcr:primaryType="cq:WidgetCollection">

        <tab1

            jcr:primaryType="cq:Widget"

            title="Settings"

            xtype="panel">

            <items jcr:primaryType="cq:WidgetCollection">

                <resType1

                    jcr:primaryType="cq:Widget"

                    ignoreData="{Boolean}true"

                    name="./image1/sling:resourceType"

                    value="foundation/components/image"

                    xtype="hidden"/>

                <resType2

                    jcr:primaryType="cq:Widget"

                    ignoreData="{Boolean}true"

                    name="./image2/sling:resourceType"

                    value="foundation/components/image"

                    xtype="hidden"/>

</tab1>

<tab2

            jcr:primaryType="cq:Widget"

            cropParameter="./image1/imageCrop"

            ddGroups="[media]"

            fileNameParameter="./image1/fileName"

            fileReferenceParameter="./image1/fileReference"

            mapParameter="./image1/imageMap"

            name="./image1/file"

            requestSuffix="/image1.img.png"

            rotateParameter="./image1/imageRotate"

            sizeLimit="100"

            title="Frame Image"

            xtype="html5smartimage"/>

        <tab3

            jcr:primaryType="cq:Widget"

            cropParameter="./image2/imageCrop"

            ddGroups="[media]"

            fileNameParameter="./image2/fileName"

            fileReferenceParameter="./image2/fileReference"

            mapParameter="./image2/imageMap"

            name="./image2/file"

            requestSuffix="/image2.img.png"

            rotateParameter="./image2/imageRotate"

            sizeLimit="100"

            title="Lightbox Image"

            xtype="html5smartimage"/>

And then edit config drop target something like this,

<cq:dropTargets jcr:primaryType="nt:unstructured">

        <image

            jcr:primaryType="cq:DropTargetConfig"

            accept="[image/.*]"

            groups="[media]"

            propertyName="./image1/fileReference">

            <parameters

                jcr:primaryType="nt:unstructured"

                sling:resourceType="foundation/components/image"

                imgAlignment="left">

                <image2

                    jcr:primaryType="nt:unstructured"

                    sling:resourceType="foundation/components/image"

                    imageCrop=""

                    imageMap=""

                    imageRotate=""/>

                <image1

                    jcr:primaryType="nt:unstructured"

                    sling:resourceType="foundation/components/image"

                    imageCrop=""

                    imageMap=""

                    imageRotate=""/>

            </parameters>

        </image>

    </cq:dropTargets>

Yogesh