Display image url from file custom field

Support
1

Hi, I don’t manage to display an image from a file custom field.

I don’t understand why this doesn’t work :

{{ page.media[header.mainImage].url }}

(mainImage is the name of my file field)

Thank you very much for your help.

2

@Michael, On first sight I would guess you have gotten the reference to the frontmatter wrong. It should be page.header.mainImage. The entire code becomes:

{{ page.media[page.header.mainImage].url }}
3

On closer look…

Grav defines the header object which is a shortcut to page.header(). Therefor header.mainImage could return the right value in the code provided in the initial post.

Could, because it depends on the context. According the docs:

The header object is an alias for page.header() of the original page. It’s a convenient way to access the original page headers when you are looping through other page objects of child pages or collections.

This means that if variable page is assigned another page, header does not return the header of the new page. but still the header of the original page.

A simple example (not per se showing the best coding practice…):

{% set page = page.children|first %}
{{ header.mainImage }}       -> shows the value of the original 'page'
{{ page.header.mainImage }}  -> shows the value of the new value of 'page'
4

Thank you for your time and for the explanations,
but still I can’t manage to get the url of the image of my custom field

I tried this line but it creates an error :

An exception has been thrown during the rendering of a template (“Illegal offset type in isset or empty”).

Here’s my yaml file :

  fields:
    content:
      type: tab

      fields:

        header.decalage:
          type: text
          label: Simple text

        header.mainImage:
          type: file
          label: Image
          destination: 'user/themes/myTheme/assets'
          filesize: 1
          accept:
            - image/*

My first custom field works and I can display its value. I don’t see what I’m missing …

5

Shouldn’t you be using a field with type filepicker instead of file?

  • File
    in Admin, File is specialized to be used in plugin and theme configurations (blueprints). Handles uploading a file to a location and deleting it, and removing it from the theme / plugin configuration|
  • Filepicker
    Filepicker allows to choose files from a location in the web server filesystem.|

I use the following to set the frontmatter in my page:

header.theme.headerImage:
  type: filepicker
  folder: 'theme@:/images/headers'
  label: Select an image as header
  preview_images: true
  accept:
    - .png
    - .jpg
6

I also find this in the doc :
display an image uploaded in a file field

So I tried this after adding another image :

{% for imagesuploaded in page.header.mainImage %}
	{{ page.media[imagesuploaded.name] }}
	yo
{% endfor %}

I can see “yo” display twice but no image name :frowning:

1 Like
7

Some questions:

  • Are you sure the page contains the frontmatter mainImage and it has a value?
  • What value do you expect it to be? Would you mind sharing the frontmatter?
  • Where do you store your images? In same folder as *.md or in /user/pages/images or /user/themes/mytheme/images, or …

To see what the values are in Twig you can ‘dump’ them. When you set in system.yaml:

debugger:
  enabled: true

You could dump the variable using:

{{ dump(page.header) }}           {# see if frontmatter contains mainImage #}
{{ dump(page.header.mainImage) }} {# show value of mainImage #}
1 Like
8

I do store my images in another folder than the .md file. In an “assets” folder I created in my theme. Is it a bad way to process ?

Also I enabled the debugger but it doesn’t show up in my front, I have this error message in my console :

PhpDebugBar is not defined

On the other hand I tried to use filepicker and I managed to finally get “myimage.jpg” displayed on my front. This is a good point !

But it brings on one last question : If I drop files on the “page media” area, my files are in the same folder than my page. So should I change the “folder” attribute of my filepicker to “self” or is there a way to upload files in my general “assets” folder ?

Thank you

9

hi

Did you try mediapicker file

https://learn.getgrav.org/cookbook/twig-recipes#displaying-an-image-picked-in-a-mediapicker-field

10

Thank you for your help and explanations @dimitrilongo and @anon76427325, I choosed to use the filepicker after uploaded my images in the page media area and it works pretty good !

11

Only realised later what you meant by below question and forgot to reply…

If you drop files on the ‘Page Media’ field in the ‘Content’ tab of the page in Admin, by design, the files are saved in the same folder as the page. That’s way the field is called ‘Page Media’…

If you use the filepicker as shown in post #5, you can choose where to save the images using the folder attribute. You define that field in one of the blueprints in /mytheme/blueprints/ eg. default.yaml.

2 Likes