Problem with showing images on list

[fourroses666]

I have an onepage site. The manager works fine, but showing the uploaded images on the front page gives an error.

My onepage.yaml (see .afb)

        tab3:
          type: tab
          title: Diensten

          fields:
            header.diensten:
              name: diensten
              type: list
              label: Diensten blokken
              style: vertical

              fields:
                .kop:
                  label: Kop
                  type: text
                .afb:
                  label: Afbeelding
                  type: file
                  destination: 'self@'
                  multiple: false
                  accept:
                    - image/*

So I have the option to upload an image:

This all works fine.

Then in my onepage.html.twig

        <div class="d-blokken respons">

            {% for diensten in page.header.diensten %}

                <div class="item">
                  <img src="{{ diensten.afb }}" alt="" />
                  <h4>{{ diensten.kop }}</h4>
                </div>

            {% endfor %}
     

          <div class="clear"></div>
        </div>

The {{ diensten.kop }} works great.
It seems {{ diensten.afb }} gives an error.

"An exception has been thrown during the rendering of a template ("Array to string conversion")."

Do I need to add .media or some other way to "call" the image?

Just started experimenting with Grav. Does it need a partial?! Really have no idea.

[flaviocopes]

As mentioned in Slack, diensten.afb is likely an array. You need to look in the page markdown header structure, and write the twig accordingly. You can see it in Expert mode in Admin.

If it's an array, you need to iterate on it with a for loop.

[fourroses666]

Sorry but I don't understand.
I can't find any good examples how to do it correct.

On expert mode Frontmatter says:

diensten:
    -
        kop: Onderhoud
        afb:
            user/pages/03.test-2/README.jpg:
                name: README.jpg
                type: image/jpeg
                size: 95277
                path: user/pages/03.test-2/README.jpg
etc..

That looks oke to me.

[flaviocopes]

diensten.afb is an array. You cannot print it with {{diensten.afb}}. Now that I see the structure, you can write {{(diensten.afb|first).path}} to get the file path.

[fourroses666]

Thank you allot Flavio.