Image thumbnail not showing on configure window

[Vani1012]

Hi All,

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

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

Can anyone help me

[MayurSatav]

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.

[Vani1012]

@MayurSatav I attached the image with resourcetype.

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.

[MayurSatav]

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. 

[Vani1012]

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

[MayurSatav]

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

[Vani1012]

@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

[MayurSatav]

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

[Vani1012]

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

[Vani1012]

@MayurSatav can you please reply to the above query

[arunpatidar · Accepted solution]

You need to add fileNameParameter property as well to image field

Example:

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