Wordpress + Webstudio - Images issue

Question

Hey guys !Hope you’re doing well,I’m having an issue with my Webstudio + Wordpress setup.When I add images in Wordpress in a blog post, it displays too large on Webstudio (which affects responsive as well and have a sort of padding on the left.From what I see, it’s because images from Wordpress are wrapped in a <figure> tag, that makes it behave incorrectly.Example here : https://www.lokka-immo.com/blog/post/taxe-dordures-menageres-pour-les-locataires-guide-complet-2024Everything is setup correctly in Webstudio (images style in my content embed are okay)Any idea what’s causing the issue ? And how I can fix it ? 😅

John Siciliano · Answer

On the img selector in content embed you can apply max-width 100% and height auto

Thomas COUDERQ · Answer

Hey John !Yep, tried that already but didn't work :/

Thomas COUDERQ · Answer

I still have the padding left and the image Overflow and does not keep its aspect ratio when the screen size decreases

Thomas COUDERQ · Answer

However, when I inspect the page and move the image out of the <figure> tag, the issue disappears

John Siciliano · Answer

You have to explicitly set auto

John Siciliano · Answer

I would also use max-width. If you upload a 200px wide image, width: 100% will cause it to take up like 800 pixels and pixelate it

Thomas COUDERQ · Answer

Haaa yes ! That corrected the image overflowing, cool thanks !

Thomas COUDERQ · Answer

However, I still have this curious padding on the left, and I'm not sure where it comes from

John Siciliano · Answer

Figure has default margin. For right now you'll need to add css that zeros it out

Thomas COUDERQ · Answer

Hmmm yep okay, I see what you mean

John Siciliano · Answer

Once we develop this feature, you can create custom selectors in content embed https://github.com/webstudio-is/webstudio/issues/3265

Thomas COUDERQ · Answer

Haaaa cool !

Thomas COUDERQ · Answer

Looking forward to this 😄

Thomas COUDERQ · Answer

Gonna add a bit of css in the meantime

Thomas COUDERQ · Answer

Thanks a lot John ! 🙂

John Siciliano · Answer

egfigure.wp-block-image { margin: 0;}

John Siciliano · Answer

same 😅

Jacob · Answer

@Thomas COUDERQ https://wordpress.org/plugins/webp-uploads/

Jacob · Answer

Try this and activate the picture tag in settings to avoid figure - the plugin is converting your images wo modern formats upon upload and lets ou use the picture tag with srcset and other stuff related to the picture tag. But it may conflict if you have bought some superexpensive image performance stuff. This one is free and by the wordpress performance team 🙂

Jacob · Answer

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

Thomas COUDERQ · Answer

Haaaa very interesting !Definitely going to check this out ! Thanks for the recommendation Jacob 😁

Bonanza · Answer

Hey I'm just following up here. Are there steps specificially regarding the handling of these images without doing anything special within wordpress itself? I'm encountering the same issue with my articles.

Bonanza · Answer

I figured out a solution that works specifically for me.

Join the Webstudio community

Wordpress + Webstudio - Images issue