Access variables in Md header files

[Majstor]

Hi,

I would like to use variables in header of my markdown files (like "base_url"). I tried but it doesn't return the content but just the variable's name. Is this a bug or maybe we can find a workaround ?

[mayamcdougall]

Hi @Majstor,

Not sure based on your comment if you're writing your own Twig template or using an existing one, but you'll need to run the header item through Pico's URL filter if you want the variables replaced.

This would look something like {{ my_header_item|url }} in your twig template.

I'd be happy to help more if you need it. Just give me some more context and I can walk you through everything. 😉

[Majstor]

Hi,

Thanks and sorry, i'm going here : I use the dimension theme. I can variables like %base_url% right in the "body" of the Md file, not in the header (between the double "---"), sorry i'm not sure if i'm clear.

[mayamcdougall]

Sorry, I didn't notice you replied right away.

You were clear before, but I guess I wasn't.😅

So, by default, these variables, like %base_url% don't get replaced in markdown headers. That's just Pico's default behavior. They're passed along, as-is, to the theme and it's up to the theme to do the replacing via the url filter if needed.

Typically, this would be done by the author for whichever fields they were expecting a url in. For Dimension, I only see this being done to the image header. (On top of that, it seems like it was only added more recently, by another user: https://github.com/BesrourMS/dimension/commit/5fcb7da32260ca375c8fb4e92b0b257dae55c7a1).

Which header item are you trying to use %base_url% in? I can tell you what line to change in themes/dimension/index.twig to fix it for you.

I think I'll also put in a Pull Request with @BesrourMS to add it to all of them for the future, lol. 😜

Actually, for that matter, since it's likely either the form or social links, here are the relevant changes for those (note the addition of |url on the relevant items):

Form, Line 67:

<form method="post" {% if meta.form %} action="{{ meta.form|url }}" {% endif %} >

(Also adding an If statement here because I noticed on a recent project that HTML Validation doesn't like you having an empty form action. It's probably not really necessary though, and there could be other errors in the theme anyway, lol.)

Social Links, Line 88: <li><a href="{{ link|url }}" class="icon fa-{{ icon }}"><span class="label">{{ icon }}</span></a></li>

If it's either of those two items, adding the |url should give you the behavior you're looking for. If not, let me know and we can take it from there. 😉

Edit: Already opened that PR with these changes, but it might not be merged for a bit, so feel free to try editing these lines yourself in the meantime.

[Majstor]

Hey great response, i like :) I use Pico like Nextcloud extension, maybe it differs sometimes. To be more clear, i would like to let users to put their own css if they want, and i modified the dimension's twig with this :

        {% if meta.css is defined %}
        <link rel="stylesheet" href="{{ meta.css }}" />
        {% endif %}

So, the user in the index.md should put one line for inserting his css like this : Css: %assets_url%/custom.css But it returns the variable name in the html code.

[mayamcdougall]

lol, yes, I've done that a lot with themes in the past. I try to include a custom CSS option like that every time. 😉

Just change it from {{ meta.css }} to {{ meta.css|url }} and it should solve your problem.

Again, it's just how Pico works. Unlike with your content, they aren't automatically replaced in the metadata headers.

Content gets a little more pre-processing before it ends up in the {{ content }} tag, which includes replacing those variables, parsing the markdown into HTML, etc. Metadata headers on the other hand are pretty much exposed as-is, with the YAML being directly converted into an array you can access from your Twig template.

Whenever you want the %base_url%, %assets_url%, etc variables replaced in a string, such as those that get generated from your metadata headers, just run them through that URL Filter (|url).

Alternatively, on some of my older themes, I used to hardcode it as {{ base_url }}/{{ meta.css }}, but I really don't recommend using that option unless you need to. Using {{ meta.css|url }} is much more versatile in just about every use case (and it's what I use on my more modern work too).

---

Our Docs are a bit dense and hard to read at the moment. We've wanted to clean them up for ages now, but our volunteer time is unfortunately limited. Still, they can be a good resource if you can manage to sift through them. 😅 (And Ctrl+F is your friend! We'll get them cleaned up someday... 😒)

Another great resource if you're doing any theming are the Twig Docs. I just about always have them open in a tab if I'm doing any Pico theming. I can't recommend them enough as a resource.

---

Let me know if this works for you. If it doesn't for some reason, I'd be happy to keep troubleshooting it with you. 😁

And if you have any other questions, don't be afraid to ask!

[Majstor]

OK I will keep all this in mind thanks ! Sorry if it's not in right place to ask those things !

[mayamcdougall]

No worries, this is absolutely the right place to ask things. 😉

Our Issues Tracker acts as our catch-all for bug reports, support requests, discussions, and everything else.

Were you able to get your CSS code working? Just curious. 😜

[Majstor]

Hey, I will put here or somewhere when i'ill finish. Even i try to modify some themes of Besrour's themes, i love them, he did a nice job. When i started to try Pico (excellent CMS in my eyes), i was disapointed to see many themes aren't been updated for a long time. I'll publish certainly my modification.

[mayamcdougall]

When i started to try Pico (excellent CMS in my eyes), I was disappointed to see many themes aren't been updated for a long time.

Yeah, it's unfortunately that's how most of them have been. Users tend to develop a theme once, post it on GitHub, then move on to newer projects. (I'm also guilty of this, with many of my themes being overdue for some care 😅).

Every theme in the gallery should still "work", but the bar is pretty low at the moment. Most of them could really use some more polish.

@BesrourMS's themes are pretty good, lol. They're mostly ports from bigger HTML template sites/creators. Since they are some of the better looking themes in our gallery, I plan to go through and revise these ports someday. I'd like to bring them a little more inline with what I'd like to see the "standard" be in terms of quality, usability, documentation, etc for our themes. Almost all the themes available for Pico have some kind of paper cuts or rough edges when it comes to usability.

In reality though, I've got plenty of my own themes I've got to improve before I get around to revising other peoples. 😒😅

If you do make some decent improvements to Dimension, or any of his other themes, I'd encourage you to open a PR with @BesrourMS, he's usually pretty quick at responding to Issues and Pull Requests.

And if you find yourself getting into Pico theming at all, go check out some of the free HTML website templates you can find online. Depending on the template it can be super easy to make these Pico compatible, and we'd always love to see more themes come to our gallery. 😉

[BesrourMS]

Hi @mayamcdougall , I found this website : untree.co, All html templates of Untree.co are licensed under the Creative Common Attribution 3.0 Unported (CC BY 3.0)

[mayamcdougall]

Very nice!

They're a bit too corporate-y looking for my taste, but they could still be a good resource.

Maybe I should make a list of these sites on either the website or the wiki at some point . 🤔

Something like "Looking for inspiration? Check out these template sites:" with links to some of the sources we've used, like HTML5 UP!, Start Bootstrap, FreeHTML5.co, Untree.co, etc.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in two days if no further activity occurs. Thank you for your contributions! :+1: