How to get image data from template(s) to code

Kirby 3 Solved ✅
1

Hey at all :slight_smile:

I’ve got a newbie / dumb question.
I searched the whole cookbook and docs but I can’t really find an answer to work with.
I tried to copy ass together from the microsite example but it didn’t worked out either.

What I want to do:
I added the Kirby page builder plugin - > works as expected.
site>blueprints>pages>modules.yml

title: Modules Page
icon: 🖼
# preset: page

tabs:
  page:
columns:
  blocks:
    width: 2/3
    sections:
      lego:
        type: fields
        fields:
          modules:
            label: Modules
            type: builder
            fieldsets: 
               text_image: fieldsets/text_image`

I added an img field to my panel via the pagebuilder
site>blueprints>fieldsets>text_image.yml

  name: image_text
    fields:
      headline:
        label: headline:h1
        type: text
      content:
        label: content:p
        type: textarea
      example_i_copied_from_Microsite:
        label: Image
        width: 1/1
        type: files
        layout: cards
        max: 1
        uploads:
          template: image
        image:
          ratio: 1/1
          cover: true

and I added a template for the image itself:
site>blueprints>files>image.yml

title: Image
accept: image/*

columns:
  - width: 1/2
    sections:
      content:
        type: fields
        fields:
          caption:
            label: Caption
            type: textarea
            size: medium
  - width: 1/2
    sections:
      meta:
        type: fields
        fields:
          alt:
            label: Alternative Text
            type: text
          title:
            label: title
            type: text
            width: 2/3

And now my question how do I get the values from the image ( alt, title,…) from the image template (laying in files folder) in my snippet? as well as my image itself.

snippet>blocks>text_image.php

<div class="grid grid__twotwo grid__twotwo__flip">
        <article class="a-s-center grid__twotwo__textarea ">
            <h2 class="h2-bigger"><?= $data->headline()->html() ?></h2>
            <p class="content-text ">
            <?= $data->content()->html() ?>
            </p>
            <a href="">try now ⇢</a>
        </article>
        <div class="a-s-center grid__twotwo__imgarea ">
            <img alt="ALT HERE" title="TITLE HERE" src="LINK HERE?!" />
        </div>
    </div>

I hope you can help me a little :see_no_evil:

Have a nice weekend
Marvin

2 
if ( $image = $data->long_field_name()->toFile() ) {
  echo $image->url();
  echo $image->alt(); // etc.
}
1 Like
3

Thank youuu!! it worked! :heart_eyes: :heart:

For other newbies trying to use this example and because I had to think so hard about this: “the long_field_name” is the “example_i_copied_from_Microsite” in the pagebuilder plugin :smiley: