Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

Using Sanity Hotspot with GatsbyImage for Image Cropping

16 replies
Last updated: May 24, 2021
Hey everyone! Is it possible to use the Sanity hotspot data with a 
GatsbyImage
? Maybe using the hotspot values with css 
object-position
? I couldn’t find much documentation on what the values actually mean, e.g:
height: 0.43673837232083357
width: 0.33333333333333326
x: 0.4060283687943266
y: 0.4828572548097652
My use case is that I’m cropping photos into squares when they’re in a list but also shown full size elsewhere. I’d like to be able to choose the area that gets shown when in the cropped square with a Sanity hotspot. Thanks a lot for any help!
May 23, 2021, 4:38 PM
also curious. Right now i am also using GatsbyImage with Sanity but dont know exactly if using
gatsby-plugin-sanity-image
has any advantage over plain GatsbyImage. Especially when having hotspot in mind
May 23, 2021, 5:13 PM
• Applies Sanity hotspot data as the 
object-position
 in case you need it
May 23, 2021, 5:15 PM
So it looks like that the plugin is the way to go.
May 23, 2021, 5:17 PM
That’s helpful thanks
user U
! Had a look at the plugin code and it’s just setting the hotspot values straight in as a percentage:

css={
  hotspot && {
    objectPosition: [hotspot.x, hotspot.y]
    .map((value) => (value * 100).toFixed(2) + "%")
    .join(" "),
  }
}
Will try to play around with it and a GatsbyImage now
May 23, 2021, 5:51 PM
gimme feedback how this goes. I really would like to stick with plain gatsby ImagePlugin
May 23, 2021, 5:51 PM
but bear in mind that sharp also has some fancy options for guessing how you want to crop based on skin tones.
May 23, 2021, 6:09 PM
This should work pretty well for portraits… not so for skyscrapers i assume 😉
May 23, 2021, 6:10 PM
Yeah it would be really cool to be able to do it automatically but unfortunately I’m working with artwork at the moment
May 23, 2021, 6:17 PM
It’s kind of working? As in moving the hotspot around in sanity does move the image crop accordingly - but it’s not in sync with the preview in sanity studio
May 23, 2021, 6:18 PM
This is with this GatsbyImage updating on the left:
<GatsbyImage
image={getImage(artwork.artworkImage.asset)}
alt={""}
style={{ width: "100%", height: "100%" }}
imgStyle={{
  width: `100%`,
  height: `100%`,
  objectPosition: `${hotspot.x * 100}% ${hotspot.y * 100}%`,
}}
/>
May 23, 2021, 6:25 PM
In Sanity Studio they aren’t using object-position on the previews though, they’re overflowing the preview elements with e.g:
position: absolute;
overflow: hidden;
height: 100%;
width: 138.07%;
top: 0px;
left: -12.91%;
May 23, 2021, 6:29 PM
ah thanks for feedback. Looks nice so far.
May 23, 2021, 6:55 PM
will do my tests most likely tomorrow.
May 23, 2021, 6:56 PM
mainly thinking about using the hotspot thing for social media sharing images as in og:image
May 23, 2021, 6:57 PM
Also did some tests. Same finding as you. But with hotspot i can replace my previous way of doing things. Before i used ArtDirection and delivered different images based on different breakpoints (screen sizes). Hotspot kind of replaces this optically… with the drawback that the image size wont be smaller with smaller screens. But will switch anyway. Maintaining different header image sizes depending on sreen size is too much effort.
May 24, 2021, 10:33 AM
One thing i noticed though: The sanity image plugin is also able to make usage of the crop feature… something the gatsby image plugin cant
May 24, 2021, 10:54 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.

Get started for freeExplore the demo

Was this answer helpful?