How to get image Url from structured yaml field

Kirby 3 Solved ✅
1

I think it is a simple task but i get it wrong.

I try to get the image Url from a Structuredfield in a Snipper: My Code looks like this:

The Snippet looks like this (recommendations_new.php):

<?php foreach ($page->recomend_pages()->yaml() as $feat): ?>

       <img src="<?= $feat['picture'] ?>" />

       <h4>
            <?= $feat['name'] ?>
        </h4>
        <p class="description">
            <?= $feat['description'] ?>
        </p>
        <a href="<?= $feat['link'] ?>" ><?= $feat['button'] ?></a>
<?php endforeach ?>

The Blueprint looks like this:

title: Home
tabs:
  content:
    label: Inhalt
    icon: document
    preset: page
    fields:
      title:
        label: Titel
        type:  text

      heading_banner:
        label: Titelbild
        type:  files

      heading_info:
        label: Textinfo Header
        type:  textarea

      recomend_pages:
        label: Teaser Links
        type: structure
        limit: 3
        entry: >
          {{name}}
        fields:
          name:
            label: Name
            type: text
            required: true
          description:
            label: Beschreibung
            type: textarea
          picture:
            label: Bild
            type: files
            required: true
          link:
            label: Url
            type:  url
            required: true
          button:
            label: Button text
            type: text
          default: mehr erfahren »

The Template:

<?php snippet('header') ?>


    <section class="uk-section">
        <div class="uk-container">

            <div class="uk-width-1-1">
                <?php
                $banner = $page->heading_banner()->toFile();
                if ($banner):?>
                    <img src="<?= $banner->url() ?>" alt="<?= $banner->name() ?>" style="width:100%;">
                <?php endif ?>
            </div>

            <div class="tw-element uk-text-center tw-heading">
                <?= $page->heading_info()->kirbytext() ?>
            </div>

            <?php snippet('blog') ?>
            <?php snippet('recommendations_new') ?>

        </div>
    </section>


    <div style="margin: 36px 0px 0px 0px; background: #004367; text-align: center; padding: 72px 48px;">
        <h3 style=" color:#fff; letter-spacing: 0.1em;">
            <?= $site->footer_info_text()->kirbytext() ?>
        </h3>
    </div>


<?php snippet('footer') ?>

The Problem is with $feat[‘picture’] it gives me the word array in the frontend…

Any hints really appreciated.

2

What type do you use for the picture field and what is stored in it?

3

It is a files field and an image is stored in it, i want to retrive the image url and ideally the alt-tag text. The Code above is added.

Thank you in advance!

4

I prefer the toStructure() method for rendering content from a structure field to using yaml. You can fetch the image from the picture field using the toFile() method (I assume you only store a single image here (if so, you should probably set max: 1). If you store multiple images, use toFiles() instead and then loop through the collection.

Note that I’m using an if statement below to make sure I have an image object before rendering the image and calling the url() method.

<?php foreach ($page->recomend_pages()->toStructure() as $feat): ?>
  <?php if($img = $feat->picture()->toFile(): ?>
       <img src="<?= $img->url() ?>" />
  <?php endif ?>
       <h4><?= $feat->name()->html() ?></h4>
        <p class="description"><?= $feat->description()->html() ?></p>
        <a href="<?= $feat->link() ?>" ><?= $feat->button()->html() ?></a>
<?php endforeach ?>