Can’t get a responsive image

Hi @marc_o!

Can you provide some more information about your environment?

I’m trying to replicate your issue on a fresh website using the second template you mentioned. The images were responsive, and everything worked as expected

It would be helpful if we could have some more understanding about how you set up your site.

Hello,

Thank you for your answer. What do you need to know about my setup? I’m on the last version of WordPress with the last version of PHP (8.2) and of the Loops and Logic plugin.

I’m using the Divi theme and at first I though maybe it was the Theme Builder that was messing thing up but I’ve just tried to put the Tangible template direclty inside a normal post and same thing, the image is shown but sizes and srcset are empty so it’s not responsive.
I’ve tried to add the image with the tangible block (both directly or calling a template) and with a shortcode but whatever I call it the image is still not responsive.

Hi @marc_o!
can you try the code below? I’ve removed the width which makes the sizing fixed so the image should resize now, but there are still some styling or caching that you will have to do to make it seamless on your side.

btw ive only tried emulating the responsiveness on chrome dev tools.

<img src="{Field image}" sizes="{Field image_sizes}" srcset="{Field image_srcset}" alt="{Field image_alt}">

For the alt issue have you set it on the image? there should be an Alt Text field when selecting a featured image. If there are none, let me know so I can try to help you.

Let me know if these solutions work for you ?? Thank you!

• This reply was modified 1 year, 1 month ago by ghenarvesu00.

Hello,

Thank you for your answer. I’ve tried the code you gave me but it’s still not working for me. You put src=”{Field image}” in your code, I think you meant src=”{Field image_url} because the first one is not working.

You were right about the alt text, it was empty on my image so I added it and now I have it in the code but is still have the sizes ans srcset attributes totally empty so the image don’t load different images depending of the screen sizes as explain in the article.

Regards

Hey @marc_o!

Sorry for the delayed response.

Hooray, we fixed one of your issues!

Can you send me the exact code block you’re using? I might just need your specific use case to help you out further.

Hello,

I have tried this code :

<img src="{Field image_url}" sizes="{Field image_sizes}" srcset="{Field image_srcset}" alt="{Field image_alt}" width="50">

and this one too :

<img src="{Field image_url}" sizes="{Field image_sizes}" srcset="{Field image_srcset}" alt="{Field image_alt}">

I see the image but for both codes I get an image with the sizes or srcset fields empty.

Regards

Hi @marc_o, sorry for all the delayed responses on this thread, it seems some other members of our team had a tough time figuring out how to replicate your issue.

I’ve just tested this out myself by installing L&L and the Divi theme on a barebones WordPress site and I was able to replicate the issue you’re describing. The thing with themes though is that they affect the way the whole site is displayed, not just pages where you’re using the Divi builder or a Divi template. To confirm that Divi was the root of the issue here, I deactivated my Divi theme and switched back to the default Twenty Twenty-Three theme, and then srcset in my L&L template worked as expected.

I’m not a developer so I might be wrong about this, but my hypothesis here is that Divi is doing something nonstandard with these responsive image attributes. Based on this blog post from 2019, it sounds like Divi explicitly added support for srcset on images added through their builder instead of just piggybacking on the default WordPress functionality that seems to exist in standard themes.

Even though I’m pretty sure this is a Divi issue, I’ve still passed this information along to one of our devs in case we can identify what’s unique about the way Divi handles responsive image attributes. L&L can’t support all the unique ways that other themes and plugins differ from the “WordPress way” but maybe there’s something we can do to help, or at least give you some info so that you can pass that along to Divi support.

Again, I’m not a dev, so this is all my hypothesis, but I’ll keep you informed when our dev team has a chance to look into this to see if I can shed a bit more light on the situation.

Thanks for your patience and helpful responses!

Hello,

Thank you for your answer.

I guess you’re right, Divi must be the cause of that behavior.

Let me know if you find something.

Regards