How can I use "data-src" in Kirby img tag

Kirby 3 Solved ✅
1

I use Kirby3 and want to use lazyload plugin.
So I have to put data-src in img tag (like <img src="..." data-src="...">)

How can I put data-src in <?=$image ?> ??

  <ul class="album-gallery"<?= attr(['data-even' => $gallery->isEven(), 'data-count' => $gallery->count()], ' ') ?>>
      <?php foreach ($gallery as $image): ?>
      <li>
        <figure>
            <?= $image ?>
        </figure>

      </li>
      <?php endforeach ?>
    </ul>
2

Welcome @coolcoolsuess

This is my Setup based on: https://github.com/aFarkas/lazysizes
Maybe it’ll help you.

Thumb presets in the config.php - File
public/site/config/config.php

<?php

return [
    'debug' => false,
    'thumbs' => [
        'quality' => '70',
        'presets' => [
            'img-mobile' => ['width' => 690, 'height' => 388, 'crop' => 'center'],
            'img-desktop' => ['width' => 1110, 'height' => 624, 'crop' => 'center']
        ]
    ]
];

The Field details in the Blueprint - File.
public/site/blueprints/…

  imageDesktop:
    label: Image desktop
    type: files
    query: page.images
    uploads: false
    multiple: false
    help: 1110 x 624
  imageMobile:
    label: Image mobile
    type: files
    query: page.images
    uploads: false
    multiple: false
    help: 690 x 388

This Markup goes into your Template - File
public/site/templates/…

<picture>

  <?php if ($imageMobile = $target->imageMobile()->toFile()): ?>
    <source srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20690%20388'%3E%3C/svg%3E" data-srcset="<?php echo $imageMobile->thumb('img-mobile')->url(); ?>" media="(max-width: 767px)" />
  <?php endif; ?>

  <?php if ($imageDesktop = $target->imageDesktop()->toFile()): ?>
    <source srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201110%20624'%3E%3C/svg%3E" data-srcset="<?php echo $imageDesktop->thumb('img-desktop')->url(); ?>" />

    <img
      src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201110%20624'%3E%3C/svg%3E"
      data-src="<?php echo $imageDesktop->thumb('img-desktop')->url(); ?>"
      class="img-fluid lazyload"
      alt="<?php echo $imageDesktop->imageAltText()->kirbytags(); ?>" />
  <?php endif; ?>

</picture>

Saludos,

Funkybrotha

3

my srcset plugin can create the full imagetag https://github.com/bnomei/kirby3-srcset

4

You can if you don’t echo the image (thus auto-creating an image tag), but like this:

<img data-src="<?= $image->url() ?>" >
1 Like