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

Archive
1

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

form:
    fields:
        tabs:
            fields:
                content:
                    type: ignore
                options:
                    type: ignore
                advanced:
                    type: ignore
                referenties:
                    type: tab 
                    title: Referenties
                    fields:
                        header.referenties:
                            type: list
                            label: Referenties
                            fields:
                                .image:
                                    type: file
                                    label: referentie IMG
                                    multiple: false
                                    destination: 'theme@:/images'
                                .text:
                                    type: text
                                    label: Referentie beschrijving

How can I display this image with twig?

2

Have a look here: https://learn.getgrav.org/content/media
For your blueprint:

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

Ahh, sorry. Different destination you save the file to.
See here: https://learn.getgrav.org/themes/theme-vars#theme_url-variable
And here: https://learn.getgrav.org/themes/twig-filters-functions#url

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 img.image.name

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( img.name) }}   <!-- 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.

4

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 #}
        {{ page.media[img.name].html }} {# Displays the image #}
    {% endfor %}
{% endfor %}

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