Displaying an image in Touch UI Dialog

[sabarishchokkal]

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

[Umesh_Thakur]

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 · Accepted solution]

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.

[sabarishchokkal]

Appreciate if you can get them for us. Thanks

[arunpatidar]

Hi, I got the files, I will put in a blog and share.

[arunpatidar]

you can find solution at https://aemlab.blogspot.com/2021/05/aem-touch-ui-component-dialog-fielddescription-image.html

[sabarishchokkal]

Thank you so much. Will review them today asap.