Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

dynamic media - aem

sathya_prakasha
Level 5
Level 5

Hi Team,

 

I am able to get the responsive image on my custom component by using responsive . It working for img tag.

 

https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/image-serving-api/image-se...

 

But its not working for background-image:url div class. any suggestions?

<div class="hero__image" style="background-image:url('${dynamicmedia.fileReference @ context='styleString'}')"></div>

aem cloud
1 Accepted Solution
khamat_bn
Correct answer by
Level 4
Level 4

Hi @sathya_prakasha 

 

as you are referring Dynamic Media Image so please try 'uri' instead of 'styleString' in context. 

 

<div class="hero__image" style="background-image:url('${dynamicmedia.fileReference @ context='uri'}')"></div>

 

 

View solution in original post

3 Replies
khamat_bn
Correct answer by
Level 4
Level 4

Hi @sathya_prakasha 

 

as you are referring Dynamic Media Image so please try 'uri' instead of 'styleString' in context. 

 

<div class="hero__image" style="background-image:url('${dynamicmedia.fileReference @ context='uri'}')"></div>

 

 

View solution in original post

sathya_prakasha
Level 5
Level 5

How to handle responsive image library for background-image:url

 

<div class="hero_image" style="background-image:url('${dynamic.fileReference @ context='uri'}')"></div>

 

Its working as expected for <img> tag. 

 

khamat_bn
Level 4
Level 4
It will be handled by css, we need to provide css class in <div class=""> and that should adapt Resonsive image as needed