New Use case? Adaptive image component defined in the Template but image reference is authored in a content fragment | Community
Skip to main content
Rick_Holdsworth
Level 2
February 20, 2023
Solved

New Use case? Adaptive image component defined in the Template but image reference is authored in a content fragment

  • February 20, 2023
  • 2 replies
  • 732 views

We are building an Article page using HTL components. The content for these pages are being authored in a Content Fragment.

 

We have a ‘Hero’ component that has a mixture of text and an image.

 

We want the image to be adaptive using the ‘srcset’ attribute and so after reading the docs for the core Image component we overlayed it.

Sure enough we now have the ability to define the rendition sizes for device widths using Template policies. Good stuff.

 

Now, unless I’m reading it wrong the logic inside both core Image model v3 and AdaptiveImageServlet specify that if the component is part of a Template's structure (which it is) then it expects to use property “fileReference” from that component in order to reference the image asset.

 

However, we are building that page using components that are reading from a Content Fragment including which image to display.

 

Can anyone think of a solution?

 

Much appreciated.

 

Rick

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by aanchal-sikka

Hello @rick_holdsworth 

 

The responsiveness can be achieved by delegating image rendering to the Image Component.

 

This is following in multiple WCM core components like Teaser. You can refer to following link for using Teaser as a reference.

https://github.com/adobe/aem-core-wcm-components/tree/main/content/src/content/jcr_root/apps/core/wcm/components/teaser/v2/teaser

A similar implementation with explanation is also available on https://kiransg.com/tag/responsive-image/

2 replies

kautuk_sahni
Community Manager
Community Manager
June 7, 2023
aanchal-sikka
Community Advisor
aanchal-sikkaCommunity AdvisorAccepted solution
Community Advisor
September 5, 2023

Hello @rick_holdsworth 

 

The responsiveness can be achieved by delegating image rendering to the Image Component.

 

This is following in multiple WCM core components like Teaser. You can refer to following link for using Teaser as a reference.

https://github.com/adobe/aem-core-wcm-components/tree/main/content/src/content/jcr_root/apps/core/wcm/components/teaser/v2/teaser

A similar implementation with explanation is also available on https://kiransg.com/tag/responsive-image/

Aanchal Sikka