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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Two images on single Teaser component

Avatar

Level 1

Hello, I've been trying to upload two images to a Teaser component, my approach was to extend the Teaser and override the cq_dialog to add a new tab with 2 text properties and 1 image.

IconTitle

IconSubtitle

iconfile

public interface TeaserModel extends com.adobe.cq.wcm.core.components.models.Teaser
...

public class TeaserModelImpl extends AbstractComponentImpl implements TeaserModel ...
...   
 @Self 
    @Via(type = ResourceSuperType.class)
    private Teaser teaser;

    @inject
    @Via("resource")
    protected String icontitle;

    @inject
    @Via("resource")
    protected String iconsubtitle;

    @inject
    @Via("resource")
    protected String fileIconReference;

I have an existing image inherited from Teaser (which uses the "file" node) so I have to use a different name or in this case I tried using a different node to achieve this with: iconfile/file trying to leverage internal functionality but I had no luck.

 

The files gets uploaded correctly and the dialog even tries to get the image. 

 

The path that it's trying to reach its: 

/content/<project>/<folder>/home/teaser/_jcr_content/root/container/container/container/teaser_copy/iconfile.img.png?ch_ck=1674603887000

 

In contrast if I upload using the out of the box image component, I get this url which works perfectly:

/content/<project>/<folder>y/home/teaser/_jcr_content/root/container/container/container/teaser_copy.img.png?ch_ck=1674604092000

 

Is there a way to have two images on the same component?

 

 

teaser1.png

 

 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Teaser"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[core.wcm.components.teaser.v2.editor,core.wcm.components.image.v3.editor]"
    helpPath="https://www.adobe.com/go/aem_cmp_teaser_v2"
    trackingFeature="core-components:teaser:v2">
    <content
        granite:class="cmp-teaser__editor cmp-image__editor"
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs">
                <items jcr:primaryType="nt:unstructured">
                    <actions
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Links"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                    </actions>
                    <text
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Text"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                    </text>
                    <image
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/include"
                        path="core/wcm/components/image/v3/image/cq:dialog/content/items/tabs/items/asset"/>
                    <styletab
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/include"
                        path="/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_edit/styletab"/>
                    <icon
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Icon"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <icontitle
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                fieldDescription="Icon Title"
                                                fieldLabel="Icon Title"
                                                name="./icontitle"/>
                                             <iconsubtitle
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="cq/gui/components/authoring/dialog/richtext"
                                                fieldDescription="Icon Description"
                                                fieldLabel="Icon Subtitle"
                                                useFixedInlineToolbar="{Boolean}true"
                                                name="./iconsubtitle"/>
                                              <file
                                                jcr:primaryType="nt:unstructured"
                                                class="cq-dropTarget"
                                                sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
                                                fileNameParameter="./iconfile/fileName"
                                                fileReferenceParameter="./iconfile/fileReference"
                                                mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml]"
                                                name="./iconfile/file"
                                                uploadUrl="${suffix.path}"
                                                useHTML5="{Boolean}true"/>

                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </icon>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

 

1 Accepted Solution

Avatar

Correct answer by
Level 6

 

Hi @luisgerardol , 

here is the issue, please use same name to refer iconImage & use the same name in Model Class. as shown below.

 

 

 fileNameParameter="./iconImage"

 

 

 and, you are trying to refer to the same in model class as

 

 

@ValueMapValue 
    public String iconImage;

 

 

Please let me know if this works, 

Aditya Chabuku

View solution in original post

2 Replies

Avatar

Correct answer by
Level 6

 

Hi @luisgerardol , 

here is the issue, please use same name to refer iconImage & use the same name in Model Class. as shown below.

 

 

 fileNameParameter="./iconImage"

 

 

 and, you are trying to refer to the same in model class as

 

 

@ValueMapValue 
    public String iconImage;

 

 

Please let me know if this works, 

Aditya Chabuku

Avatar

Level 1

Thank you for your response,

 

What could be very helpful it's an example of any component with two images, I read an old post that it might me posible but since I'm using AEM 6.5 it's no longer applicable. (old article: Adobe AEM | Multiple image upload for image component (touch UI) - Stack Overflow)


The Image class, and more specifically the com.day.cq.commons.DownloadResource class from which the Image inherits, expects the name of the resource under which a file is uploaded to be "file" unless explicitly overridden. In compliance with this expectation, when a single component allows for multiple images, each image should be housed in a unique child resource and the files should be uploaded to a child resource of that resource named "file". That said, your configuration is rather close to what would be needed. I would suggest the following updates.


 

I tried this but I had no luck on the dialog, the assets get created but the dialog shows an invalid url like the one I described on the post

For reference:

 

/content/<project>/<folder>/home/teaser/_jcr_content/root/container/container/container/teaser_copy/iconfile.img.png?ch_ck=1674603887000

 

AEM it's trying to "guess" the url which seems to be: teaser_root/node_name.img.extension, but I guess there is some additional parameter that I'm missing to tell AEM that the "file" is inside another node not the root "teaser" node.

luisgerardol_0-1674693429910.png

 

 

                    <image
                        jcr:primaryType="nt:unstructured"
                        class="cq-dropTarget"
                        sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
                        fileNameParameter="./asset/fileName"
                        fileReferenceParameter="./asset/fileReference"
                        mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml]"
                        name="./asset/file"
                        uploadUrl="${suffix.path}"
                        useHTML5="{Boolean}true"/>
....
                                              <file
                                                jcr:primaryType="nt:unstructured"
                                                class="cq-dropTarget"
                                                sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
                                                fileNameParameter="./iconfile/fileName"
                                                fileReferenceParameter="./iconfile/fileReference"
                                                mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml]"
                                                name="./iconfile/file"
                                                uploadUrl="${suffix.path}"
                                                useHTML5="{Boolean}true"/>