šŸ‘‹ Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Understanding how to use hotspot crop on images in Sanity.io

2 replies
Last updated: Sep 15, 2020
How does the hotspot crop on images work?I have enabled it in studio, but how do i use it in the url with parameters?
Sep 15, 2020, 3:04 PM
crop is done via the URL, a given crop gets a given URL. I use the Sanity Image builder to get these URLs. You do not have to make any changes to the studio to get it to work šŸ™‚
https://www.sanity.io/docs/image-url
Since I use Gatsby (and thus GraphQL instead of GROQ) I also have to query the crop parameters when I get the images, I just have one graphQL fragment for all my images. In GROQ Sanity may or may not give this data by default, Iā€™m not sure.

PS: You can tell the image builder to ignore the crop set by sanity or use a different crop as well if you should ever want that
Sep 15, 2020, 3:17 PM
Thanks šŸ™‚
Sep 15, 2020, 6:17 PM

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?