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

Thank you scott.

It is working.

Thank you zeeshank.

I will try the same and update you.

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

Regards,
Sandhya.

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.

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

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

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

Regards,
Sandhya.

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

Thanks

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