[gatsby-plugin-sharp] Fluid image with specified aspect ratio

[missmatsuko]

Summary

Is there a way to force a crop/aspect ratio using fluid?
I want to create a set of image cropped to squares to use as thumbnails.
I could use resize, but that only provides one src with the exact height and width provided.
I could use fixed, which is a bit better because it creates srcs for different pixel densities, but that doesn't consider the image could be displayed at different sizes depending on the viewport.

Relevant information

https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/

Environment (if relevant)

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[wKovacs64]

You could probably just trample fluid's aspectRatio with your own:

<Img fluid={{ ...image.fluid, aspectRatio: 1 }} />

[missmatsuko]

That will change how the image is displayed with CSS, but not the aspect ratio of the actual image file. So it kind of works, but then I'm probably going to load a bigger image than I need to, so part of it gets hidden rather than an actual cropped image.

[wardpeet]

At the moment there is not a real fix for this I guess you could simulate it with multiple GraphQL queries?

query {
    placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
      childImageSharp {
        resize(width: 300, height: 250) {
          src
          width
          height
        }
      }
    }

    placeholderImageBig: file(relativePath: { eq: "gatsby-astronaut.png" }) {
      childImageSharp {
        resize(width: 600, height: 500) {
          src
          width
          height
        }
      }
    }
  }

If you can give us some more context and perhaps a reproduction that might help us answer your issue.

[missmatsuko]

Hi @wardpeet

I'm starting to think this may be more of a feature request than a question, then.

I'm wanting to get a set of images (I guess it's called GatsbyImageSharpFluid ?) to pass into a gatsby-img component. I think creating multiple images with resize will make it more challenging to use gatsby-img since I can't pass the result in directly.

Fluid has options for maxWidth and maxHeight, to constrain the image dimensions, but there doesn't seem to be a way to crop the image to a desired aspect ratio.

One use case I can think of is a gallery of images with thumbnails. I'd like to produce square thumbnails from the original images which can be clicked to view the full image. The thumbnail grid is responsive, so I don't want to use fixed or resize. I'd also prefer not have to manually create the different crops of the same image.

Here's an example of the kind of thing it would be good for, in case my explanation wasn't very clear: https://www.zomato.com/vancouver/suika-fairview-vancouver/photos

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[missmatsuko]

This issue is not stale.

[missmatsuko]

I don't know if these labels apply anymore, either:

status: needs more info
status: needs reproduction
type: question or discussion

I think this is a feature request now.

[VGoose]

So I did some digging, and you can set aspect ratio with fluid. It's not explicitly stated in the docs but if you set both maxWidth and maxHeight, it will respect the ratio.

When both options are set, the width of each image is set to maxWidth * breakpoint factor (size).
And the height is set to width * maxHeight/maxWidth.

  //line 442 of gatsby-plugin-sharp/src/index.js
  const dimensionAttr = fixedDimension === `maxWidth` ? `width` : `height`
  const otherDimensionAttr = fixedDimension === `maxWidth` ? `height` : `width`
  const images = sortedSizes.map(size => {
    const arrrgs = {
      ...options,
      [otherDimensionAttr]: undefined,
      //WIDTH SET HERE
      [dimensionAttr]: Math.round(size),  
    }
    //IF BOTH MAXWIDTH AND MAXHEIGHT SET
    if (options.maxWidth !== undefined && options.maxHeight !== undefined) {
      //HEIGHT SET HERE
      arrrgs.height = Math.round(size * (options.maxHeight / options.maxWidth))
    }

    return queueImageResizing({
      file,
      args: arrrgs, // matey
      reporter,
    })
  })

Should we update the docs to explicitly state this? I previously thought this wasn't possible as well.