Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

How to render image via Sightly

Avatar

Level 2

I have created a dialog box wherein I've this image field with ability for drag and drop. Now can someone help me what exactly to write in HTL to render it in page. As of now, I can see the preview in dialog but I am unable to render it on page. Following are the snaps of the dialog. Incase if its needed the name of the node is emailIcon.

ac6600_0-1661455267585.pngac6600_1-1661455287179.png


Please help me out. Thanks in advance.

@arunpatidar @BrianKasingli @DEBAL_DAS @SantoshSai @Sachin_Arora_ @lukasz-m @HeenaMadan 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Possibly you may have your Touch UI XML configuration wrong, try this (I have tested this, and it works!)

Touch UI Configuration

<file
    jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
    class="cq-droptarget"
    fileNameParameter="./fileName"
    fileReferenceParameter="./fileReference"
    mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml]"
    name="./file"/>


Sightly Code

 <img src="${properties.fileReference}"/>

 

Check out the Granite UI 1.0, Touch UI XML, more examples here, https://sourcedcode.com/blog/aem/aem-granite-ui-1-0-form-components-xml-cheat-sheet-reference-guide#...

 

View solution in original post

6 Replies

Avatar

Correct answer by
Community Advisor

Possibly you may have your Touch UI XML configuration wrong, try this (I have tested this, and it works!)

Touch UI Configuration

<file
    jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
    class="cq-droptarget"
    fileNameParameter="./fileName"
    fileReferenceParameter="./fileReference"
    mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml]"
    name="./file"/>


Sightly Code

 <img src="${properties.fileReference}"/>

 

Check out the Granite UI 1.0, Touch UI XML, more examples here, https://sourcedcode.com/blog/aem/aem-granite-ui-1-0-form-components-xml-cheat-sheet-reference-guide#...

 

Avatar

Level 2

Hi @BrianKasingli thanks a lot for your help. The fileReferenceParameter was missing in the config. Once again thank you!

Avatar

Community Advisor

@ac6600 Add below code in _cq_dialog_/content.xml

<imagePath allowUpload="{Boolean}false"
                                      autoStart="{Boolean}false"
                                      class="cq-droptarget"
                                      cq-msm-lockable="./file"
                                      fieldDescription="Choose Image "
                                      fieldLabel="Logo Image"
                                      fileReferenceParameter="./fileReference"
                                      jcr:primaryType="nt:unstructured"
                                      mimeTypes="[image/gif,image/jpeg,image/png,image/webp,image/tiff,image/svg+xml]"
                                      multiple="{Boolean}false"
                                      name="./imagePath/file"
                                      sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
                                      title="Drag to select image"
                                      required="{Boolean}true"
                                      uploadUrl="${suffix.path}"
                                      useHTML5="{Boolean}true"/>

In sling model add below line of code

 @Getter
    @ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL, name = "fileReference")
    private String imageSrc;

and in component HTML  file

<sly data-sly-use.myModel="com.project..models.MyModel">
${myModel.imageSrc} //prints image path
<img src="${myModel.imageSrc}"/> //render image </sly>

If you want to access image directly in sightly then use

<img src="${properties.fileReference}"/>

Avatar

Level 2

@HeenaMadan Thank you for such a detailed explanation. It's of great help to beginners like us 

Avatar

Level 2

Thanks @HeenaMadan 

I want to use model to get image. It worked. 

Avatar

Level 3

hii @HeenaMadan   ive used same code as youve mentioned but im not getting in the page im getting this error . there are no particular logs for this error since im attatching screenshots could you please tell me what is the error or mistake ive made.Screenshot 2023-06-27 152001.pngScreenshot 2023-06-27 151945.pngScreenshot 2023-06-27 151915.pngScreenshot 2023-06-27 151634.png