Setting the 'Image' YAML meta variable to %assets_url% doesn't work

[gelavat]

Hello.

I am trying to add an 'Image' meta variable to display an image. This doesn't work for any reason. I am using the picocms-gallery, and if I use the following meta tag in the /content/intro.md page it works: Image: https://picsum.photos/id/1/1280/1024

However when copying an image to the /assets directory and using this meta tag it doesn't work: image: %assets_url%/stock.jpg

I double checked that the image is really there, but nothing does, the image is not displayed and there is a grey background instead.

Any idea on how to activate this image? I am interested to have a relative URL also, not including the https://mysite.com if possible.

[mayamcdougall]

If I had to guess, in this case the issue is that %assets_url% is specifically only replaced in the Markdown portion of the file, not in the YAML. If you want a relative url, you should just be able to type the actual location of your assets folder instead of using the variable (eg assets/stock.jpg if your assets folder uses the default name).

Like any url, if you don't begin it with https://, it should just act as a relative url.

This is my best guess of what's going on without actually setting up an environment to test it myself. Let me know if this doesn't fix it for you.

[PhrozenByte]

If you have custom meta header that is specifically designed to contain a URL (like image: %assets_url%/stock.jpg), you can use Pico's url Twig filter to enable the %assets_url% placeholder (and any other URL placeholder). Try {{ meta.image|url }} in your Twig template. Also see https://picocms.org/docs/#twig-filters-and-functions

[gelavat]

If you want a relative url, you should just be able to type the actual location of your assets folder instead of using the variable (eg assets/stock.jpg if your assets folder uses the default name). Like any url, if you don't begin it with https://, it should just act as a relative url.

Thank you very much, this did the trick: Image: assets/stock.jpg

It is a relative url, and the image is now properly displayed, as you said. Also I didn't get that the %assets_url% is not in the YAML and even not in the Markdown, this is only interpreted in the Twig template so that is definitely not helpful in my case. I just wanted to address the picture that is in the assets directory, but in the .md file.

Pico CMS rocks, thanks for providing this great and powerful tool!

[mayamcdougall]

Also I didn't get that the %assets_url% is not in the YAML and even not in the Markdown, this is only interpreted in the Twig template

No no, you were right before. It does get replaced in Markdown too. Just not in the YAML unless the Twig template was written with that in mind.