get asset properties on htl page with asset path without using backend service in crx

Question

I have an asset path, which contains an asset, which I want to display in the UI. I can display the image using the path. But I want to display asset properties like title and other metadata which are present in jcr:content under that asset path. One way I'm aware of is to use backend service and adapt to the asset and fetch those properties and send it to html file. Is there any way I can directly fetch those details in html file itself without having to use backend service. note: asset number can be very high, would it better to use the service itself.

Answer 1

It's best to use the (backend service) Asset APIs but you could also hack your way with just HTL if you know exactly the JCR node and property. data-sly-use allows specifying a JCR path to return the org.apache.sling.api.resource.Resource:

<sly data-sly-use.myImg="/content/dam/core-components-examples/library/adobe-logo.svg/jcr:content/metadata">${myImg.valueMap['dc:title']}</sly>

Answer 2

Example for asset title.

${item.metadata['dc:title']}