Understanding how to use hotspot crop on images in Sanity.io
2 repliesLast 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?
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
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
Thanks 🙂
Was this answer helpful?
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.
