Gatsby: Adding an image/thumbnail field to the frontmatter of a post

[eur2]

Hello, I’ve completed the tutorial how to build a blog with Gatsby. Now I’m trying to build my portfolio. I would like to add an image/thumbnail field to the frontmatter of a post. I’m struggling on it for a week now. Anyone has an quick explanation? Do I need to use the package « gatsby-plugin-sharp »?
Many Thanks!

Here is an exemple of the frontmatter of the index.md:

title: "Post1"
date: "2017-06-01T22:12:03.284Z"
path: "/post1/"
image: "./thumbnail.jpg"

---

Here is the index.js:

import React from 'react';
import Link from 'gatsby-link';
import Helmet from 'react-helmet';

export default function Index({
  data
}) {
  const { edges: posts } = data.allMarkdownRemark;

  return (
    <div className="blog-posts">
      {posts
        .filter(post => post.node.frontmatter.title.length > 0)
        .map(({ node: post }) => {
          return (
            <div className="blog-post-preview" key={post.id}>
              <h1>
               <Link to={post.frontmatter.path}>{post.frontmatter.title}</Link>
              </h1>
                <Link to={post.frontmatter.path}><img src={post.frontmatter.image} alt=""/></Link>
            </div>
          );
        })}
    </div>
  );
}


export const pageQuery = graphql`
  query IndexQuery {
    allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
      edges {
        node {
          excerpt(pruneLength: 250)
          id
          frontmatter {
            title
            date(formatString: "MMMM DD, YYYY")
            path
            image
          }
        }
      }
    }
  }
`;

[PolGuixe]

@roberpoldo I am using gatsby-plugin-sharp and it works

[PolGuixe]

I am using it this way:

{markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
        description
        thumbnail {
          childImageSharp {
            responsiveSizes(maxWidth: 400) {
              src
              srcSet
              sizes
            }
          }
        }
      }
    }
}

[danistefanovic]

gatsby-transformer-sharp is needed to replace the File nodes with ImageSharp nodes so that the image referenced in the front matter block is copied to the public folder. This plugin is needed to make the above GraphQL query work.

[eur2]

Many thanks Pol & Daniel! It works!
Now I will try to add lazy-loading to this thumbnails…

[eur2]

@PolGuixe I have used your solution but the responsive image doesn't really work. It's always the same ize that is served whatever the size of the screen…
As it is the homepage with a lot of images, I would like to optimize it now. I have tried also to add the responsiveResolutionmethod and some parameters (also base64) but it didn't change anything. Do you have any idea (and also to implement the "blur-up")?
Big thanks!

[eur2]

Solved!
<img src={post.frontmatter.image.childImageSharp.responsiveSizes.base64} width="100%" data-src={post.frontmatter.image.childImageSharp.responsiveSizes.src} data-srcset={post.frontmatter.image.childImageSharp.responsiveSizes.srcSet} data-sizes={post.frontmatter.image.childImageSharp.responsiveSizes.sizes} className="lazyload" alt={post.frontmatter.title}/>

[cedricdelpoux]

Hello,
I don't understand why my image in frontmatter is not converter into imageSharp node.

my query:
```query a {
allMarkdownRemark {
edges {
node {
frontmatter {
cover {
childImageSharp {
resolutions(width: 400) {
width
height
src
srcSet
}
}
}
}
}
}
}
}

I have this error: `Field \"cover\" must not have a selection since type \"String\" has no subfields."`

My markdown file is:
```md 
---
cover: ../images/image1.jpg
---
content

And I enabled the two plugins:

`gatsby-plugin-sharp`,
 `gatsby-transformer-sharp`,

[cedricdelpoux]

Ok I found a solution here

I had an ampty cover field in an other file. Strange behavior

[likarajo]

Add the following in gatsby-config.js

{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: "gatsby-remark-normalize-paths",
options: {
pathFields: ["image"],
},
}
]
}
}

[cedricdelpoux]

@likarajo It's awesome that you give me a solution with the plugin gatsby-remark-normalize-paths I developed myself 😄

[sudheerkaushik]

To anyone going crazy like I was going, double check the path of "thumbnail" defined in any of your markdown page of your post.

--

--

Referencing wrong image link also creates this issue.