Auto-Optimize Images On MY Gatsby Site

@ 2020-03-17

Update @ 2020-03-21:

Another thing: gatsby-remark-images can't support GIFs or SVGs. I use the gatsby-remark-copy-linked-files plugin to render those type files.

Update @ 2020-03-18:

I restructured again and put markdown files and images both under ./content/ folder. The content/ folder is directly under the root. Just a minor change.

- content/
  - posts/
    - artilce1.md
  - images/
    - pic-of-article1.jpg
- src/
- static/

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: 'posts',
        path: `${__dirname}/content/`
      }
    }
  ]
}

=== Here's the whole story ===

#100DaysOfGatsby Challenge 3

Today I followed #100DaysOfGatsby Challenge 3 to optimize the images on my site. In the beginning, it drove me crazy.

I structured my code like this at first:

- content/
  - posts/
    - article1.md
    - article2.md
- src/
  - components/
  - pages/
    - index.js
    - about.js
  - scss/
  - templates/
- static/
  - images/
    - pic-of-article1.jpg
    - pic-of-article2.jpg

And the frontmatter in markdown files like this:

<!-- content/posts/article1.md -->
---
title: This is the title of article1
hero: pic-of-article1.jpg
---

The configures in gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: 'posts',
        path: `${__dirname}/content/post/`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: 'images',
        path: `${__dirname}/static/images/`
      }
    }
  ]
}

I used the plugin gatsby-source-filesystem to sourcing data, and it all worked fine until I started to use gatsby-image to optimize images.

When I follow the document to configure gatsby-image I couldn't get the images.

export const query = graphql`
    query PostContent($pathName: String!) {
        markdownRemark(frontmatter: { path: { eq: $pathName } }) {
            frontmatter {
                title
                hero {
                    childImageSharp {
                        fluid {
                            ...GatsbyImageSharpFluid
                        }
                    }
                }
        }
    }
`

The error message showed up:

Field \"hero\" must not have a selection since type \"String\" has no subfields.

I can't find the right solution for this until I restructured my code as same as in the document. Putting the markdown files in /src/pages/ and the images in /src/images/.

- src/
  - components/
  - pages/
    - index.js
    - about.js
    - article1.md
    - article2.md
  - scss/
  - templates/
  - images/
    - pic-of-article1.jpg
    - pic-of-article2.jpg

<!-- src/pages/article1.md -->
---
title: This is the title of article1
hero: ../images/pic-of-article1.jpg
---

Then the hero image automatically attached to the markdown node and everthing works fine!

I think the right way to do anything is just to follow the documents exactly and change my own habits.

Auto-Optimize Images On MY Gatsby Site

#100DaysOfGatsby Challenge 3

Other Reading Materials

More Posts

Display Image's Caption in Gatsby

#100DaysOfGatsby Challenge