I need some help setting a featured image frontmatter parameter. I've been trying for hours to get this working and can't seem to figure it out.
---
title: My post
date: 2020-02-23
published: true
thumb: '/assets/img/img.jpg'
tags:
- Tag 1
- Tag2
---
This is my markdown code. What I'm trying to do on my posts page is show the featured image, but when the code renders the src of the image shows as (unknown). The code I'm using to generate this is post.data.thumb
.
<img src="{{ post.data.thumb }}" alt="Some alt text">
I have been looking through some of the repos for the 11ty starter blogs and a few of them have a lot of custom frontmatter, but I can't see in any of their files where this is being configured to work.
I have tried using eleventyComputed
which didn't seem to work. I have also tried using a posts.11tydata.js file in my posts folder which also didn't do anything. I suspect this might be something easy, but I've spent hours looking at it and I'm completely lost at this point.
module.exports = {
layout: 'post',
title: 'Untitled',
eleventyComputed: {
permalink: (data) => `${data.page.fileSlug}/index.html`,
thumb: (data) => {
if (data.thumb) {
if (data.thumb.search(/^https?:\/\//) !== -1) {
return data.thumb;
}
return `/assets/img/${data.thumb}`;
} else {
return false;
}
}
} };
Here is a working example of what I'm trying to achieve, but I can't figure out why theirs works and mine doesn't.
Here is the link to my project on github if you would like to take a closer look
Any help is appreciated!
CodePudding user response:
In the example you provided, they have a collection of posts as Markdown files where each post (.md
) file has a thumb
field defined in frontmatter representing an image thumbnail name. Each post in the "posts" collection utilize the post.njk layout, and this is where that frontmatter data from each post will be utilized:
{% if thumb %}
<div >
<img src="{{ thumb | url }}" width="960" height="500" alt="This post thumbnail">
</div>
{% endif %}
They (the example repo you linked) use JavaScript Data Files to prepend "/assets/img/" to the thumb
value and then end up with "/assets/img/${data.thumb}" via posts.11tydata.js to use in the layout post.njk
file. This works but its a bit complicated for simply utilizing frontmatter data in the parent layout.
I would recommend the following:
- Define the
thumb
field in frontmatter as just the image name for each Markdown/Liquid template that you will be passing to thepost.liquid
or.njk
layout file.
post-one.md
---
title: Post One
date: 2020-02-23
layout: post.liquid
published: true
thumb: foo.jpg
tags:
- tag1
---
{{ thumb }} is foo.jpg
post-two.md
---
title: Post One
date: 2020-02-23
layout: post.liquid
published: true
thumb: bar.jpg
tags:
- tag1
---
{{ thumb }} is bar.jpg
- In the layout that your "posts" are utilizing, i.e.
src/_includes/layouts/post.liquid
, prepend the "/assets/img/" to thesrc
for the image and then simply utilizethumb
from each post template instead of introducing extra logic in a data file.
<!-- layouts/post.liquid -->
<html>
<body>
<div >
<img src="/assets/img/{{ thumb }}" alt="Some alt text">
</div>
</body>
</html>