Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Use featured image from page properties in HTL

Avatar

Level 5

I want to render the current page featured image on the same page. And for that I am using HTL. Is there a way I can just call currentPage or properties object in HTL to get that image as we do for jcr:title( ${properties.jcr:title})?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi,

The names of the property is at https://github.com/adobe/aem-core-wcm-components/blob/72ee9a869c51deb4e5d2a5c1ec5b60c5579b2f68/conte...

 

You must try

${pageProperties['cq:featuredimage/fileReference']}

 

 



Arun Patidar

View solution in original post

15 Replies

Avatar

Community Advisor

Hi @nikita24tailor 

It depends on your customization (Static/Editable templates). If you're not customizing anything then it would store here- /content/yourpagepath/jcr:content/image. If you look at the property of fileReference then you'll see the image reference path. You'll have to use Server Side script (JavaScript API) or use Java to read this and inject back to HTL/HTML.

Regards,
Santosh

Avatar

Level 5

I'm not using any custom property for image. I'm using the one which is already available in page properties in Image tab.

Avatar

Community Advisor

@nikita24tailor 

Do you mean this Thumbnail Image? It looks like that Image tab is customized one - If yes refer to my above answer please.

Screen Shot 2022-05-17 at 10.10.29 PM.png

Avatar

Level 5

No, not this thumbnail, there is other image tab in aem as a cloud service. And that is not the customized one.

Avatar

Employee Advisor

Hi @nikita24tailor ,

You can read the image fileReference like this - 

${properties['image/fileReference']}

Avatar

Employee Advisor

Can you share a screenshot of which image property you are checking and in which tab for page properties.

Avatar

Level 5

Screenshot from 2022-05-18 11-18-10.png

 

The featured image which this screenshot is showing, I want to get that in my HTL.

Avatar

Community Advisor

try with ${pageProperties.propertyName}



Arun Patidar

Avatar

Community Advisor

Can you share,

1. what is the property name ?

2. where are want to access this property? in a component or in a page component?



Arun Patidar

Avatar

Level 5

1. There is no property name. I just want to use the featured image of the core page component. It is found in the dialog box. here is the screenshot:Screenshot from 2022-05-18 17-48-52.png

 

2. I want to access this in HTL of a component.

Avatar

Correct answer by
Community Advisor

Hi,

The names of the property is at https://github.com/adobe/aem-core-wcm-components/blob/72ee9a869c51deb4e5d2a5c1ec5b60c5579b2f68/conte...

 

You must try

${pageProperties['cq:featuredimage/fileReference']}

 

 



Arun Patidar

Avatar

Level 4

Hi What is the correct answer?
If i want to a have from child page

    String imagePath = childResource.getValueMap().get("./cq:featuredimage/fileReference", String.class);
will this work?

Avatar

Community Advisor

Yes, It will work if you have the resource object in the sling model.

 

Please check properties and resource global object https://experienceleague.adobe.com/docs/experience-manager-htl/content/global-objects.html?lang=en to use directly in HTL



Arun Patidar