Expand my Community achievements bar.

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

Dynamic image preset based on device type

Avatar

Level 1

Hello,

 

I'm migrating our Cloud instance to use Dynamic Media. Previously we had a custom image component that was using different image transformers based on device type (resolution). I would like to know how to achieve a similar solution in Dynamic Media to use a different image preset for same image based on device? I think I could simply create 1:1 image presets according to transformers I had and change the logic on backend for existing component to return URLs to images from scene7 directly instead of AEM DAM.

 

My only concern then is URL composition. For example:

http://s7g10.scene7.com/is/image/company/41026708-example-white-stamp-text-on-red-backgroud-1?ts=168...

is not the absolute path to the asset. Is it possible to call scene7 to get image based on full path (like from DAM)?

 

Having above in mind, how to work with assets that were in different DAM locations and had the same name?

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@MB_IDW  AEM OOTB Image Core components V3 version supports DM by default and provide responsive images with DM enabled.

 

Please check the below link for reference. It automatically constructs the scene7 image url and scales image based on the device/browser sizes.

 

https://experienceleague.adobe.com/docs/experience-manager-core-components/using/wcm-components/imag...

 

if you have to completely build custom logic in your custom component, then yes scene7 url has to be constructed programmatically. and append presets towards end of the scene7 url and use some picture tag kind of to show appropriate preset based on breakpoints

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

@MB_IDW  AEM OOTB Image Core components V3 version supports DM by default and provide responsive images with DM enabled.

 

Please check the below link for reference. It automatically constructs the scene7 image url and scales image based on the device/browser sizes.

 

https://experienceleague.adobe.com/docs/experience-manager-core-components/using/wcm-components/imag...

 

if you have to completely build custom logic in your custom component, then yes scene7 url has to be constructed programmatically. and append presets towards end of the scene7 url and use some picture tag kind of to show appropriate preset based on breakpoints