Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

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

Avatar

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.

1 Accepted Solution

Avatar

Correct answer by
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

17 Replies

Avatar

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/

Avatar

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.

Avatar

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.

Avatar

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

Avatar

Former Community Member

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.

Avatar

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.

Avatar

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.

Avatar

Level 5

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

Avatar

Level 5

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

Thanksimagerefrence.png

Avatar

Former Community Member

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

Regards,
Sandhya.

Avatar

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

Avatar

Correct answer by
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>

                               

Avatar

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

1253248_pastedImage_4.png

Avatar

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.

Avatar

Former Community Member

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

Regards,
Sandhya.

Avatar

Former Community Member

Thank you zeeshank.

I will try the same and update you.