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

[Former Community Member]

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.

[Techaspect_Solu]

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/

[Former Community Member]

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]

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]

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

[Former Community Member]

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.

[smacdonald2008]

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.

[Former Community Member]

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]

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

[zeeshanKhan0786]

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

Thanks

[Former Community Member]

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

Regards,
Sandhya.

[zeeshanKhan0786]

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

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>

[Former Community Member]

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

[zeeshanKhan0786]

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.

[Former Community Member]

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

Regards,
Sandhya.

[Former Community Member]

Thank you zeeshank.

I will try the same and update you.

[Former Community Member]

Thank you scott.

It is working.