using frontmatter as data in 11ty

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!

Solution

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 class="mt-10 -mx-7 md:mx-0">
   <img class="w-full max-w-2xl mx-auto" 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 the post.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 the src for the image and then simply utilize thumb from each post template instead of introducing extra logic in a data file.

<!-- layouts/post.liquid -->
<html>
  <body>
     <div class="featured-img-container">
        <img src="/assets/img/{{ thumb }}" alt="Some alt text">
     </div>
  </body>
</html>