Two images on single Teaser component

[luisgerardol]

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?

<?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>

[Aditya_Chabuku · Accepted solution]

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

[luisgerardol]

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.

                    <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"/>