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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

sandhyap2357299
Level 3
Level 3

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.

1 Accepted Solution
smacdonald2008
Correct answer by
Level 10
Level 10

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 repeat...

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>

                               

View solution in original post

0 Replies
Techaspect_Solu
Level 7
Level 7

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/

sandhyap2357299
Level 3
Level 3

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.

smacdonald2008
Level 10
Level 10

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.

zeeshanKhan0786
Level 5
Level 5

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

sandhyap2357299
Level 3
Level 3

Hi Zeeshank,

I have tried with code you have provided

<img src="properties.bgImageRefwidth=300 height=300 >

But image is not displaying and displaying like below

1253247_pastedImage_0.png

Can you please suggest to make it work .

Regards,

Sandhya.

smacdonald2008
Level 10
Level 10

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.

sandhyap2357299
Level 3
Level 3

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.

zeeshanKhan0786
Level 5
Level 5

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

zeeshanKhan0786
Level 5
Level 5

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

Thanksimagerefrence.png

sandhyap2357299
Level 3
Level 3

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

Regards,
Sandhya.

zeeshanKhan0786
Level 5
Level 5

Could you please send a screenshot ?

I am getting image correctly with this ${properties.bgImageRef }.

you can check by adding @context='uri' like this ${properties.bgImageRef  @ context='uri'}

Thanks

smacdonald2008
Correct answer by
Level 10
Level 10

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 repeat...

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>

                               

View solution in original post

sandhyap2357299
Level 3
Level 3

1.html

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" />

<sly data-sly-call="${clientlib.css @ categories='tabsSection'}" />

<sly data-sly-call="${clientlib.js @ categories='tabsSection'}" />

<div class="footer-section" data-sly-use.tabSection="myOffer-tabs-section.js" class="${tabsSection.cssClass}" data-emptytext="MyOffers- Tabs Section Component">

<ul data-sly-list.href="${tabSection.linksArray}">

    <li>

    <a href="">${href.sectionTitle}</a>

<img src="${href.fileReference}" height="300" width="300">

        </li>

    </ul>

</div>

2.js

"use strict";

use(["/libs/wcm/foundation/components/utils/AuthoringUtils.js"], function (AuthoringUtils) {

    var tabsSection = {};

var CONST = {

PROP_TITLE: "jcr:title",

PROP_DESCRIPTION: "jcr:description"

    }

    tabsSection.title = properties.get(CONST.PROP_TITLE, "");

tabsSection.description = properties.get(CONST.PROP_DESCRIPTION, "");

    var propertiesArray = granite.resource.properties["linksArray"];

    tabsSection.linksArray = [];

    if (propertiesArray){

        for(var i = 0; i < propertiesArray.length; i++) {

            var obj = propertiesArray[i];

            var object = JSON.parse(obj);

            tabsSection.linksArray.push(object);

        }

    }

    if(tabsSection.title == "" && tabsSection.description == ""){

if(AuthoringUtils.isTouch){

tabsSection.cssClass = "cq-placeholder";

} else {

tabsSection.cssClass = "cq-text-placeholder-ipe";

}

}

    return tabsSection;

});

3.screenshot

1253248_pastedImage_4.png

zeeshanKhan0786
Level 5
Level 5

Are you using Image in multifield? If yes this is the issue with multiple filereference. than use pathbrowse to get the image as scott share the article.

once check the json data stored into the linksArray of your component node for which key name the url is saving.

sandhyap2357299
Level 3
Level 3

Thank you Scott,I will try this and let you.

Regards,
Sandhya.

sandhyap2357299
Level 3
Level 3

Thank you zeeshank.

I will try the same and update you.