Building a dialogue to have 2 or more images in AEM6.2 to be displayed in sightly component | Community
Skip to main content
Jul 19, 2017 12:12 PM UTC
Solved

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

Hi team,

Please help me to build a dialog with image,that should be displayed in a sighlty component using AEM6.2

Thank in advace.

Regardsd,

Sandhya.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
smacdonald2008
smacdonald2008Accepted solution
Level 10
Jul 19, 2017 3:49 PM UTC

Here is another artilce that shows you how to select an image from a Path Finder and render the image in the HTL component -- Scott's Digital Community: Creating an Adobe Experience Manager HTL component that displays a repeating data set

Each repeating data set has an image.

<div style="height:250px;"><img src=${items.path} height=200 width=270 style="padding:4px"/><h2>${items.page}</h2>

                             <p>${items.desc}</p>

                               

17 replies

Jul 19, 2017 3:20 PM UTC

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.

Translate
smacdonald2008
Level 10
Jul 19, 2017 3:13 PM UTC

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.

Translate
Jul 19, 2017 3:11 PM UTC

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.

Translate
zeeshanKhan0786
Level 5
Jul 19, 2017 2:07 PM UTC

Hi

you can are using the property in your dialog

fileReferenceParameter

String

./bgImageRef

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

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

Thanks

Translate
smacdonald2008
Level 10
Jul 19, 2017 1:38 PM UTC

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.

Translate
Jul 19, 2017 1:22 PM UTC

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.

Translate
Techaspect_Solu
Level 7
Jul 19, 2017 12:38 PM UTC

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/

Translate