using frontmatter as data in 11ty

Question

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!

Just to clarify as I'm not exactly sure what your trying to do here. Do you want to dynamically generate the value for `thumb` in frontmatter and then use it like later in a Markdown file or another template? — Tanner Dolby, Feb 23 '22 at 22:11
@TannerDolby Yes, I want to put the image location in the frontmatter and then use it in the src as you have done in your example. So I can already do this with the title for example `post.data.title` in an h1 would show the post title. — Xoog, Feb 23 '22 at 22:14
Ok that helps a little bit more. Can you provide a more reproducible example in your question? Like how exactly your trying to use `{{ thumb }}` in your template or how exactly your trying to render from `post.data`. I feel like I'm still having a tough time understanding what your trying to do. — Tanner Dolby, Feb 23 '22 at 22:18
@TannerDolby I've updated my question but here is the code `` — Xoog, Feb 23 '22 at 22:23
Thank you. I can provide you a solution for keeping track of a featured image amongst a collection of posts, but I wanted to make sure that is what you were trying to do. And is that `` in a .md or .njk/.liquid file? — Tanner Dolby, Feb 23 '22 at 22:25
I will answer in a moment, the link you provided simplified your question and helped me to understand how to help you. Thank you! — Tanner Dolby, Feb 23 '22 at 22:28
@TannerDolby Really appreciate that! I have pushed my code to github if you'd like to take a closer look at anything. The link is in the post. — Xoog, Feb 23 '22 at 22:52

Tanner Dolby · Accepted Answer · 2022-02-23T23:00:08.543

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>

using frontmatter as data in 11ty

1 Answers1