Blueprint/Panel advice needed for x images within a div

Kirby 3 Questions 🤔
1

Hi there :wave:

I need a little advice to achieve a specific markup with the Kirby 3 panel. For a photo portfolio I want to have one to three images within a div to get several elements per page that look similar to this sketch:

sktech_imagecontainer
sktech_imagecontainer1424×764 13.5 KB

What would be the nicest user-friendliest way to include that into Kirby 3? I already experimented with structure fields containing images but I got stuck with the blueprint syntax. If you tell me this is the way to go I’ll follow that route further …

Speaking in markup the result could be as simple as this:

<div class="row">
  <img src="...">
  <img src="...">
</div>
<div class="row">
  <img src="...">
</div>

Many thanks in advance!

Cheers,
Chris

2

Hey welcome to the forum :slight_smile:

The easiest was to do this is to use a single files field and then on front end use Css Grid to arange them in the desired layout. I do this on my own site:

image
image781×836 161 KB

Heres the code i use to drive that from the template, assuming you called the files field “gallery”:

<?php
$galleryimagesrc = $page->gallery()->toFiles();
$gallerycount = $galleryimagesrc->count();
?>

<section id="gallery" class="gallery-<?= $page->slug() ?>">

<?php if($gallerycount <= 1): ?>

  <?php foreach($galleryimagesrc as $image): ?>
      <!-- If there is only one image in the field -->
  <?php endforeach ?>

<?php else: ?>

  <div class="item-grid work-item-grid">
    <?php foreach($galleryimagesrc as $image): ?>

          <?php if($image->is($galleryimagesrc->first())): ?>
          <div class="work-item">
              <!-- Big First Image from the files field -->
              
          </div>

          <?php else: ?>

          <div class="work-item">
              <!-- From image 2 in the file field -->
          </div>
          <?php endif ?>
      <?php endforeach ?>
  </div>

<?php endif ?>

</section>

Hope that helps! have fun!

3

The if statement here is not necessary! With toFiles() you create a collection that can be empty or not, but if there are elements in the collection, they will exist.

You will probably check if your collection is empty or not to prevent rendering empty HTML tags.

4

Yes i was just realising that… im still writing the post!

5

Looks like you inherited my style of writing in chunks…:joy:

1 Like
6

May I suggest to use if($gallerycount = 1) here, and wrap the whole code chunk in an if statement that checks if the collection is empty?

<?php
$gallery = $page->gallery()->toFiles();
$galleryCount = $galleryimagesrc->count();
?>

<?php if ($gallery->isNotEmpty()) : ?>
  <section id="gallery" class="gallery-<?= $page->slug() ?>">

  <?php if ($gallerycount = 1) { $image = $gallery->first(); } ?>

  <!-- markup for single image -->

  <?php else: ?>

    <div class="item-grid work-item-grid">
      <?php foreach ($gallery as $image): ?>

            <?php if ($image->is($gallery->first())): ?>
            <div class="work-item">
                <!-- Big First Image from the files field -->
                
            </div>

            <?php else: ?>

            <div class="work-item">
                <!-- From image 2 in the files field -->
            </div>
            <?php endif ?>
        <?php endforeach ?>
    </div>

  </section>
<?php endif ?>
7

You may :slight_smile:

8

Wow, thank you very much for those quick responses :raised_hands:

Right now I have to take care of my favorite tiny human but tonight when she’s asleep I’ll be looking into adapting this solution for my project. I’ll let you know how it went :v: