Add custom image page property in CQ5 - aem

Question

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");
Can someone please help me on this ? What properties do I at least need to make it work ?

Answer 1

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.