Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Multiple smartimage widgets in an AEM component dialog

Avatar

Employee

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.

1 Accepted Solution

Avatar

Correct answer by
Employee

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

View solution in original post

1 Reply

Avatar

Correct answer by
Employee

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