Next.js Conf 2024: Your app should be Live by Default – Watch Keynote

How to output a rectangle image using the image client library in Sanity.io

9 replies
Last updated: Jul 22, 2021
Hey how do I always output a rectangle image using the image client library? I have pack shots of products that are always in a random size with a transparent background. I want the output image to be square though in a fixed size, where the product is fully visible. For some reason the image is always cropped, no matter what property I use for the “fit” parameter.
Original image:
https://cdn.sanity.io/images/mxqn1342/develop/cf033ca4c0dac8c511d2603912dc5bae94ab6008-1524x2200.png Output image using client library (
product.image.size(800, 800).fit('fillmax').auto('format').url()
): https://cdn.sanity.io/images/mxqn1342/develop/cf033ca4c0dac8c511d2603912dc5bae94ab6[…]0.png?rect=0,338,1524,1524&w=800&h=800&fit=fillmax&auto=format Output image using client library (
product.image.size(800, 800).fit('clip').auto('format').url()
): https://cdn.sanity.io/images/mxqn1342/develop/cf033ca4c0dac8c511d2603912dc5bae94ab6[…]2200.png?rect=0,338,1524,1524&w=800&h=800&fit=clip&auto=format
Any ideas?
Jul 8, 2021, 9:04 AM
Hi Maarten, something like this should work -
fillmax
without the
rect
and with a
bg
specified to fill the excess space in the image: https://cdn.sanity.io/images/mxqn1342/develop/cf033ca4c0dac8c511d2603912dc5bae94ab6008-1524x2200.png?w=800&h=800&fit=fillmax&bg=ffff .
A follow-up question would be how to get rid of the
rect
in the URL in this case, other than simply appending the params to the raw image URL. Not sure - let's investigate 🙂
Jul 8, 2021, 9:22 AM
Yeah I noticed indeed that the rect is appended automatically when using the client lib. Might be related to this issue on Github, not sure: https://github.com/sanity-io/image-url/issues/32
Also, the correct way to specify a transparent background is by setting the bg to a ARGB value, right? Like so: 00FFFFFF
Jul 8, 2021, 9:28 AM
Hmmzz transparency seems not supported in this case either..
Jul 8, 2021, 10:09 AM
I mean the “original” image is already transparent which isn’t respected during transformation
Jul 8, 2021, 10:14 AM
Seems like it's adding a solid background even when using transparency indeed: https://cdn.sanity.io/images/mxqn1342/develop/cf033ca4c0dac8c511d2603912dc5bae94ab6008-1524x2200.png?w=800&h=800&fit=fillmax&bg=0fff I'll share with the team.
Jul 8, 2021, 10:17 AM
No the original image is transparent so I expect the transformed image to respect that transparency
https://codepen.io/mdings/pen/MWmeeZE
Jul 8, 2021, 1:06 PM
Oh, I see. So the padding is transparent but the base image isn't. Thanks for reporting
Jul 8, 2021, 1:23 PM
I've pushed a fix for this issue, and have scheduled a CDN invalidation of the cache - so this should eventually be fixed. You should be able to test it by using slightly different parameters or appending another query parameter
Jul 8, 2021, 4:34 PM
Thanks
user Z
! That seems to be working now
Jul 22, 2021, 6:23 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?