[1.0] Blog post featured image

[oltodo]

Hi!

I'm trying to find a way that consists to attribute to each blog post a featured image (like in Wordpress).

By considering the following blog post example :

# /src/pages/hello-world/index.md

---
title: Hello World!
path: /hello-world
image: ./hello.jpg
---

Hello World!

I would like to be able to retrieve hello.jpg — through the Graphql query's response — in the form as /static/<hash>.png like the pictures handled by the gatsby-transformer-remark plugin.

That could able me to use it easily on listings and detail pages.

Something ready to use already exists or I have to write my own plugin ?

[oltodo]

P.S. : Thanks a lot for this great work.

[secretfader]

First of all, ensure you've installed the sharp plugins, too. Those allow Gatsby to resize and crop images as specified.

Next, you'll write a query like this one. Maybe try:

image {
  childImageSharp {
    responsiveResolution(...args) {
      src
    }
  }
}

I left out the exact arguments, but you should see some options in the linked code. Hope this helps!

[oltodo]

Thanks for your response @nicholaswyoung. This is a very good idea indeed.

However, the example you linked works with absolute URL. In my case, I would like to reference my picture using relative path to the folder where the Markdown post file (index.md) is located.

[secretfader]

@oltodo Give it a try. I think you'll find I'm correct. 😉 The same technique is being used on my blog.

[oltodo]

Lack of faith! You was right @nicholaswyoung, it works fine now. In fact, I had a slight different think in comparison to my example. The image property was not a single string containing the picture's URL but an object with src and credit fields.

---
title: Hello World!
path: /hello-world
image:
  src: ./hello.jpg
  credit: Hello World Production
---

Hello World!

I tried something like this in my Graphql query :

frontmatter {
  title
  image {
    src {
      childImageSharp {
        responsiveResolution(width: 600) {
          src
        }
      }
    }
  }
}

But I didn't have any good result.

Thanks a lot for your help!