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

[Rick_Holdsworth]

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

[kautuk_sahni]

@Esteban666 @Sady_Rifat @partyush @Shivanandh @B_Sravan @ksh_ingole7 @Pawan-Gupta @SivakumarKanoori @Fanindra_Surat @Jagadeesh_Prakash @krati_garg @iamnjain @somen-sarkar @bajancherry @sunil_kumar_ @shelly-goel @Ganthimathi_R @davidjgonzalezzzz 

Requesting your expertise on this AEM question. Appreciate your support in advance.

[aanchal-sikka · Accepted solution]

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/wc...

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