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
.
@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!