Images from structure field in site.yml into template

Kirby 3 Solved ✅
1

I need to make a sort of members section and need to display an image of each member.

I used the site blueprint and made tabs. One of them is the members of the board tab.

I can display names and phone numbers and stuff and everything, that is in the structure text fields, but not the images.

I either get no images at all or all images to every member.

This is my blueprint:

title: Site


options:
  changeTitle: false
  changeStatus: false
  delete: false
  changeSlug: false
  flies: true

tabs:

  # content tab
  content:
    label: Seiten
    icon: text
    layout: cards
    width: 1

    sections:
      pages:
       type: pages
       headline: Seiten
       layout: cards

  vorstand:
      label: Vorstand
      icon: document
      fields:
        individuals:
          label: Vorstände
          type: structure
          fields:
            position:
              label: Funktion
              type: text
            name:
              label: Name
              type: text
            foto:
              label: Foto
              type: files
              template: image
              info: "{{ file.dimensions }}"
              image:
                ratio: 1/1
            adress:
              label: Adresse
              type: textarea
            phone:
              label: Phone
              type: tel
            email:
              label: Email
              type: email

  impressum:
    label: Impressum
    icon: cog

    fields:

      headlineImpressum:
        label: Überschrfit
        type: text
      law:
        label: Paragrafen
        type: text

      legalPerson:
        label: Verantwortlicher
        type: textarea

      legalContact:
        label: Kontakt
        type: textarea

      legal:
        label: Impressum Text
        type: textarea

      other:
        label: Was anderes
        type: text

And this is the template code:



  <div class="inner-content-large">
    <h1><?= $page->title() ?></h1>

    <div class="card-grid grid-container">
      <?php $items = $site->individuals()->toStructure();foreach ($items as $item): ?>
      <section class="card">
        <h3><?= $item->position()->html() ?></h3>
        <p><?= $item->name()->html() ?></p>

        <?php $files = $site->individuals()->foto()->toStructure();foreach ($files as $file): ?>
        <figure>
            <a href="<?= $file->url() ?>">
              <img src="<?= $file->url() ?>">
            </a>
        </figure>
        <?php endforeach ?>

        <section class="kontakt-section">
          <?= $item->adress()->kt() ?>
          <p><?= $item->phone()->html() ?> </p>
          <a class="mailto-link" href="mailto:"><?= $item->email()->html() ?> </a>
        </section>

      </section>
    <?php endforeach ?> 
  </div>

</div>

No matter if I use image or files.

I also guess that the path to the structure field is wrong, but that is what would makle sense to me.

2

With the above code I get multiple figure elements with a tags and image elements in every members section instead of just one.

Also the src is empty, so no images.

Bildschirmfoto%2018

3

The photo field is just a field like any other in your structure, so you have to treat it as such. I’m assuming you only want one image per member? (if so, I’d limit the photo field to max: 1.

<div class="inner-content-large">
    <h1><?= $page->title() ?></h1>

    <div class="card-grid grid-container">
      <?php $items = $site->individuals()->toStructure();foreach ($items as $item): ?>
      <section class="card">
        <h3><?= $item->position()->html() ?></h3>
        <p><?= $item->name()->html() ?></p>



        <section class="kontakt-section">
          <?= $item->adress()->kt() ?>
          <p><?= $item->phone()->html() ?> </p>
          <a class="mailto-link" href="mailto:"><?= $item->email()->html() ?> </a>
        </section>

      </section>
    <?php endforeach ?> 
  </div>

</div>

In case of multiple images:

<?php $files = $item->foto()->toFiles(); ?>
<?php if ($files->isNotEmpty()): ?>
  <?php foreach ($files as $file): ?>     
        <figure>
            <a href="<?= $file->url() ?>">
              <img src="<?= $file->url() ?>">
            </a>
        </figure>
  <?php endforeach ?>
<?php endif ?>
4

Oh - so the first loop goes into the structure and the second loop knows already that it loops thru a structure field and only looks into the files field in foto()?

5

Yes, in your first foreach, you loop through the structure items, outputting all fields in a single items. There is no reason to deviate from that (and doesn’t make sense), just because you come across a files field. The only thing that is different, is in the case of a files field, you want to use the toFile()/toFiles() field method to turn the stored values into file objects (otherwise you would just output the field value, i.e. the file name).

6

Oh - interesting. Thank you for that extra explanation, feels good!