Gallery block with 2 different images layout: single image or 2 images per slide

1

Hello everyone, I’ve been stuck trying to figure this out which I am pretty sure is really basic but I am quite new to kirby and php. I am using a gallery block and I display its images on a swiper slider. Everything is working fine except that I need to have 2 options: either I show 1 image per slide or I show 2 images side by side in 1 slide. After a lot of try and error I managed to do this but the problem I am getting is that after a slide with two images I always get an empty slide. It’s like the slider is assuming that each image should be on a single slide and it still counts 2 slides when 2 images are shown on 1 slide. maybe there’s another way to achieve this, I would appreciate any help. here’s my gallery code:

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

<?php
$twoImage = $block->images()->toFiles()->filterBy('slide', 'two');
$oneImage = $block->images()->toFiles()->filterBy('slide', '');;
?>



<div class="swiper-slide" >
<div class="slide-container two-imgs">
<?php foreach ($twoImage as $leftImage): ?>
        <?php $classfig = 'fig-' . $leftImage->slide(); ?>
        <figure class="<?= $classfig ?>">
          <img src="<?= $leftImage->url() ?>" alt="<?= $leftImage->caption() ?>">
      <figcaption  class="two-fig"> <?= $leftImage->caption() ?></figcaption>
        </figure>      
        <?php endforeach ?> 
        </div>   </div>
  


  <?php foreach ($oneImage as $centerImage): ?>
    <div class="swiper-slide" >
        <div class="slide-container">
          <figure>
          <img src="<?= $centerImage->url() ?>" alt="<?= $centerImage->caption() ?>">
      <figcaption> <?= $centerImage->caption() ?></figcaption>
        </figure>  
        </div></div>
       <?php endforeach ?>

and here’s the code where I call for the blocks:

div class="swiper mySwiper top">
<div class="swiper-wrapper">

      
<?php foreach ($page->slides()->toBlocks()->filterBy('type', 'gallery') as $block): ?>
 
          <?= $block ?>
      
        <?php endforeach ?>
       


        <div class="swiper-slide">
    <div class="slide-container">

    <?php
// Strucutre: using the `toStructure()` method, we create a structure collection
$items = $page->proj()->toStructure();
// we can then loop through the entries and render the individual fields
foreach ($items as $item): ?>

<div class="project-description">
        <p class="proj-text">
        <?= $item->description()->html() ?>
        </p>
      </div>
        <div class="proj-infos">
        <p class="info-name"><?= ucfirst($page->place()->key()) ?></p>
          <p class="info-description"><?= $item->place() ?></p>
          <p class="info-name"><?= ucfirst($page->material()->key()) ?></p>
          <p class="info-description"><?= $item->material() ?></p>
          <p class="info-name"><?= ucfirst($page->type()->key()) ?></p>
          <p class="info-description"><?= $item->type() ?></p>
          <p class="info-name"><?= ucfirst($page->function()->key()) ?></p>
          <p class="info-description"><?= $item->function() ?></p>
          <p class="info-name"><?= ucfirst($page->size()->key()) ?></p>
          <p class="info-description"><?= $item->size() ?></p>
          <p class="info-name"><?= ucfirst($page->credits()->key()) ?></p>
          <p class="info-description"><?= $item->credits()->kti() ?></p>
        </div>
<?php endforeach ?>      
      </div>
</div>



      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
  
    </div>```