feat(*): add options fit and background to image sharp

[VGoose]

Description

gatsby-plugin-sharp

• add fit and background options to control cropping when using fluid

gatsby-transformer-sharp

• add new ImageFitType type and add fit and background to fluidNodeType args.

Related Issues

Addresses #12972.

[wardpeet]

This is starting to look good! I added a few nits about the README.

Still need to test it myself but code looks 👌

[VGoose]

Failing ci/circleci: starters_validate

npm ERR! code ENOAUDIT
npm ERR! audit Your configured registry (https://registry.npmjs.org/) does not support audit requests.

I'm not sure how to fix this, all tests pass locally for me.

[wardpeet]

This looks good to me! Let me this one before merging

[gatsbot]

Holy buckets, @VGoose — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (Currently we’ve got a couple t-shirts available, plus some socks that are really razzing our berries right now.)
2. We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!

[tremby]

This unfortunately doesn't quite cover the use case I had in mind.

In "contain" mode, with "maxWidth" and "maxHeight" both set, I was expecting the output images to still be the source image's aspect ratio, not forced to the ratio maxWidth:maxHeight and with a background colour applied.

Example:

• Source images are various sizes and aspects. A particular one is 2000x1000 pixels (2:1) ratio. Another is 1000x2000 pixels (1:2 ratio).
• We want to show them all in a grid of squares (1:1 ratio), but want to see the original aspects within those squares. Those squares are a presentation concern -- my HTML/CSS will deal with that. I just want suitably-sized images.
• We request fluid images with maxHeight 200, maxWidth 200, contain mode.

I expected the output for these particular images to be 200x100 pixels (along with smaller and bigger versions for different size viewports and pixel densities, eg 100x50, 150x75, 300x150, 400x200) and 100x200 pixels (along with smaller and bigger versions): the original aspect ratios, but with the "canonical" size fitting within the 200x200 I specified as maximum.

But with this patch I get two 200x200 images with black bars baked in (along with smaller and bigger versions, all with black bars).

It looks like the background could be set to transparent so you don't get actual black bars, but you're still changing the aspect of the output image from the images' source aspects, which to me is undesirable. Imagine for example another scenario where instead of showing these images in a grid they're floating in a block of text, and you want the text to flow around them.

[VGoose]

@tremby thanks for the clear example!

When I was making this PR I left inside and outside out because I didn't really understand the use case but now I think you're describing what inside is. I was also trying to keep my first PR small and so less prone to errors. I think this should be easy to add; I'll take a stab at it soon.

**Note for others who might read this: with contain, you can specify the backgroundColor and can make it any color or transparent to avoid the default black bars.

[tremby]

That's a really useful link.

Yes, what I'm looking for and would have expected for "contain" is what they call "inside". I expect there are valid use cases for both, and I see no reason to break from their terminology. :)

While I can't think of a use case for "outside" off the top of my head, I do imagine one exists!

[wardpeet]

@tremby this is still a great addition and another pr could define those other 2 props. @VGoose mind taking this one? 😄

[VGoose]

Yep! I'll submit a PR once it gets completed.