feat(gatsby-transformer-sharp): add inside and outside fit options

[VGoose]

Description

Add inside and outside options

Related Issues

Addresses #12972

[DSchau]

Could you provide a sample use case for this and/or project configured to use these options?

[VGoose]

Here's a use case for inside #13078 (comment).

outside: resizing images to be at least a minimum dimension

[VGoose]

I'm thinking of moving fit and background options from the fluid method to shared options that can be used by resize and fixed. I remember thinking about this for PR #13078 but then deciding against it. I can't remember why..

Would love some feedback on this point.

[pieh]

I think we will need to make more changes than just adding those options in transformer - it seems like inside and outside forces different aspect ratio, than one that would be calculated by gatsby itself

[VGoose]

Could you clarify what you mean by gatsby itself?

Sharp is making the correct image sizes with inside and outside as far as I can tell from inspecting the static folder. As for displaying the image correctly with gatsby-image, I was thinking we could handle that with documentation.

[pieh]

Could you clarify what you mean by gatsby itself?

Sharp is making the correct image sizes with inside and outside as far as I can tell from inspecting the static folder. As for displaying the image correctly with gatsby-image, I was thinking we could handle that with documentation.

I think I might misunderstood what fit options do in sharp (it would be super helpful if sharp docs had images to showcase what the option does :D), for now please discard my comment (at least until I ran some tests)

[pieh]

Ok, I was actually correct (that's new :D):

Input image here was 4823 x 7234 (~portraity aspect ratio). I've run sharp using all fit options and using square width/height for resize (570x570)

the cover, contain and fill options all produce same output width/height, but inside and outside modifies it to maintain aspect ratio of input image.

We calculate width/height (for fixed/resize) or aspectRatio (for fluid) in gatsby-plugin-sharp so gatsby-image can size DOM elements properly. So sharp will produce images like you would expect, but gatsby-image still would use square aspect ratio (because of information it got from gatsby-plugin-sharp)

[VGoose]

I think inside can be applied across the 3 methods without any code changes except for documentation.

Both the width/height (for fixed/resize) or aspectRatio (for fluid) behave naturally, creating a "frame" around the image. While the image is a different aspect ratio, the "frame" is controlled by the respective input.

We can make outside only be available for resize, the width/height (for fixed/resize) or aspectRatio (for fluid) would not be meaningful if this was applied to fluid or fixed.

[pieh]

Hmm, but won't end result (if we don't change width/height and aspectRatio calcs) look exactly the same for cover, inside and outside fit options?

[VGoose]

Good point! Right now gatsby-image's Img has default objectFit: 'cover'. If we pass imgStyle={{ objectFit: 'contain' } to its props we get the desired result.

I was thinking of adding documentation to point this out because gatsby-image doesn't get the fit option information from gatsby-plugin-sharp currently.

[pieh]

Hey @VGoose. Did you have any time to work more on this or do you think you will have time to finish this Pull Request? We would love to have this feature in. Let us know if you need any help with finishing this up 💜 💪 !

[VGoose]

Hi @pieh, I recently got a new job and currently don't have the bandwidth to do this :(. It's something I really want to add but unfortunately I really can't commit to it right now. 💔

[pieh]

Hi @pieh, I recently got a new job and currently don't have the bandwidth to do this :(. It's something I really want to add but unfortunately I really can't commit to it right now. 💔

That's totally understandable - we appreciate effort you put in this and Your previous PRs 💜 💪. For now let's close the PR if you don't have bandwidth to work on this - we can always reopen it later on.

[chris-hammond]

Hi @pieh, Hi @VGoose,

I've been waiting for the PR to merge since April! What needs to be done to finish it? From your conversation, it sounds like it's just documentation changes that remain? Or were you planning on trying to pass the fit option from gatsby-plugin-sharp to gatsby-image?

I'm happy to do the work to get this ready to merge, but I'd appreciate guidance from the two of you on the path we want to take!

[VGoose]

Hi @chris-hammond, from my last conversation with @pieh, we wanted to ship these options for all three methods. There are a few small issues but the main issue is that is blocking this (for me) is fluid's arguments (maxWidth and maxHeight) need to be ironed out first.

With fit set to outside, the final image actually can be higher thanmaxWidth and maxHeight. There needs to be documentation for what exactly the intent of these arguments are or a maybe even a renaming (internally a fluid call is using sharp's resize method - gatsby does some transformations of mW and mH before passing it as width and height to resize).