Image selection in loop

The CMS Questions
1

I’m using a loop to load images into an article.

<?php if ($image = $article->picture()->toFile() ) : ?>
       <img src="<?= $image->url() ?>" class="img-fluid">
<?php endif; ?>

First issue, since using the webp plugin its always loading both the jpg and the webp image, therefore every image is showing twice.

Second issue, when somebody is changing a picture in the panel, the old picture is still showing since it is not being removed from the folder.

The reason of using a loop instead of named fields is, I don’t want to limit the number of pictures for the editor.

2

Would this be my webp plugin? You can use the snippets for this, explained in the readme which can be used in a loop.

snippet('webp', ['sizes' => [1920, 1140, 640, 320], 'src' => 'yourimage.jpg', 'type' => 'png', 'class' => 'picturetagclass', 'width' => 800, 'height' => 600])

The source can be an image object, so something like this will work

  <?php foreach($page->images() as $image): ?>
   <?= snippet('webp', ['sizes' => [1920, 1140, 640, 320], 'src' => $image 'type' => 'jpg', 'class' => 'picturetagclass', 'width' => 800, 'height' => 600]) ?>
  <?php endforeach ?>

Personally i filter out the webp images from being displayed in the panel so as not to clutter it up. The snippet takes care of loading both formats.

However, i would strongly recommend removing the plugin and upgrading to the recently released Kirby 3.6 which has native webp and avif support.

3

Thank you for your answer @jimbobrjames !

It’s the felixhaeberle/kirby3-webp plugin. I’m running 3.6.0 but used the plugin already before. Its a good idea to switch from the plugin to the native webp support.

Personally i filter out the webp images from being displayed

How are you doing this?