Join us live Sept. 27 – How Sanity and Vercel powered Morning Brew's transformation –>

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.io: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Give your team exactly what they need to edit and publish their content with the customizable Sanity Studio. Get real-time collaboration out of the box. Sanity.io comes with a hosted datastore for JSON documents, query languages like GROQ and GraphQL, CDNs, on-demand asset transformations, presentation agnostic rich text, plugins, and much more.

Don't compromise on developer experience. Join thousands of developers and trusted companies and power your content with Sanity.io. Free to get started, pay-as-you-go on all plans.