Can't output filename in img src from admin filepicker

Support Themes & Styling
#1

I am struggling to display an image in the frontend from a custom image upload (type: filepicker) in admin.

The filepicker exists in the blueprint like the below:

        header.brand_logo:
          type: filepicker
          label: Brand Logo
          preview_images: true
          folder: theme://images/brands

And then I am trying to load the output the image like:

<img src="{{ url('theme://images/brands/' ~ header.brand_logo) }}" />

But header.brand_logo is NULL.

Can anyone suggest why this isn’t working and what I need to do?

#2

How does the frontmatter of the page look like?

#3

@zigojacko, I’m afraid I cannot reproduce your issue using the following steps:

  • Fresh install of Grav 1.7.5 with theme Quark
  • Added your blueprint snippet to the bottom of ‘/user/themes/quark/blueprints/default.yaml’
  • Added a few *.jpg images to folder ‘/user/themes/quark/images/brands’
  • Added your Twig snippet to ‘user/themes/quark/templates/default.html.twig’
  • Opened page ‘Typography’ in Admin: http://dev-dev/admin/pages/typography
  • In tab ‘Advanced’ I selected an image from the list.
  • Saved page
  • Value in frontmatter of page ‘typography’: brand_logo: myimage.jpg
  • Browsed to http://dev-dev/typography
    Image is shown as expected.

If your issue persists, would you mind creating a similar script that reproduces the issue and can easily be replayed by others?

#5

This is exactly modelled on the blog and blog items from the Deliver Skeleton theme. Replicated for a shop (blog) with products (blog items).

There is a product.yaml blueprint which holds the data for each product configurable from Admin. This blueprint contains the filepicker and sets the variable brand_logo: <picked_image> in the frontmatter of the product page.

On the shop page (shop.html.twig), I am calling in a separate partials template for use when showing the collection of products (so that it isn’t identical to what this display on the individual product pages).

{% include 'partials/shop_item_list.html.twig' with {'page':child, 'truncate':true} %}

And it is then in shop_item_list.html.twig that I am trying to display the image referred to brand_logo in the frontmatter of the product, using:

<img src="{{ url('theme://images/brands/' ~ header.brand_logo) }}" />

Unfortunately, the variable header.brand_logo always returns null.

#6

@zigojacko, Yes, it now become much clearer. Thank you.

Have a look at the theme variables docs especially the header object:

header object

The header object is an alias for page.header() of the original [emphasis is mine] 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.

So, when using header.brand_logo in shop_item_list.html.twig you are referring to the original (product list) page and not the product (item) page.

In shop_item_list.html.twig you should explicitly reference the ‘page’ variable, passed in as parameter in the {% include %} statement:

<img src="{{ url('theme://images/brands/' ~ page.header.brand_logo) }}" />

Hope this helps!