Display cover images using metadata and if/elseif statement

Kirby 3 Solved ✅
1

Hello,

I am quite new to Kirby and PHP and really appreciate some help here:
I have 3 different sizes for the cover images that I want to display on the homepage. I created a blueprint for the cover images with a select field (small, big, medium) and I am using if/else if statements to display them on the homepage according to this field. So far I managed to show only the big & medium sizes, the small sizes are being displayed as medium, meaning the last “elseif” statement is not working. If I deleted the medium statement the small images are shown so the problem is having 2 elseif statements. can somebody help me to solve this? or point me in a better solution? (I have the feeling I am repeating a lot of code). thank you so much!! here is my code:

2

Could you please share your code?

3

I am trying to add the code but I keep getting this message: new users can only show 2 links per post

4

Just post the code as code here, no need for a link.

5

I was trying to paste the code and kept getting the error as if it was the link. Now is working fine, here’s the code:

<?php foreach ($site->children()->listed() as $project): ?>
    <?php if($project->images()->findBy('sizes', 'big')):?>
    <div class="p-big">
  <a href="<?= $project->url() ?>">
  <div>
      <figure>
          <?= $project->images()->findBy("template", "cover") ?>
        </figure>
        </div>
    </a></div>
    <?php elseif($project ->findBy('sizes', 'medium')):?>
      <div class="p-medium">
  <a href="<?= $project->url() ?>">
  <div>
      <figure>
          <?= $project->images()->findBy("template", "cover") ?>
        </figure>
        </div>
    </a></div>
    
    <?php elseif($project ->findBy('sizes', 'small')):?>
      <div class="p-small">
  <a href="<?= $project->url() ?>">
  <div>
      <figure>
          <?= $project->images()->findBy("template", "cover") ?>
        </figure>
        </div>
    </a></div>

    <?php  endif?>
    <?php endforeach ?>
6

There seems to be an issue here:

Here you try to find an image by a sizes field.

Here instead you try to call find by on a page, which doesn’t make sense.

But could you also please share your file and page blueprints?

8

You’re right, completely forgot to add the images, now it’s working!! thank you so much for the help and quick reply!!!

I just have another question, in order to make this work I added the select field to the cover image template which means on the panel I have to click on the image to see this field. Is there a way to have the field on the panel near the other fields? (I now I am using a cover template and that’s why this is happening, but when I tried using a select field on the page it didn’t work because there was no relation to the image)
here my page blueprint:

title: Project

columns:
  - width: 1/2
    sections:
      info:
        type: fields
        fields:
          text:
            type: textarea
          year:
            type: number
          site:
            type: text
          credit-images:
            type: url
          category:
            type: select
            options:
              bim: BIM
              architecture: Architecture
              drawings: Drawings
  - width: 1/2
    sections:
      cover:
        type: files
        headline: Cover
        layout: cards
        info: "{{ file.dimensions }}"
        template: cover
        min: 1
        max: 1
      gallery:
        type: files

here is my cover blueprint:

title: Project

-----

fields:
  sizes:
    label: Cover Size
    type: select
    required: true
    options:
      small: Small
      medium: Medium
      big: Big
9

Hm, since this is information that belongs to the file, it wouldn’t make sense to put this information in the page. What you can do, however, is display the information in the cover section:

cover:
        type: files
        headline: Cover
        layout: cards
        info: "{{ file.dimensions }} - {{ file.sizes }}"
        template: cover
        min: 1
        max: 1

But your template code could be shortened a lot, because the only difference between the three options is the class you assign to the div container.

<?php foreach ($site->children()->listed() as $project) : ?>
  <?php if ($image = $project->images()->findBy("template", "cover")) : ?>
    <?php $class = 'p-' . $image->sizes(); ?>
    <div class="<?= $class ?>">
      <a href="<?= $project->url() ?>">
        <div>
          <figure>
            <?= $image ?>
          </figure>
        </div>
      </a>
    </div>
  <?php endif ?>
<?php endforeach ?>
10

Thank you so so much!! it works perfectly!