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
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Displaying an image in Touch UI Dialog

sabarishchokkal
Level 2
Level 2

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

 

Image In Dialog Touchui dialog
1 Accepted Solution
Arun_Patidar
Correct answer by
Community Advisor
Community Advisor

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.

 

 

 

 

View solution in original post

6 Replies
Umesh_Thakur
Community Advisor
Community Advisor

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

 

 

Arun_Patidar
Correct answer by
Community Advisor
Community Advisor

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.

 

 

 

 

View solution in original post

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