Access frontmatter data elsewhere #3209

thatshubham · 2024-02-20T14:28:53Z

thatshubham
Feb 20, 2024

Hello, I'm a bit stuck. I can access a custom frontmatter key-value pair in some files but not in others in the same subdirectory. Why? suggestions?

Here's the deal. I have a blog post. It has the following front-matter:

---
title: "Title"
date: "2024-01-14"
layout: layouts/post.html
img: /assets/img/cover.jpg
---

On the home page, I have a list of all my blogs with the img in the card. Currently, I import the image in the list of cards using

<ul>
    {% set latest_posts = collections.posts %}
    {% for post in latest_posts %}
    <li>
      <div>
        {% set img = post.data.img %} 
        <img class="object-cover w-full h-40" src="{{img}}"> <--- like so
        <a href="{{ post.url }}" role="link">{{ post.data.title }}</a>       
      </div>
    </li>
    {% endfor %}
</ul>

This works perfectly.

But I also want to use the same cover image when the post is opened. So I try to include it in the layout file like so:

<!DOCTYPE html>
<html lang="en">
  <head>
    {% include "head.html" %}
  </head>
  <body class="container mx-auto">
       {% set img = post.data.img %}
      <img src="{{ img }}" class="w-screen object-cover"   alt="" />    <--- Don't work

      <div class="fixed top-0 left-0 z-10 w-full">
      {% include "components/navbar.html" %} 
      </div>   

      {% block content %} {{ content |  safe }} {% endblock %}

      {% include "components/footer.html" %}

  </body>
</html>

The src in the img is always empty. What can I do to fix this?

Answered by pdehaan

Feb 20, 2024

Not sure if post would be defined in your layout, outside the scope of the home page's for..in loop.
Wouldn't it just be {{ img }} in the layout and not try setting it:

-       {% set img = post.data.img %}
        <img src="{{ img }}" class="w-screen object-cover"   alt="" />

Although that wouldn't work if you use that layout but didn't happen to have img frontmatter for that page.

View full answer

pdehaan · 2024-02-20T19:54:42Z

pdehaan
Feb 20, 2024
Collaborator

Not sure if post would be defined in your layout, outside the scope of the home page's for..in loop.
Wouldn't it just be {{ img }} in the layout and not try setting it:

-       {% set img = post.data.img %}
        <img src="{{ img }}" class="w-screen object-cover"   alt="" />

Although that wouldn't work if you use that layout but didn't happen to have img frontmatter for that page.

1 reply

thatshubham Feb 21, 2024
Author

Wow, I was being dumb. You are correct, there was no definition of the posts' collection on the layout. After a long day, it simply didn't occur to me. Simply referencing the {{ img }} worked just as intended. Thank you Peter!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Access frontmatter data elsewhere #3209

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Access frontmatter data elsewhere #3209

thatshubham Feb 20, 2024

Replies: 1 comment · 1 reply

pdehaan Feb 20, 2024 Collaborator

thatshubham Feb 21, 2024 Author

thatshubham
Feb 20, 2024

Replies: 1 comment 1 reply

pdehaan
Feb 20, 2024
Collaborator

thatshubham Feb 21, 2024
Author