Dynamic image preset based on device type

Question

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=1686555013033&$Rotate$&dpr=off

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?

Shashi_Mulugu · Accepted Answer

@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/image.html?lang=en

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

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded