How to Set a Hotspot Crop for an Image Hosted in Sanity
10 repliesLast 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!
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.
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.
Have you set:
options: {
hotspot: true,
},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'}
]
}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..
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 deployto get them to show up.
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?
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.
You were on the right track though, you need to feed these parameters to the URL. Either manually or with the builder—both work.
Gotcha, thank you both!
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.
