Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

How to create multiple image fields in a touch/granite dialog in AEM 6.1

Avatar

Avatar
Validate 1
Level 1
fstarfeld
Level 1

Likes

0 likes

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile

Avatar
Validate 1
Level 1
fstarfeld
Level 1

Likes

0 likes

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile
fstarfeld
Level 1

15-10-2015

On the page properties there is a tab for the thumbnail image. I added an additional tab for a background image.

But it seems to be tricky to have multiple image tabs in a dialog.

For the classic/widget based UI I had to explicitly add 'resourceType = foundation/components/image' to the new background image field so it is stored correctly. But now it works for me.

Now I also wanted to add the background image to the touch UI. So I copied the existing definition of the thumbnail image from the granite dialog and added it on a new tab.
But if I open the page properties in the touch UI and add a new image on the thumbnail or background tab,
both tabs always show the same image. In CRX I see that the nodes and properties are mixed up between both image nodes.

This is the code I added to the touch / cq dialog

....
<tabs jcr:primaryType="nt:unstructured">
    <items jcr:primaryType="nt:unstructured">
        <backgroundimage
            cq:showOnCreate="{Boolean}false"
            jcr:primaryType="nt:unstructured"
            jcr:title="Background Image"
            sling:resourceType="granite/ui/components/foundation/section"
            sling:orderBefore="cloudservices">
            <layout
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                margin="{Boolean}false"/>
            <items jcr:primaryType="nt:unstructured">
                <column
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/container">
                    <items jcr:primaryType="nt:unstructured">
                        <image1
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="cq/gui/components/common/wcm/pagethumbnail"
                            page="${empty param.item ? requestPathInfo.suffix : param.item}"
                            quiet="{Boolean}true">
                            <upload
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/fileupload"
                                autoStart="{Boolean}false"
                                cq-msm-lockable="/image1"
                                multiple="{Boolean}false"
                                name="./image1/file.sftmp"
                                sizeLimit="100000000"
                                title="Upload Image"
                                uploadUrl="will_be_replaced"/>
                            <preview
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="cq/gui/components/siteadmin/admin/pagepreview"/>
                        </image1>
                    </items>
                </column>
            </items>
        </backgroundimage>
        ...

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

15-10-2015

One of our Adobe Touch UI experts stated:

I have this extension for multiple images in a component dialog

http://experience-aem.blogspot.com/2015/06/aem-61-touch-ui-image-multifield.html

Hope this points you in the right direction. 

Answers (1)

Answers (1)

Avatar

Avatar
Validate 10
MVP
kunal23
MVP

Likes

166 likes

Total Posts

565 posts

Correct Reply

172 solutions
Top badges earned
Validate 10
Validate 1
Ignite 3
Ignite 1
Give Back 50
View profile

Avatar
Validate 10
MVP
kunal23
MVP

Likes

166 likes

Total Posts

565 posts

Correct Reply

172 solutions
Top badges earned
Validate 10
Validate 1
Ignite 3
Ignite 1
Give Back 50
View profile
kunal23
MVP

15-10-2015

Please see this thread - http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manage... . The solution provided is to install hotfix 6760. I am not sure whether it is still a bug in 6.1 or not.