CODEWITHSUNDEEP
aem
Riju Mahna
Riju Mahna

Reputation: 6926

Add custom image page property in CQ5

Every page in CQ5 can have an image attached to it in page properties. I need to add my own image property to be used in a component.

I am able to add small things as a check box using this link but when I add a new image tab in the page properties, even the existing image stops working. Even if I can add another image dialog in the page, I am unable to fetch the new image. This is the new image dialog I've added. (see attachment)

I just want to use the image in the carousel [maybe fetch it using : 

Resource r = page.getContentResource("image1");

JCR-structure-of-image-dialog

Can someone please help me on this ? What properties do I at least need to make it work ?

Upvotes: 1

Views: 3680

Answers (1)

anotherdave
anotherdave

Reputation: 6754

You need to use an xtype of smartimage (or a version of this, e.g. html5smartimage).

Here's some sample code that will add two images in a dialog — imageOne and imageTwo. You need to make sure that the properties of your new image don't conflict with the existing one — namely the fileNameParameter, fileReferenceParameter, name and the name of the child node resType should be unique in the example below.

<items jcr:primaryType="cq:TabPanel">
    <items jcr:primaryType="cq:WidgetCollection">
        <imageOnePanel
                jcr:primaryType="cq:Panel"
                title="Image One Panel">
            <items jcr:primaryType="cq:WidgetCollection">
                <imageOne
                        jcr:primaryType="cq:Widget"
                        border="true"
                        ddGroups="[media]"
                        fileNameParameter="./imageOne/fileName"
                        fileReferenceParameter="./imageOneFileReference"
                        height="300"
                        hideLabel="true"
                        name="./imageOne/file"
                        xtype="html5smartimage">
                    <items jcr:primaryType="cq:WidgetCollection">
                        <resType
                                jcr:primaryType="cq:Widget"
                                ignoreData="{Boolean}true"
                                name="./imageOne/sling:resourceType"
                                value="foundation/components/image"
                                xtype="hidden"/>
                    </items>
                </imageOne>
            </items>
        </imageOnePanel>
        <imageTwoPanel
                jcr:primaryType="cq:Panel"
                title="Image Two Panel">
            <items jcr:primaryType="cq:WidgetCollection">
                <imageTwo
                        jcr:primaryType="cq:Widget"
                        border="true"
                        ddGroups="[media]"
                        fileNameParameter="./imageTwo/fileName"
                        fileReferenceParameter="./imageTwoFileReference"
                        height="300"
                        hideLabel="true"
                        name="./imageTwo/file"
                        xtype="html5smartimage">
                    <items jcr:primaryType="cq:WidgetCollection">
                        <resType
                                jcr:primaryType="cq:Widget"
                                ignoreData="{Boolean}true"
                                name="./imageTwo/sling:resourceType"
                                value="foundation/components/image"
                                xtype="hidden"/>
                    </items>
                </imageTwo>
            </items>
        </imageTwoPanel>
    </items>
</items>

Reusing code from the dialog & not giving unique properties might have caused you issues with adding a second image, though I'm not 100% from the error you're seeing.

Upvotes: 3

Related Questions