gatsby-image: настройка конвейера обработки изображений

Question

Я работаю на веб-сайте Gatsby.js и хотел бы настроить предварительную обработку изображений с помощью gatsby-image и gatsby-plugin-sharp. Проблема в том, что изображения, которые я использую, имеют разный формат изображения и разные размеры. То, что я пытаюсь достичь, - это квадратные миниатюрные изображения, генерируемые автоматически. До сих пор мне удавалось использовать fluid в моих запросах GraphQL, но, к сожалению, это обрезает изображение. Я также пробовал fit параметр формы gatsby-plugin-sharp документ, но похоже, что он был удален некоторое время назад:

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

Результат: Ожидаемый результат:

Исходное изображение квадратное - 2480x2480 px.

Так что мне интересно, есть ли способ настроить несколько этапов обработки изображения - сначала измените размер до 2x или 3x необходимого размера и сделайте его плавным после этого?

Мои зависимости от package.json на всякий случай:

"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",

Answer 1

Мне удалось решить мою проблему:

1. fit был добавлен в gatsby-plugin-sharp@2.0.34, и я использовал 2.0.32. Так что npm update помогло с этим.
2. Я был неправ, что мое исходное изображение квадратное. Он вертикальный, и поэтому результирующее изображение обрезается.

Так что это избавляет от необходимости многоэтапной обработки моих миниатюр.