Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Image thumbnail not showing on configure window

Avatar

Level 8

Hi All,

I have a reference image component, wherein I added image but the image thumbnail isnt showing on configure window

Vani1012_0-1683088997011.png

Vani1012_1-1683089680701.png

 

I tried reuploading as well but the configured image isnt showing on edit dialog field

Can anyone help me

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

You need to add fileNameParameter property as well to image field

 

Example:

https://github.com/adobe/aem-core-wcm-components/blob/2c928986684db1cc970e2e6a6b886698c10ba0d4/conte... 



Arun Patidar

View solution in original post

10 Replies

Avatar

Community Advisor

hi @Vani1012 ,

 

I am not able to see resource-type in the shared screenshot, could you please share which resource-type you are using ? Or try out below properties. it is working for me.

MayurSatav_0-1683090783110.png

 

Avatar

Level 8

@MayurSatav I attached the image with resourcetype.

Vani1012_0-1683092885054.png

 


Can you tell me why you added ./image in front of cq-msm-locakable, filereference parameter, and name properties
And also I have granite:class property is this causing any issue.

Avatar

Community Advisor

cq-msm-locakable is a key functionality integrated into AEM MSM is the capacity to ascertain which specific attributes of a page are inherited (or "rolled out", using AEM terminology) from the master site to its respective child sites. No your granite property will not cause any issue. 

 

Avatar

Level 8

@MayurSatav Can you tell me why you added ./image in front of cq-msm-locakable, filereference parameter, and name properties

Avatar

Community Advisor

to specify the relative path of the image asset within the component's content hierarchy.

Avatar

Level 8

@MayurSatav I also referred image component wherein its doesnt have ./image infront for the above mentioned properties.

Can you tell why its not working without ./image in our case that is on reference image component

Avatar

Community Advisor

@Vani1012  please share dialog XML, let me reproduce the issue on my local

Avatar

Level 8
<?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="Reference Image"
sling:resourceType="cq/gui/components/authoring/dialog"
helpPath="en/cq/current/wcm/default_components.html#Image">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/tabs">
<items jcr:primaryType="nt:unstructured">
<image
jcr:primaryType="nt:unstructured"
jcr:title="Basic"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<reference-image
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
allowUpload="{Boolean}false"
autoStart="{Boolean}false"
class="cq-droptarget"
granite:class="cq-droptarget"
cq-msm-lockable="file"
fieldLabel="Image"
fileReferenceParameter="../fileReference"
fieldDescription="Megamenu thumbnail from reference component is used. If empty, the reference image is used"
mimeTypes="[image]"
multiple="{Boolean}false"
name="./file"
title="Drop image from assets"
granite:title="Drop image from assets"
useHTML5="{Boolean}true">
<granite:data
cq-msm-lockable="file"
jcr:primaryType="nt:unstructured"/>
</reference-image>
<megamenu-thumbnail
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
allowUpload="{Boolean}false"
autoStart="{Boolean}false"
class="cq-droptarget"
granite:class="cq-droptarget"
cq-msm-lockable="file"
fieldLabel="Megamenu thumbnail"
fileReferenceParameter="../megamenuFileReference"
mimeTypes="[image]"
multiple="{Boolean}false"
name="./file"
title="Drop image from assets"
granite:title="Drop image from assets"
useHTML5="{Boolean}true">
<granite:data
cq-msm-lockable="file"
jcr:primaryType="nt:unstructured"/>
</megamenu-thumbnail>
</items>
</column>
</items>
</image>
<social-media
jcr:primaryType="nt:unstructured"
jcr:title="Social Media"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<social-media-image
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
allowUpload="{Boolean}false"
autoStart="{Boolean}false"
class="cq-droptarget"
granite:class="cq-droptarget"
cq-msm-lockable="file"
fieldLabel="Social media image"
fileReferenceParameter="../socialMediaFileReference"
fieldDescription="Image used for sharing on social media"
mimeTypes="[image]"
multiple="{Boolean}false"
name="./file"
title="Drop image from assets"
granite:title="Drop image from assets"
useHTML5="{Boolean}true">
<granite:data
cq-msm-lockable="file"
jcr:primaryType="nt:unstructured"/>
</social-media-image>
</items>
</column>
</items>
</social-media>
</items>
</content>
</jcr:root>

 

refrenec-image.html

<sly data-sly-test.author="${wcmmode.edit || wcmmode.design}">
<sly data-sly-test.hasReferenceImage="${currentPage.properties.fileReference}">
<sly data-sly-use.image="${'com.atlascopco.aem.ac_commons.core.components.image.ImageByDamPath' @ path=currentPage.properties.fileReference}">
<img class="c-reference-image" src="${image.rendition600Path}" />
</sly>
</sly>

<sly data-sly-test="${!hasReferenceImage}">
Click here to edit ReferenceImage component
</sly>
</sly>

 

Avatar

Correct answer by
Community Advisor

You need to add fileNameParameter property as well to image field

 

Example:

https://github.com/adobe/aem-core-wcm-components/blob/2c928986684db1cc970e2e6a6b886698c10ba0d4/conte... 



Arun Patidar