Specifying both width and height incorrectly applies rect

[coreyward]

This library incorrectly sets the rect parameter when both width and height are specified. This prevents many fit modes from working properly. An in-depth visual comparison and breakdown of this bug is available in this CodeSandbox project. At a glance, this screenshot from the linked breakdown demonstrates the issue:

I considered stripping the rect prop from the returned urls, but it still needs to be present in two scenarios:

1. When a source has an associated crop
   The rationale here should be self-evident: rect is used to apply crop values.
2. When the fit mode is min and the source has a focal point
   This library transforms hotspot values into focal point parameters fp-x and fp-y, but due to a bug/oversight in the Images API, these parameters are only used when the fit mode is set to crop. Since the min mode is identical to crop except that the image will not be scaled up, the focal point needs to be emulated via rect (or the bug in the Images API needs to be fixed)

I believe this library should only add a rect parameter in these two scenarios, and to try to pre-compute and apply the focal point in the second case.

[johnnywalker]

Since the API is modeled after imgix's API, I believe rect is calculated incorrectly when determined from a source with crop dimensions. Sanity's API appears to treat rect as the source rectangle, and urlForImage.ts constrains the source's crop to the final aspect ratio instead.

Reference: https://docs.imgix.com/apis/rendering/size/rect

[modulareverything]

Sharing this here as it solved the problem for me:

#48 (comment)

In summary, try adding ignoreImageParams() to your image URL like so:

imageUrlBuilder.image(source).ignoreImageParams().width(300).height(50).fit('clip').url()