Skip to content
Get help on Slack

Trouble using image hotspot property in Sanity for personal project.

10 replies
Last updated: Mar 9, 2022
Hi Friends!I am a student trying out sanity for a personal project. I am having a bit of trouble using the
image hotspot property. I added 
hotspot:true
to the schema and I am using the 
imageUrlBuilder
. But the hotspot still does not appear to be working. Are there some steps that I am missing? Do I need to add crop and hotspot to my GROQ query as well?
Mar 4, 2022, 6:20 PM
Hi User. Is 
hotspot: true
inside of an 
options
object (as opposed to being directly on the image)?
Mar 4, 2022, 6:49 PM
It is inside an options object (see code below) I can see the interface on sanity, and adjust the hotspot, I just don't see the changes in my app.
    {
      name: "mainImage",
      title: "Main image",
      type: "image",
      options: {
        hotspot: true,
      },
    },
Mar 4, 2022, 6:52 PM
My expectation is that the faces would stay in focus as I resize, because that is where I centered the hotspot. But you can see in the video below that they are being cut off.
Mar 4, 2022, 6:59 PM
sorry about the video quality...probably not the most helpful haha
Mar 4, 2022, 7:00 PM
Ah! That’s very helpful. Thanks! What does your front end code look like?
Mar 4, 2022, 7:01 PM
Here is the gihub repo .The
grid container component houses all the profile cards . and the GROQ Query is passed in from the team component .Could my styling be impacting it?
Mar 4, 2022, 7:10 PM
Hey
user A
! Wondered if you had a chance to look into this more? Im still a bit stuck on it
Mar 7, 2022, 10:57 PM
Could you please try changing your 
mainImage
projection here so it looks like this:

mainImage{
  ...,
  asset->,
}
My thought is that because the projection currently doesn’t ask for crop and hotspot data, it can’t get applied. Hopefully this gets things working but please let me know if it doesn’t.
Mar 8, 2022, 6:03 AM
Thanks User! adding this to the query and passing in 
mainImage.asset
to the url builder seemed to do the trick!
Mar 8, 2022, 11:40 PM
Great! Happy to hear that. 🙌
Mar 9, 2022, 12:33 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?