Archived topic
Feature Request: Set width to the parent div of images
2 replies · Started by Longinos on June 12, 2020
Now Google Insigth has a new metric called Cumulative Layout Shift (CLS) that relies in changes in the layout of the rendered page when a element changes in the viewport.
Whit lazyloaded images this occurs, and the solution is to put sizes in the parent div container of the image, so the space is “reserved” to the real image when is loaded.
But the parent div cointainer may not know what the image size is, so we need a catch-all size. This may be acomplised with a width: fit-content css property.
For example, you can view it in the url have posted. In the <div class="featured-image page-header-image-single "> I have added the css property with a function in the functions.php of the child theme
Hi there,
I'll do some research on this, but it feels like it's something lazy loading plugins should be handling. Adding anything to the theme that may or may not be useful to everyone is typically not a great idea.
I'll do some reading - thanks for the heads up! :)
Hi Tom
Thanks for your time.
Take in account that native lazyload is now a feature in the most used browser. See the support for "loading" property here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Browser_compatibility. So no plugin is needed for lazyload images.
And in a near future maybe the native lazyloading don´t need any image property to be done.
And using a parent container with size for images I think can´t hurt anyone.
