Can't output filename in img src from admin filepicker

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?

How does the frontmatter of the page look like?

@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?

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.