Adding Image in Frontmatter

[notakoder]

What is the right way to add an image in YAML frontmatter?

Title: Page Title
Image: 

http://localhost/site-name/path/to/image works, but not in remote, %base_url%/path/to/image does not work, {{ base_url }}/path/to/image does not work either, /path/to/image will not include the site name (localhost/path/to/image).

[PhrozenByte]

Image: %assets_url%/path/to/image.png is the correct syntax, but you have to pass this to Pico's url Twig filter in your Twig templates, e.g. <img src="{{ meta.image|url }}" alt="" />.

[notakoder]

Thank you.

[notakoder]

Sorry. I am reopening this issue.

My base_url is http://localhost/project_x. But my assets_dir is outside the project directory since it is shared by various other projects. Here is my config.yml and frontmatter.

assets_dir: /var/www/cdn
assets_url: http://localhost/cdn

Image: %assets_url%/images/project_x/image.jpg

I am trying to render the image in the post listings page making it a clickable link to open the respective posts. So I am using page.meta.image instead of meta.image. The code I need rendered is <img src="http://localhost/cdn/images/project_x/image.jpg">. But instead I am getting an error loading the image (broken image icon).

Here are the twig codes I've tried.

a href="{{ page.url }}"><img src="{{ page.meta.image|link }}"></a>
renders <img src="http://localhost/project_x/%25assets_url%25/images/project_x/image.jpg">

a href="{{ page.url }}"><img src="{{ page.meta.image }}"></a> renders <img src="%assets_url%/images/project_x/image.jpg">

Even if I try meta.image,

a href="{{ page.url }}"><img src="{{ meta.image }}"></a> renders <img src="">

a href="{{ page.url }}"><img src="{{ meta.image|link }}"></a> renders <img src="http://localhost/project_x/">

The image is rendered only if I enter the url manually without the twig filter link.

Image: http://localhost/cdn/images/project_x/image.jpg <a href="{{ page.url }}"><img src="{{ page.meta.image }}">

In fact, any manual urls work. My hunch is that %assets_url% isn't being recognised properly. Note that in the main index.twig file, I've pulled various css files using assets_url and it works just fine. Only in the case of pulling meta images from pages, %assets_url% isn't recognised properly.

[PhrozenByte]

Use Pico's url Twig filter; the link filter is for page links only.

<a href="{{ page.url }}"><img src="{{ page.meta.image|url }}"></a>

[notakoder]

To make sure that I didn't mistype anything from your previous comment, I had checked my code at least a couple of times against your comment... especially the filter. And yet I mistook the url filter for the link filter. Cognitive overflow I guess.

Small things indeed it is that eats up most of the productive time. Sorry about it and thanks again @PhrozenByte

[PhrozenByte]

No worries, don't hesitate to ask if you've any other question :relaxed: :+1:

[notakoder]

Sure and thank you. That's the attitude I appreciate the most in the Pico project.