Use featured image from page properties in HTL

[nikita24tailor]

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})?

[SantoshSai]

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

[nikita24tailor]

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

[SantoshSai]

@nikita24tailor 

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

[nikita24tailor]

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

[Anish-Sinha]

Hi @nikita24tailor ,

You can read the image fileReference like this - 

${properties['image/fileReference']}

[nikita24tailor]

This isn't working.

[Anish-Sinha]

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

[nikita24tailor]

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

[arunpatidar]

try with ${pageProperties.propertyName}

[nikita24tailor]

This is not working.

[arunpatidar]

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?

[nikita24tailor]

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:

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

[arunpatidar · Accepted solution]

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']}

[tatrived]

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?

[arunpatidar]

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