👀 See Sanity in action: Watch product demo now →

How to Set a Hotspot Crop for an Image Hosted in Sanity

10 replies
Last updated: Jun 3, 2022
Hi everyone! I'm new to Sanity so my apologies if my question is a bit obvious. I am trying to set a hotspot crop for an image hosted in Sanity and have come across a couple articles that show what appears to be a Sanity image editor where I can set crops easily. How do I access this in the Sanity Studio? Thank you in advance!
Jun 2, 2022, 9:00 PM
Hey
user J
! Welcome to the community! You can access that if you click the pencil icon in the top right corner of the component after setting an image.
Jun 2, 2022, 9:04 PM
user M
Thank you for the quick response! I must not be looking in the correct place. This is the menu I see where I've set an image for a field.
Jun 2, 2022, 9:10 PM
Have you set:
  options: {
    hotspot: true,
  },
Jun 2, 2022, 9:12 PM
You can also append fields to an image type along with the hotspot option - something like this:
{
  name: 'image',
  title: 'Image',
  type: 'image',
  options: {
    hotspot: true
  },
  fields: [
    {name: 'title', title: 'Title', type: 'string'},
    {name: 'alt', title: 'Alt Description', type: 'string'},
    {name: 'attribution', title: 'Attribution', type: 'string'}
  ]
}
Jun 2, 2022, 9:14 PM
I did not have the option set in my schema file. Thank you! Now just looking into how to update that so it reflects in the studio..
Jun 2, 2022, 9:20 PM
If you're working on localhost, it should automatically show the schema changes. If you're in a deployed Studio, you'll need to run
sanity deploy
to get them to show up.
Jun 2, 2022, 9:22 PM
Awesome, thank you for sticking with me through this. I was able to access the image editor! Now when setting crops and hotspots in the editor, when I load the document is it supposed to preserve those those crops automatically? Or do I need to specify the cropping withe parameters in the url?
Jun 2, 2022, 9:47 PM
Have you checked this document: https://www.sanity.io/docs/presenting-images#QsZtvbLC ? It explains how to use the hotspot/crop and the image url builder to get what you want. 🙂
It is the responsibility of the front-end to respect the crop/hot-spot according to the wishes of the editor, but conveniently we provide a JavaScript library that takes care of this for you.
Jun 3, 2022, 7:01 AM
You were on the right track though, you need to feed these parameters to the URL. Either manually or with the builder—both work.
Jun 3, 2022, 7:01 AM
Gotcha, thank you both!
Jun 3, 2022, 5:22 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.