Chuyển đến nội dung chính

Can multiple smartimage xtypes appear on one dialog tab in AEM

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: dialog with two images in single tab

Nhận xét