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

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

3 replies
Last updated: Dec 4, 2020
I’m working on my document previews in Sanity Studio. When I add images, the Sanity docs say “The easiest way to show an image in the preview is to assign a field containing an image to the 
media
property [which I’ve done]. The different views take care of a proper rendering of the image, including any 
hotspot
and 
crop
specifics.”
Is there a way to somehow override the hotspot and crop for the previews? I’d like the preview image to be zoomed in on their faces.
Dec 3, 2020, 9:56 PM
You can override it like this:
import React from 'react'

export default {
  name: 'post',
  type: 'document',
  title: 'Post',
  fields: [
    {
      name: 'title',
      type: 'string',
    },
    {
      name: 'image',
      type: 'image',
      options: {
        hotspot: true
      }
    }
  ],
  preview: {
    select: {
      title: 'title',
      media: 'image.asset.url'
    },
    prepare({title, media}) {
      return {
        title,
        media: () => <img src={media} />,
      }
    }
  }
};

Dec 4, 2020, 12:22 PM
Thanks for the reply,
user Y
. I apologize as I wasn’t very clear before. What I’m hoping to do is apply specific crop settings just to the Studio preview image (ignoring whatever is set in the Studio). I can usually assume the face is at around 50% on the x-axis and about 20% down on the y-axis. I’ve tried something like the following but can’t find a way to zoom in on the image based on a focal point of (0.5, 0.2). Since width and height are in pixels, I can’t use those, since the images are all uploaded with different dimensions.

preview: {
    select: {
      ...,
      image: 'image.asset.url',
    },
    prepare({..., image}) {
      return {
        ...,
        media: () => <img src={urlFor(image).width(100).height(100).focalPoint(0.5, 0.2).crop('focalpoint').fit('max')} />,
      }
    }
  }
Dec 4, 2020, 11:20 PM
I think that since it’s going to be so customized for each image, I’m better off adding another field to use as the preview image. Thanks for your help,
user Y
!
Dec 4, 2020, 11:28 PM

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?