Edit image inside a gallery block

Kirby 3 Solved ✅
1

Hello!
I would like to have access to the snippet of the image tag for the images inside the gallery block.
when I change the image.php inside the ‘snippets->blocks->image.php’ it doesn’t affect these images (but only the image block).

any idea how can I reach it?
thanks!

2

I don’t understand your question, I’m afraid. Could you please elaborate?

I guess you mean the image block snippet, not the image Kirbytag.

What I’d do:

Create an image snippet that you can use in both the image and the gallery block snippets.

3

Yes I will elaborate :slight_smile:
I want to change the format of the images in the website to webp and also change the srcset according to screen sizes.

therefore I changed the image.php file in the ‘snippets-blocks’ folder like that:


<?php if ($src): ?>
    
            <figure<?= Html::attr(['data-ratio' => $ratio, 'data-crop' => $crop], null, ' ') ?> 
                    <img src="<?= $src ?>"
                    srcset="<?= 
                        $image->srcset([
                        '480w'  => ['width' => 480, 'format' => 'webp', 'quality' => 80],
                        '640w'  => ['width' => 640, 'format' => 'webp', 'quality' => 80],
                        '1440w' => ['width' => 1440, 'format' => 'webp', 'quality' => 80],
                        '2000w' => ['width' => 2000, 'format' => 'webp', 'quality' => 80]
                        ])
                    ?>" 
                    alt="<?= $alt->esc() ?>">
            <?php if ($caption->isNotEmpty()): ?>
            <figcaption>
                <?= $caption ?>
            </figcaption>
            <?php endif ?>
            </figure>

<?php endif ?>

It works great for all the images - but it doesn’t affect the images inside the gallery…
any idea why?

another thing that I try is to add the srcset to the gallery.php file like this:

<?php /** @var \Kirby\Cms\Block $block */ ?>


  <figure   >
  <ul
  <?php if($block->kind()=='true'):?>
    class='carousel' 
  <?php elseif($block->kind()=='false'):?>
    class='list'
  <?php endif; ?>
  >
    <?php foreach ($block->images()->toFiles() as $image): ?>
    <li>
      <?= $image->srcset([
                        '480w'  => ['width' => 480, 'format' => 'webp', 'quality' => 80],
                        '640w'  => ['width' => 640, 'format' => 'webp', 'quality' => 80],
                        '1440w' => ['width' => 1440, 'format' => 'webp', 'quality' => 80],
                        '2000w' => ['width' => 2000, 'format' => 'webp', 'quality' => 80]
                        ])

      ?>
    </li>
    
    <?php endforeach ?>
  </ul>
  <?php if ($block->caption()->isNotEmpty()): ?>
      <figcaption>
        <?= $block->caption() ?>
    </figcaption>   
  <?php endif; ?>
</figure>

but it gives me error.

I would appreciate any help :pray:

4

Well, yes, each block has its own block snippet. So for an image block type the blocks/image.php snippet is used and for the gallery block type the gallery.php snippet.

Don’t know why this code is throwing an error, but it doesn’t make sense. srcset() is supposed to be used with the srcset attribute in an img element.

1 Like
5

Ok - I get it now - this is how it should be written:

  <?php foreach ($block->images()->toFiles() as $image): ?>
    <li>

    <img src='<?= $image->url()?>'
      srcset ='<?= $image->srcset([
                        '480w'  => ['width' => 480, 'format' => 'webp', 'quality' => 80],
                        '640w'  => ['width' => 640, 'format' => 'webp', 'quality' => 80],
                        '1440w' => ['width' => 1440, 'format' => 'webp', 'quality' => 80],
                        '2000w' => ['width' => 2000, 'format' => 'webp', 'quality' => 80]
                        ])

      ?>'
      >
    </li>
    
    <?php if($image->caption()->isNotEmpty()): ?>
      <figcaption>
          <?= $image->caption() ?>
      </figcaption>   
    <?php endif ?>
    <?php endforeach ?>

Thanks!

6

Note that unless you use your images full screen, srcset should be accompanied by a sizes attribute: