Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How do I link to static content (e.g. image) from metadata and/or a template? #3303

Open
2 tasks done
danj-ca opened this issue May 9, 2024 · 2 comments
Open
2 tasks done
Labels

Comments

@danj-ca
Copy link

danj-ca commented May 9, 2024

  • 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?

@justinmayer
Copy link
Member

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.

@danj-ca
Copy link
Author

danj-ca commented May 9, 2024

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. 🤓

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants