Displaying an image in Touch UI Dialog | Community
Skip to main content
S
sabarishchokkal
Level 2
May 27, 2021
Solved

Displaying an image in Touch UI Dialog

  • May 27, 2021
  • 2 replies
  • 2868 views

Can anyone help me with a way in which I can display an image inside a Dialog as display either by :

1. Inserting a screenshot/image inside a fieldDescription against a field in Touch UI dialog

2. Inserting a screenshot/image in Touch UI dialog as similar to displaying using displayfield xtype and setting fieldDescription property value as <img src="path of the image from DAM">  in classic UI

 

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 arunpatidar

Hi,

I had this use case in my mind for touch UI and I have done a small PoC as well.

The idea is to :

1. add a property to the field node called, fieldDescriptionImage

2. Write a javascript to read this property from DAM and inject it in the description area inside img tag.

 

Note : I don't exactly remember if I use properties or granite:data to add fieldDescriptionImage value.

I will share the javascript code if I am able to find it.

 

 

 

 

2 replies

Umesh_Thakur
Community Advisor
Umesh_ThakurCommunity Advisor
Community Advisor
May 27, 2021

In touch UI dialog we have a resourceType "cq/gui/components/authoring/dialog/fileupload" if you use it for a dialog then at the time of browsing only you will have the preview of the asset.

See the below of the image core component for reference.

/apps/core/wcm/components/image/v2/image/cq:dialog/content/items/tabs/items/asset/items/columns/items/column/items/file.

 

Hope this will help.

Umesh Thakur

 

 

    arunpatidar
    Community Advisor
    arunpatidarCommunity AdvisorAccepted solution
    Community Advisor
    May 28, 2021

    Hi,

    I had this use case in my mind for touch UI and I have done a small PoC as well.

    The idea is to :

    1. add a property to the field node called, fieldDescriptionImage

    2. Write a javascript to read this property from DAM and inject it in the description area inside img tag.

     

    Note : I don't exactly remember if I use properties or granite:data to add fieldDescriptionImage value.

    I will share the javascript code if I am able to find it.

     

     

     

     

    Arun Patidar
      arunpatidar
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      May 31, 2021
      Hi, I got the files, I will put in a blog and share.
      Arun Patidar
      Terms & ConditionsAccessibility statement

      Loading footer...