gatsby-image: setup image processing pipeline

Question

I'm working on the Gatsby.js website and would like to setup images pre-processing with gatsby-image and gatsby-plugin-sharp. The problem is that the images I use have different aspect rates and different dimensions. What I'm trying to achive is square fluid thumbnails generated automatically. So far I managed to use fluid in my GraphQL queries, but unfortunately it crops the image. I also tried fit parameter form gatsby-plugin-sharp doc but it looks like it was removed some time ago:

image {
  relativePath
  childImageSharp {
    fluid(maxWidth: 320, maxHeight: 320, cropFocus: CENTER) {
      ...GatsbyImageSharpFluid
    }
  }
}

The result: Expected result:

The source image is square - 2480x2480 px.

So i wonder if there is a way to setup multiple steps of the image processing - resize first to 2x or 3x of needed dimension, and make it fluid after that?

My dependencies from package.json just in case:

"gatsby": "^2.2.8",
"gatsby-image": "^2.0.41",
"gatsby-paginate": "^1.0.17",
"gatsby-plugin-google-tagmanager": "^2.0.10",
"gatsby-plugin-layout": "^1.0.13",
"gatsby-plugin-less": "^2.0.12",
"gatsby-plugin-manifest": "^2.0.24",
"gatsby-plugin-netlify-cms": "^3.0.16",
"gatsby-plugin-netlify-cms-paths": "^1.2.1",
"gatsby-plugin-offline": "^2.0.25",
"gatsby-plugin-react-helmet": "^3.0.10",
"gatsby-plugin-sharp": "^2.0.32",
"gatsby-remark-images": "^3.0.10",
"gatsby-remark-relative-images": "^0.2.2",
"gatsby-source-filesystem": "^2.0.28",
"gatsby-transformer-remark": "^2.3.8",

WinterShadow WinterShadow · Accepted Answer · 2019-05-20T16:17:18

I was able to resolve my issue:

fit was added in [email protected] and I was using 2.0.32. So npm update helped with it.
I was wrong that my source image is square. It's vertical and that's why the result image is cropped.

So that eliminates the need of multiple steps processing for my thumbnails.

gatsby-image: setup image processing pipeline

1 Answers