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

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

  • July 19, 2017
  • 17 replies
  • 4819 views

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.
Best answer by smacdonald2008

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

zeeshanKhan0786
Level 5
July 19, 2017

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
smacdonald2008Accepted solution
Level 10
July 19, 2017

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>

                               

July 19, 2017

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
Level 5
July 19, 2017

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.

July 20, 2017

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

Regards,
Sandhya.

July 20, 2017

Thank you zeeshank.

I will try the same and update you.

July 20, 2017

Thank you scott.

It is working.