How to display an image that is upload via file field of a custom page form

So I’ve been working with grav cms lately. Unfortunatly I can’t find any answers to some problems I have.

I’m trying to upload a image with a custom blueprint form, using the file field.

this is my form soure code

title: homeref
'@extends': default

                    type: ignore
                    type: ignore
                    type: ignore
                    type: tab 
                    title: Referenties
                            type: list
                            label: Referenties
                                    type: file
                                    label: referentie IMG
                                    multiple: false
                                    destination: 'theme@:/images'
                                    type: text
                                    label: Referentie beschrijving

How can I display this image with twig?

Have a look here:
For your blueprint:

{% for img in header.referenties %}
   {{[img.image].cache.html('Your Title Text', img.text., 'classname')}}
{% endfor %}

Ahh, sorry. Different destination you save the file to.
See here:
And here:

Mhm, I don’t know exactly if this will work, but should be something like this for your case:

{% for img in header.referenties %}
   <img src="{{ url('theme://images/) }},{{ img.image }}" alt="{{ img.text }}" />
{% endfor %}

Could also be

Very helpful in general is installing the developer tools and tracing out vars to find out what it is or if that array stores relevant information

{% for img in header.referenties %}
   {{ dump( img) }}   <!-- logs maybe an array? -->
   {{ dump( }}   <!-- logs maybe the name ? -->
   {{ dump( img.url) }}   <!--  logs maybe the url -->
   {{ dump( img.text) }}   <!-- should log your 'Referentie beschrijving' ? -->
{% endfor %}

The documentation is pretty well. Although sometimes I miss in the blueprints form examples their relevant links to “how to” examples to get that data working within twig.

Thanks for replying!

I am kind of new to grav and I didn’t know about the debug functionality. Thanks for that!

I finally found a solution thanks to debugging:

In my blueprint I changed the destination to:

destination: 'self@'

and this is the code in my template file:

{% for data in header.referenties %} {# Loops over the values of referenties -> referenties is an array #}
    {% for img in data.image %} {# Loops over the values of image -> image is also an array #}
        {{[].html }} {# Displays the image #}
    {% endfor %}
{% endfor %}

Btw I totally agree with you about the documentation. Let’s hope it gets better in the future.