How can I access low res Images from the media folder?

I saw that kirby is creating low res versions of my uploaded images. Now, I would like to use them as a placeholder for my lazy loading images. But how can I access them dynamically?

The images are in the following folder:
media / pages / name-of-page / name-of-project / (some random name like “0b7694cbd5-1641145307”) / .jobs & low res Images

Thanks in advance! :slight_smile:

Kirby automatically creates thumbs for the Panel. You can create thumbsnails in your templates via the thumb() method and its shortcuts:

Thank you @pixelijn, although this is not exactly I was looking for.
I would like to pass in the url to a very low res version of an image in the “src”
Like so:

<img src="<?= $LowResPlaceholderURL ?>" data-src="<?= $HighResURL ?>" class="lazy">

Yes, where exactly is the problem? You can make the thumbs any size and also change the quality to something very low. It’s exactly what the Panel does, creating thumbs in different sizes for the field & section previews.


<?php echo $page->file('somefile')->thumb(['width' => 200, 'quality' => 20])->url() ?>

Oh, I missed that - thanks! But for some reason the website is producing these thumbs for any images on a page reload and is affecting the performance… is there anything I’m doing incorrectly? I’m using the following:

<img src="<?php echo $image->thumb(['quality' => 5])->url() ?>" data-src="<?= $HighResUrl ?>" class="lazy">

Kirby only creates thumbs if you call the thumb() method, however, Kirby also copies all other images to the media folder when their url is called. This only happens once, though.