Can multiple smartimage xtypes appear on one dialog tab in AEM?

Question

The out of the box (OOTB) page properties dialog in Adobe Experience Manager (AEM) (CQ5) provides an Image tab. I would like to add a couple more images to the dialog, but I don't want to create a separate tab for each one.

For instance, is there a way to include an image on the "Advanced" tab within a dialogfielset? I tried this, but it does not seem to render properly.

One thing I am considering is to extend the slideshow xtype and each image would be a separate "slide"

Are there better approaches?

Answer 1

It's possible to have multiple smartimage xtypes on a tab!

Widgets API document for smartimage:

Note that the component is mainly designed for use on a separate dialog tab. You may use the component inside a CQ.Ext.layout.FormLayout optionally if you provide a suitable height setting.

Here are codes for dialog:

<?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"
    height="{Long}600"
    title="dialog"
    xtype="dialog">
    <items
        jcr:primaryType="cq:Widget"
        xtype="tabpanel">
        <items jcr:primaryType="cq:WidgetCollection">
            <panel
                jcr:primaryType="cq:Panel"
                title="Panel with two Images">
                <items jcr:primaryType="cq:WidgetCollection">
                    <firstimage
                        jcr:primaryType="cq:Widget"
                        cropParameter="./firstimage/imageCrop"
                        ddGroups="[media]"
                        fieldLabel="first image field"
                        fileNameParameter="./firstimage/fileName"
                        fileReferenceParameter="./firstimage/fileReference"
                        height="{Long}200"
                        name="./firstimage/file"
                        rotateParameter="./firstimage/imageRotate"
                        title="First Image"
                        width="{Long}200"
                        xtype="html5smartimage"/>
                    <secondimage
                        jcr:primaryType="cq:Widget"
                        cropParameter="./secondimage/imageCrop"
                        ddGroups="[media]"
                        fieldLabel="second image field"
                        fileNameParameter="./secondimage/fileName"
                        fileReferenceParameter="./secondimage/fileReference"
                        height="{Long}200"
                        name="./secondimage/file"
                        rotateParameter="./secondimage/imageRotate"
                        title="secondimage"
                        width="{Long}200"
                        xtype="html5smartimage"/>
                </items>
            </panel>
        </items>
    </items>
</jcr:root>

And the following is the result: