Background images in a grid

  • Hello Florian,

    A few months ago you had tried to help me to make Lazy loader work with a masonry plugin “The Grid”. Unfortunately, although height and width attributes are set for images, images keep being positionned too high relative to each other and so overlap on loading (although resizing the browser makes everything fall back nicely in place, but I cannot expect visitors to do that).

    So I will try to use Lazy loader with a fixed grid layout (each element has same height). Contrary to the masonry this fixed grid layout uses background images.

    It seems I just have to add the class “lazyload” to the right div and tick unveilhooks. In my case something like:

    <div class=”tg-item-image lazyload” style=”background-image: url(https://mysite.com/wordpress/wp-content/uploads/2017/04/image.jpg)”></div>

    I tried to test it manually for one image and it seems to work (lazyload is transformed into lazyloaded).

    Am I correct?

    As I am not a developer, if you have a good resource showing how to easily add classes to certain divs (with php?) I would be happy to know about it. If not I will try by myself.

    Thanks for your help!

    Nicolas

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter palomar83

    (@palomar83)

    I actually went directly into my Grid plugin folder and modified the markup directly into the grid template so that background images now have the “lazyload class”. And it seems to work pretty well!

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    Hi Nicolas,

    besides adding the lazyload class, you need to add the image URL as a data-bg attribute instead of inside the style attribute. You can see an example here: https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/unveilhooks

    As I am not a developer, if you have a good resource showing how to easily add classes to certain divs (with php?) I would be happy to know about it. If not I will try by myself.

    Hm, no, I don’t know something like that, sorry.

    I actually went directly into my Grid plugin folder and modified the markup directly into the grid template so that background images now have the “lazyload class”. And it seems to work pretty well!

    That is interesting ?? As described, that should not be enough (just adding the class). Another thing: you will loose the modifications with the next plugin update of the grid plugin, so you should not modify those files directly.

    Best,
    Florian

    Thread Starter palomar83

    (@palomar83)

    besides adding the lazyload class, you need to add the image URL as a data-bg attribute instead of inside the style attribute. You can see an example here: https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/unveilhooks

    Yes you are totally right. It was not working, I misread a chrome lighthouse test that made me think everything was ok. So I now use data-bg and I think this time it works (I see the big concentric circles while the image is being loaded and now the lighthouse lazyloading audit makes more sense).

    Another thing: you will loose the modifications with the next plugin update of the grid plugin, so you should not modify those files directly.

    Yes I agree, I will try to find a better option.

    Thanks.

    • This reply was modified 5 years, 2 months ago by palomar83.
    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    You’re welcome. I tried to include background image support a while back, but that is not easy. If I would only support the case where background images are set via background-image, it would not be very hard, but there are also the cases where the image is set via background with other properties, and there it would be difficult to change that. While writing this, I may have an idea how to solve those cases – I will give that a try and come back with the result ??

    Thread Starter palomar83

    (@palomar83)

    Thanks, in the meantime I will modify my markup and I should be just fine. Nicolas

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    Hi Nicolas,

    I released a beta version that includes a new option for background image lazy loading: https://github.com/florianbrinkmann/lazy-loading-responsive-images/releases/tag/v5.1.0-beta.2 (the lazy-loading-responsive-images.zip).

    Could you give it a try and check if it works as expected?

    Thanks,
    Florian

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Background images in a grid’ is closed to new replies.