I've noticed I can add a preview to an image type but it only pulls data from the settings field name in the fields[] within it.

14 replies
Last updated: Jan 27, 2021

Sorry, got another question! I've noticed I can add a

preview
to an image type but it only pulls data from the
settings
field name I have created in the
fields[]
within it. This wasn't clear that it is possible in the docs (https://www.sanity.io/docs/image-type ). Can I reference the
image
asset in this preview as it doesn't seem to work?
        {
          title: 'Image',
          name: 'image',
          type: 'image',
          options: { hotspot: true },
          fields: [
            {
              title: 'Settings',
              name: 'settings',
              type: 'portfolioGallerySettings',
              options: { isHighlighted: true },
            },
          ],
          preview: {
            select: {
              size: 'settings.size',
              artist: 'settings.artistCredit.title',
              caseStudy: 'settings.caseStudy.content.title',
              media: 'image' // <<< This doesn't work. Can I get the parent image asset somehow?
            },
            prepare({ size, artist, caseStudy, media }) {
              return {
                title: 'derp'
              }
            },
          },

Jan 27, 2021, 5:22 PM

I'm not on a computer to check, but try

media: 'image.asset'
.

Jan 27, 2021, 5:25 PM

Hi Geoff! Shows up as

undefined
if I try
image
,
image.asset
etc. Doesn't show that
preview
is even a property of image in the docs so not sure how
settings
is coming though but not the parent type
image

Jan 27, 2021, 5:31 PM

I will get on a computer and check.

Jan 27, 2021, 5:31 PM

Awesome! Just to point out, I have to use an

image
in an
array
and not an
object
(containing an image and settings) as sanity has a weird way of handling bulk uploading assets into the array.

Jan 27, 2021, 5:36 PM

Okay. I’m assuming that’s all one contiguous block of code above. As it’s written, it seems odd that the image doesn’t just display automatically.

Jan 27, 2021, 5:43 PM

Ohh… hang on. I re-looked at your code.
Try

image: 'image.asset'
in preview.select and then
media: image
in prepare.

Jan 27, 2021, 5:44 PM

No joy i'm afraid. I'm also logging out the result in prepare with no joy. Perhaps this is a bug or not implemented? Here is what the above code is nested in:

export default {
  title: 'Gallery',
  name: 'portfolioGallery',
  type: 'object',
  fields: [
    {
      name: 'items',
      type: 'array',
      of: [
        IMAGE OBJECT HERE...

Jan 27, 2021, 5:49 PM

Do you want the preview to apply to the item in your array or to the greater document?

Jan 27, 2021, 5:51 PM

This will be for the item in the array. Should look like this but with the preview image:

Jan 27, 2021, 5:53 PM

Okay. I’m trying to visualize your entire schema, but I have something that I think is almost identical and it works like what you’re after.
It might be that I’m doing an object inside the array and you’re not, but here’s what I am using (with a bunch of irrelevant stuff cut out):


{
      type: 'array',
      name: 'minister',
      title: 'Minister',
      of: [{
        type: 'object',
        fields: [
          {
            name: 'member',
            title: 'Member',
            type: 'reference',
            to: [{ type: 'mla' }],
          },
        ],
        preview: {
          select: {
            image: 'member.image.asset',
          },
          prepare({ image }) {
            return {
              media: image,
            };
          },
        },
      }],
    },

Jan 27, 2021, 6:03 PM

Hi Geoff, appreciate your help with this. This does indeed work however in my particular use case I cannot use an

object
type inside an
array
. The reason being that the user needs to be able to drag a load of images/videos into the array and that doesn't seem to work unless the
image
and
file
types are loose and not nested in something like a object 😔

Jan 27, 2021, 6:35 PM

The page you took a screenshot of—if you go to inspect, can you post the JSON for the array?

Jan 27, 2021, 6:38 PM

Doing that helped reveal that all I need to use was 'asset'! Turns it is was something so simple...just presumed you would need to reference the field name

image
😛 Thanks a lot for this Geoff.

Jan 27, 2021, 6:46 PM

Nice! Good to hear. 🙂

Jan 27, 2021, 6:49 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.