Building A Dialogue To Have 2 Or More Images

Most of time when I build a component I only require a single image so the dialog I build will look something like this

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="cq:TabPanel"
    activeTab="{Long}0"
    helpPath="en/cq/current/wcm/default_components.html#Text Image"
    xtype="tabpanel">
    <items jcr:primaryType="cq:WidgetCollection">
        <tab1
            jcr:primaryType="cq:Widget"
            ddGroups="[media]"
            fileNameParameter="/fileName"
            fileReferenceParameter="/fileReference"
            name="/file"
            requestSuffix=".img.png"
            sizeLimit="100"
            title="Image"
            xtype="html5smartimage">
        </tab1>
        <tab2
            jcr:primaryType="cq:Widget"
            title="Advanced Image Properties"
            xtype="panel">
            <items jcr:primaryType="cq:WidgetCollection">
                <title
                    jcr:primaryType="cq:Widget"
                    fieldLabel="Title"
                    name="./image/jcr:title"
                    xtype="textfield"/>
                <resType
                    jcr:primaryType="cq:Widget"
                    ignoreData="{Boolean}true"
                    name="./image/sling:resourceType"
                    value="foundation/components/image"
                    xtype="hidden"/>

            </items>
        </tab2>
    </items>
</jcr:root>

The image is displayed in a single tab, and it's resType field is a hidden field on the 2nd tab.

So the other day I needed a 2nd image on my dialogue, so I added a 3rd tab with the image properties

Which did not save the 2nd image and I did not have a 2nd resType property.

My mistake was having the
            fileNameParameter="/fileName"
            fileReferenceParameter="/fileReference"
            name="/file"

save to the same directory / and the expected name property name is fileName, fileReference and file not fileName2, fileReference2 and /file2

So I changed the tab1 to have the following properties

The first image is in directory /image

The 2nd image tab to have the following properties

The 2nd image is in directory /image2

The 2 hidden resType properties could have the following values

If you want to have the image and another field property to be displayed in the tab, you could build the diaglog like this

<?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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="cq:Dialog"
    title="Configure Special Campaign Pusher"
    xtype="tabpanel">
    <items jcr:primaryType="cq:WidgetCollection">
        <Tab1
            jcr:primaryType="cq:Panel"
            title="Image Button">
            <items jcr:primaryType="cq:WidgetCollection">
                <buttonText
                    jcr:primaryType="cq:Widget"
                    fieldLabel="Text"
                    name="./buttonText"
                    xtype="textfield"/>
                <imageButton
                    jcr:primaryType="cq:Widget"
                    ddGroups="[media]"
                    fieldLabel="Image"
                    fileNameParameter="./image/fileName"
                    fileReferenceParameter="./image/fileReference"
                    height="{Long}200"
                    name="./image/file"
                    requestSuffix="/image.img.png"
                    sizeLimit="100"
                    xtype="smartimage"/>
                <resType
                    jcr:primaryType="cq:Widget"
                    ignoreData="{Boolean}true"
                    name="./image/sling:resourceType"
                    value="foundation/components/image"
                    xtype="hidden"/>
            </items>
        </Tab1>
        <Tab2
            jcr:primaryType="cq:Panel"
            title="Image Button Hover">
            <items jcr:primaryType="cq:WidgetCollection">
                <imageButtonHover
                    jcr:primaryType="cq:Widget"
                    ddGroups="[media]"
                    fieldLabel="Image Button Hover"
                    fileNameParameter="./image2/fileName"
                    fileReferenceParameter="./image2/fileReference"
                    height="{Long}200"
                    name="./image2/file"
                    requestSuffix="/image2.img.png"
                    sizeLimit="100"
                    xtype="smartimage"/>
                <resType
                    jcr:primaryType="cq:Widget"
                    ignoreData="{Boolean}true"
                    name="./image2/sling:resourceType"
                    value="foundation/components/image"
                    xtype="hidden"/>
            </items>
        </Tab2>
    </items>
</jcr:root>

Blog

Making digital more human