Building a dialogue to have 2 or more images in AEM6.2 to be displayed in sightly component

Hi Sandhya,

To create a custom image component in sightly, please overlay the OOTB image component and add your customization on top of it.

For further reference on creating the dialog box, please have a look at the following discussion thread on a similar query:

https://forums.adobe.com/thread/2332095

Thank you,

Techaspect Solutions.

http://www.techaspect.com/

Thank you for your reply.

Can you please let us know how to display in sightly ,whatever the showing in link is JSP tags not in sightly.

AEM6.1 code

<img src='<%=currentNode.getProperty("paintingRef").getString()%>' width=300 height=300>

Please help me to get this in sightly.

Regards,

Sandhya.

See this artilce that gets images from the dialog and then displays in a HTL component (the name is not Sightly - but HTL).

Scott's Digital Community: Creating an AEM HTML Template Language movie component

This will point you in the correct direction.

Hi

you can are using the property in your dialog

<img src="properties.bgImageRef"  width=300 height=300 >

in this way you can get the value of image in sightly.

Thanks

Hi Zeeshank,

I have tried with code you have provided

<img src="properties.bgImageRef"  width=300 height=300 >

But image is not displaying and displaying like below

Can you please suggest to make it work .

Regards,

Sandhya.

Did you read the article that i pointed you to - it shows you how to render an image selected from a dialog in a HTL component.

Yes Scott,I have gone through the article which you have shared.

they are using

1.Video Id to display the poster(image),which is coming fro mdialog

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="${properties.fileReference}" data-setup="{}">

2. They are getting the Images from component not from dialog

<div  data-sly-use.v="com.moviecomponent.moviecomponent.core.service.MovieService">

<p data-sly-list="${v.files}">

<img src="${item}" height=250 width=400 style="padding:4px"></img>

</p>  

</div>

Can you please suggest.

Regards,
Sandhya.

did your fileReferenceParameter name in dialog properties is same as bgImageRef ?

Below is the attached image you can take a look of fileReferenceParameter name.

Thanks

Yes,I am referring the same.But still not able to see the image.

Regards,
Sandhya.