Is there a way to override the hotspot and crop for previews?

When you assign an image field to the media property in your preview configuration, Sanity Studio automatically respects any hotspot and crop settings saved on the image. Unfortunately, there isn't a built-in way to override these settings specifically for preview display while keeping the original hotspot/crop data intact on the document.

However, you have a couple of approaches to work around this:

Option 1: Use Custom Preview Components

You can return a custom React component from the prepare function to have full control over how the image renders in previews. Here's an example:

import imageUrlBuilder from '@sanity/image-url'
import {useClient} from 'sanity'

export default {
  name: 'person',
  type: 'document',
  fields: [
    {
      name: 'portrait',
      type: 'image',
      options: {hotspot: true}
    }
  ],
  preview: {
    select: {
      title: 'name',
      image: 'portrait'
    },
    prepare({title, image}) {
      return {
        title,
        media: image ? <CustomPreview image={image} /> : undefined
      }
    }
  }
}

function CustomPreview({image}) {
  const client = useClient({apiVersion: '2023-01-01'})
  
  if (!image?.asset?._ref) return null
  
  const builder = imageUrlBuilder(client)
  const imageUrl = builder
    .image(image.asset._ref)
    .width(200)
    .height(200)
    .url()

  return <img src={imageUrl} alt="" style={{width: '100%', height: '100%', objectFit: 'cover'}} />
}

Important notes:

• Make sure your schema file has a .jsx or .tsx extension to support JSX syntax
• You'll need @sanity/image-url installed: npm install @sanity/image-url
• The useClient hook is available from the sanity package in Studio v3

Option 2: Use Image URL Parameters with Focal Points

When building the image URL with @sanity/image-url, you can use the crop and fp-x/fp-y parameters to override the focal point. According to the image transformation documentation, you can:

• Use fit=crop with crop=focalpoint
• Set custom focal point coordinates with fp-x and fp-y (values from 0.0 to 1.0)

For example, to zoom in on faces positioned in the upper-center of images:

const imageUrl = builder
  .image(image.asset._ref)
  .width(200)
  .height(200)
  .fit('crop')
  .crop('focalpoint')
  .focalPoint(0.5, 0.3) // x=center, y=upper third
  .url()

This approach ignores the stored hotspot data and uses your programmatically-set focal point instead, which should help you zoom in on faces more consistently across your previews.

Keep in mind: These approaches only affect the preview display in Studio—the actual hotspot/crop data stored on your documents remains unchanged, so your frontend will still use the editor-defined hotspots.