Custom page blueprint. Help with twig template for image display

Archive
1

Hi,

I have been struggling to get a twig layout working when I assign a custom page blueprint. In my blueprint I have created a new tab with some custom fields. one of these custom fields is an image. I can get the text custom fields to display no problem but not the image. Does any one have a code snippet to show how this works?

2

How is it stored in your page header?

3

Should be something like {{ header.myimage|first.path }}

4

You can tell exactly how it’s stored in the page by using {{ dump(page.header) }} in your twig template and looking at the results in the debug bar.
https://learn.getgrav.org/advanced/debugging

Once you have the exact way it’s stored, then something like this should work to display it:

{{ page.media[page.header.custom_image].html() }}

I’m just learning this stuff myself, but this approach is working for me.

5

thanks for the input guys. I am a step closer. When I use:

{{page.title}}

I can see that the img gets the path to the file, but when i paste that link into a browser I get a 404

the blueprint property is, and the image definitely exists at that path, checked on ftp

header.image:
type: file
label: Image
destination: ‘user/themes/mytheme/assets’

6

after a bit more debugging i could see from a working image (using the default media) I could see that the path had a leading slash /user… where as my output was <img src=“user… if I manually add a slash in front <img src=”/{{page.header… it seems to work okay now.

I don’t think thats the best idea of course, so it may be a setup somewhere I am missing

7

Try something like this:

{{ page.media[page.header.image|first.path].html('My title', 'Some ALT text', 'myclass') }}

By passing your custom image into page.media you gain all the functionality of the media object. The .html() method takes care of getting the correct path to the image and adding the title attribute.

If you haven’t yet, take some time and read through the documentation here: https://learn.getgrav.org/content/media. I’ve been solving many problems similar to yours by trying code snippets from the media documentation.