Background images with lazy loaded srcset

1

Hi all - I’m trying to find a way to show responsive images (using srcset) but lazyloaded. Even though it does use lazysizes, the srcset plugin unfortunately doesn’t seem to natively offer lazysizes’ bgset extension (which allows me to use ‘data-bgset’). Does anyone know a way around this, perhaps another plugin altogether, or a new function I’m unaware of or maybe a way of using the bgset extension in combination with the existing plugin?

I of course could not use background images and use only images, but for a variety of reasons I really need to rely on background images in this scenario.

Many thanks!

2

feel free to ping me with @bnomei.

i created a new issue

1 Like
3

are you using the kirby tag or just plain php?

for php you could echo str_replace('data-srcset', 'data-bgset', $htmlWithScrsetImage) and be done. probably.

4

Thanks for the hand - I tried that without luck but am surely doing something wrong. For now I’ve decided to drop the background image support, but while I have you, am presented with this problem: ‘Call to a member function lazysrcset() on string’ when using this code:

<?php if($featuredImage = $item->featuredImage()->toFile()): ?>
        <img src="<?= $featuredImage->url()->lazysrcset(); ?>">
      <?php endif ?>

Can I not use a string like this with the plugin? Thanks

5

my plugin filemethod lazysrcset() does create the full image element (even some style element). you should not use it on the url() i know this is a bit confusing but since my plugin was created before kirby had any sort of srcset support the naming is a bit misleading. maybe i should rename my file method to “imageElementWithLazySrcset” . :wink:

<?php if($featuredImage = $item->featuredImage()->toFile()): ?>
        <?= $featuredImage->lazysrcset(); ?>">
<?php endif ?>

if you just want to get srcset definition use kirby’s filemethod

<?php if($featuredImage = $item->featuredImage()->toFile()): ?>
       <img
       src="<?= $featuredImage->url() ?>"
       srcset="<?= $featuredImage->srcset([300, 800, 1024]) ?>" />
<?php endif ?>
6

Ah gotcha - thanks so much you’ve put your finger on what was confusing me. That makes a lot more sense now.