How to render image via Sightly | Community
Skip to main content
A
ac6600
Level 2
August 25, 2022
Solved

How to render image via Sightly

  • August 25, 2022
  • 2 replies
  • 4256 views

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.


Please help me out. Thanks in advance.

@arunpatidar @briankasingli @debal_das @santoshsai @sachin_arora_ @lukasz-m @heenamadan 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by BrianKasingli

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#granite-ui-fileupload

 

2 replies

BrianKasingli
Community Advisor and Adobe Champion
BrianKasingliCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
August 25, 2022

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#granite-ui-fileupload

 

A
ac6600Author
Level 2
August 25, 2022

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

    HeenaMadan
    Community Advisor and Adobe Champion
    HeenaMadanCommunity Advisor and Adobe Champion
    Community Advisor and Adobe Champion
    August 26, 2022

    @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}"/>
      A
      ac6600Author
      Level 2
      August 27, 2022

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

        Terms & ConditionsAccessibility statement

        Loading footer...