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>
Solved! Go to Solution.
Views
Replies
Total Likes
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
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
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"/>
Views
Replies
Total Likes
Views
Likes
Replies