Add better support for gatsby-plugin-sharp. about gatsby-advanced-starter

[VdeVentura]

Is this related to the issue I was talking with you about using the plugin to display cover images (set in frontmatter, instead of referencing external images) in the post listing?

Something among the lines of this:

[Vagr9K]

It is related but not limited to.
I want to add some general mechanisms to generate responsive images and embed them into HTML.

Unfortunately, no time to do that.

[arcdev1]

using the plugin to display cover images (set in frontmatter, instead of referencing external images) in the post listing?

This functionality is already available with gatsby-image.
https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image

Steps to enable:

1. Install dependencies

npm install gatsby-image --save
npm install gatsby-transformer-sharp --save

2. Add plugin to gatsby-config.js

plugins: ['gatsby-transformer-sharp']

3. Create an images folder under sample-posts

sample-posts
 /images

4. Add some images to the new images folder

5. Modify the cover property in the frontmatter of all blog posts to point to a local image

cover: "../images/some-image.jpg"

6. Modify the queries in pages/index.jsx and templates/post.jsx to include the childImageSgarp node

cover
  {
    childImageSharp{
     sizes(maxWidth: 720, maxHeight: 400) {
        ...GatsbyImageSharpSizes
      }
    }
  }

7. Import gatsby-image in templates/post.jsx

import Img from 'gatsby-image'

8. Add an Img element to templates/post.jsx

<Img sizes={post.cover.childImageSharp.sizes} />

You can found out more about the options for childImageSharp at:
https://image-processing.gatsbyjs.org

Hope that helps!

[Vagr9K]

Fixed in #33.