Lazysizes + kirby

Hey @all,

i am trying to build lazysizes in my kirby template and without a low quality img it works like a charme. but i want to load low-quality images first. so following their documentation its quite easy.

<img
	alt="100%x200"
	src="low-quality.jpg"
	data-src="normal-quality.jpg"
	class="lazyload" />

So i thought about

     <img alt="<?= $image->alt() ?>"
          title="<?= $image->title() ?>" 
          src="<?= $image->url() ?>-low-quality"    //Problem
          data-src="<?= $image->url() ?>" 
          class="lazyload" />

Maybe u are guessing the problem. how can i add "-low-quality"only to the end of the image name and not at the end of the path? Or to i have to create two upload areas going to the same img tag?

Best
Marvin

You can fetch the image name with $image->filename().

But that doesn’t make the image a low quality image. Wouldn’t it make more sense to use a thumb here?

Of course i have to upload an low quality image as well.

my idea was that the High-quality and the low-quality img have the same name and i only have to append-low to the low low-quality name.

Never worked with thumbs before. But i will give it a try!
Thanks

Hi,

As @pixelijn says, what you want to do here is something like:

 <img alt="<?= $image->alt() ?>"
      title="<?= $image->title() ?>" 
      src="<?= $image->resize(400)->url() ?>"
      data-src="<?= $image->url() ?>" 
      class="lazyload" />

That would show a 400px wide image. I usually use resize(1) for a single pixel image that more or less contains the dominant color and is quick to produce and load.

Of course you can also use thumb() there

It is probably a good idea to also resize/thumb the finally loaded image, not only the preview.

And if you want to go all in, use srcset. Lazysizes has its own way to do srcset.

best