Lazyloading srcset causing error for structured item loop

Kirby 3 Solved ✅
1

Hi all -

I’m trying to loop through images in my strurture form field and get the following error:

**

Block error: “Call to a member function url() on string” in block type: “videoGrid”

**

The issue seems to be relating to my srcset array of sizes, but this is taken straight from Kirby’s lazy loading guide, so I can’t see where I’m going wrong.

    <?php foreach ($item->image()->toFiles() as $image): ?>
    <img
        loading="lazy" alt="<?= $image->alt() ?>"
        src="<?= $image->thumb(['width' => 1280])->url() ?>"
        srcset="<?= $image->srcset([320, 640, 960, 1280, 1600, 1920])->url() ?>"
        height="<?= $image->height() ?>"
        width="<?= $image->width() ?>"
    >
    <?php endforeach ?>

Block blueprint below:

name: Video grid
fields:
  videos:
    label: Videos
    type: structure
    fields:
      description:
        label: Description
        type: text
      link:
        label: Youtube link
        type: url
      image:
        label: Image
        type: files
        min: 1
        max: 1
2

You can’t call url() on srcset, srcset returns a string, i.e. a list of thumb urls.

3

Thanks for the reply. That’s taken straight fron the docs already linked:

<?php if ($image = $page->image()): ?>
    <img
        loading="lazy" alt="<?= $image->alt() ?>"
        src="<?= $image->thumb(['width' => 1280])->url() ?>"
        srcset="<?= $image->srcset([320, 640, 960, 1280, 1600, 1920])->url() ?>"
        height="<?= $image->height() ?>"
        width="<?= $image->width() ?>"
    >
<?php endif ?>

So that won’t work? Is there a published alternative?

4

Use like that:

srcset="<?= $image->srcset([320, 640, 960, 1280, 1600, 1920]) ?>"

You’re right. Doc is wrong, I’ll fix that.

Check alternative doc page: https://getkirby.com/docs/guide/templates/resize-images-on-the-fly#responsive-images

5

I’ve fixed the document. Thanks for reporting!

6

Ah, working a treat now, thanks! I normally use a js solution, so going for browser-based on this is new to me, so not hit this issue before.