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.

  - title: About us
    md: ./
      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 {
        img {
          file {
            childImageSharp {
        md {
          childMarkdownRemark {

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 🤪

Interested in more daily treasures like this one?
Sent directly to your inbox?