[Support request] Feature Request: Set width to the parent div of images

Home Forums Support Feature Request: Set width to the parent div of images

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1325365
    Longinos

    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

    #1325699
    Tom
    Lead Developer
    Lead Developer

    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! 🙂

    #1326038
    Longinos

    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.