How do I link to static content (e.g. image) from metadata and/or a template?
danj-ca opened this issue · 2 comments
- I have searched the issues (including closed ones) and believe that this is not a duplicate.
- I have searched the documentation and believe that my question is not covered.
Issue
I want to include a "featured image" in certain articles. However, I want to determine its position in my template, not force it to appear inside the article's body. My current solution is to put the filename (or a path) as a metadata field in the article, and then reference it in my template.
So for example my article meta (in a Markdown file) might look like:
title: Some article
date: 2020-03-27T08:01:31-07:00
tags: foo,bar,baz
featured_img: this-articles-featured-image.jpg
...Article body content is here...
and the associated template contains:
... etc ...
<div class="main">
<h2 class="entry-title">
<a href="{{ SITEURL }}/{{ article.url }}" title="Permalink to {{ article.title|striptags }}" rel="bookmark">{{ article.title }}</a>
</h2>
{% if article.featured_img %}
<img class="entry-featured-image" src="../images/{{ article.featured_img }}" alt="Featured image for this post" />
{% endif %}
<hr/>
<div class="entry-content">
{{ article.content }}
</div> <!--/#entry-content-->
... etc ...
</div> <!--/#main-->
</div> <!--/#post-->
That relative URL to the image was working fine until I changed my pagination scheme from /categories/topic2.html
to /categories/topic/2/
. Now, the template can't predict what the correct relative path to an image will be (because the subsequent pages in the category are one directory deeper than the first page...).
Hopeful solution
I was hoping to resolve this by using the {static}/images/this-articles-featured-image.jpg
shorthand that works for links in the body content of articles. But it doesn't look to me like {static}
gets expanded if it appears in a metadata field or in a template.
Is there any way to do what I'm attempting?
Hello friend! So great to see you here. Welcome! 👋
Before digging into the approach you mentioned — which by the way I have definitely used myself in the past but don't remember how I handled pagination — have you perhaps tried the Featured Image plugin? Given that the only existing open issue in that repository appears related to the {static}
expansion topic you raised here, it is quite possible that plugin may not provide the solution you seek, but I thought I would at least bring it to your attention in case you hadn't seen it yet.
Fancy bumping into you here. 😏
Yeah, thank you for the suggestion but I think that plugin has the exact same problem I do (and its purpose in general is to find <img>
tags in content, which my content doesn't have).
Regarding your comment on that linked issue, I also came across _link_replacer
, and yeah, maybe that logic needs to be more comprehensive or run in a different part of the pipeline to resolve tokens like {static}
hiding in metadata. I may poke around in there more, time permitting. 🤓