Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list
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#...

 

5 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.