Images in Markdown front matter with Gatsby  📄 🖼

I showed you a neat little trick in Friday's email: referencing a markdown file from the front matter of another markdown file.

While live coding it on last week's unauthorized and rum-fueled treasure hunt, John asked an (as always) excellent question:

Would there be a use case for images in the markdown?

Link directly to the answer

Yes absolutely.

Common use-cases would be page-specific open graph images, feature images for an article, or as in our case, an image per page section.

---
sections:
  - title: About us
    md: ./about.md
    img:
      file: ./founder.jpg
      alt: Image of the founder holding a laptop
---

To get "magical" access to the image referenced, make sure to add both gatsby-plugin-sharp and gatsby-transformer-sharp. These plugins will transform all image files sourced by the gatsby-source-filesystem into ImageSharp content nodes.

You'll find the referenced image under childImageSharp. The same way referenced markdown files are available as childMarkdownRemark.

query ExampleQuery {
  markdownRemark {
    frontmatter {
      sections {
        title
        img {
          file {
            childImageSharp {
              gatsbyImageData
            }
          }
          alt
        }
        md {
          childMarkdownRemark {
            html
          }
        }
      }
    }
  }
}

 
Do you know if references to other types of files work the same way?
Please let me know if you do!

 
All the best,
Queen Raae

 
PS: Today's Live Screencast got postponed. I had forgotten my mother's Alzheimer's appointment; luckily, she had not. There's a joke in there somewhere 🤪

Stuck on a reef in the sharky waters around the Gatsby islands?

Book a 1-on-1 Gatsby Call with Queen Raae. Friendly advice you can put into action immediately, guaranteed!

Serious about Gatsby? Sign up for emails sent every weekday to help you get the most out of Gatsby!