


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.
Solved! Go to 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
>
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.
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.
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.
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
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.
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.
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.
did your fileReferenceParameter name in dialog properties is same as bgImageRef ?
Below is the attached image you can take a look of fileReferenceParameter name.
Thanks
Yes,I am referring the same.But still not able to see the image.
Regards,
Sandhya.
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
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
>
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
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.
Thank you Scott,I will try this and let you.
Regards,
Sandhya.
Thank you zeeshank.
I will try the same and update you.
Thank you scott.
It is working.