πŸ‘€ See Sanity in action: Watch product demo now β†’

How Hotspot Crop on Images Works with GraphQL and Gatsby

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.io – build remarkable experiences at scale

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