Get help on Discord

How to get a Media Thumbnail/Preview in the Document List

20 replies
Last updated: May 19, 2021
I am trying to get a media thumbnail/preview to work in the document list, but I am struggling to grab image 0 from an array. Does anyone have any pointers on what the syntax needs to be?
My preview config (“heroImage”, which I am trying to make work…)

preview: {
    select: {
      status:'vehicleContent.synlighet.status',
      modelName: 'vehicleContent.typeinfo.modellbetegnelse',
      licensePlate: 'vehicleContent.identitet.licensePlate',
      manufac: 'vehicleContent.typeinfo.manufacturer.label',
      heroImage: 'vehicleContent.bilder[0]',
      year:'vehicleContent.datoer.FirstRegisterDate'
    
    },
    prepare( {status, heroImage, modelName, year, licensePlate,manufac}) {
      return {
        media: `${heroImage}`,
        title: `${licensePlate}  -  ${status.toUpperCase()}`,
        subtitle:  `${year ? year.split('-')[0] : '' } ${manufac ? manufac : ''} ${modelName ? modelName :''}`

      }
    }
}
}

AI Update

Looking at your code, you're very close! The syntax for accessing array items in Sanity's preview select is to use dot notation with the index number, like 'vehicleContent.bilder.0' instead of 'vehicleContent.bilder[0]'.

Here's your corrected preview config:

preview: {
  select: {
    status: 'vehicleContent.synlighet.status',
    modelName: 'vehicleContent.typeinfo.modellbetegnelse',
    licensePlate: 'vehicleContent.identitet.licensePlate',
    manufac: 'vehicleContent.typeinfo.manufacturer.label',
    heroImage: 'vehicleContent.bilder.0',  // Changed from [0] to .0
    year: 'vehicleContent.datoer.FirstRegisterDate'
  },
  prepare({status, heroImage, modelName, year, licensePlate, manufac}) {
    return {
      media: heroImage,  // Remove the template literal - just pass the value directly
      title: `${licensePlate}  -  ${status.toUpperCase()}`,
      subtitle: `${year ? year.split('-')[0] : ''} ${manufac ? manufac : ''} ${modelName ? modelName : ''}`
    }
  }
}

Two key changes:

  1. Array index syntax: Use 'vehicleContent.bilder.0' with dot notation rather than bracket notation [0]. This is the standard way to access array items in preview configuration.

  2. Media value: Pass heroImage directly instead of wrapping it in a template literal (${heroImage}). The media property expects the actual image object, not a string representation of it.

If your image field is an image type with an asset reference, you might also want to be more specific and use 'vehicleContent.bilder.0.asset' to directly access the asset, though often just .0 works fine depending on your schema structure.

This looks like an array of bilder, so could it be 
bilder[0].bilder
?
testing….. Nope, made no difference… 😞
between 
prepare
and 
return
can you try to 
console.log(heroImage)
and see what it outputs?
Could you try bilder.0.asset ?
between 
prepare
and 
return
can you try to 
console.log(heroImage)
and see what it outputs?
Could you try bilder.0.asset ?
Tried it like this: still didnt work:

preview: {
    select: {
      status:'vehicleContent.synlighet.status',
      modelName: 'vehicleContent.typeinfo.modellbetegnelse',
      licensePlate: 'vehicleContent.identitet.licensePlate',
      manufac: 'vehicleContent.typeinfo.manufacturer.label',
      heroImage: 'vehicleContent.bilder.0.asset',
      year:'vehicleContent.datoer.FirstRegisterDate'
    
    },
    prepare( {status, heroImage, modelName, year, licensePlate,manufac}) {
      return {
        media: `${heroImage}`,
        title: `${licensePlate}  -  ${status.toUpperCase()}`,
        subtitle:  `${year ? year.split('-')[0] : '' } ${manufac ? manufac : ''} ${modelName ? modelName :''}`

      }
    }
}
}

This looks like an array of bilder, so could it be 
bilder[0].bilder
?
Try my comment above and see if you can identify the actual image object.
testing….. Nope, made no difference… 😞
between 
prepare
and 
return
can you try to 
console.log(heroImage)
and see what it outputs?
Yes, looks like it’s at least finding the asset
but still the question is what syntax does Studio require in order to follow the reference to the image?
I've never been able to use a referenced object in the preview, actually.
so I can get to the image reference itself
'vehicleContent.bilder.0.asset._ref'
which gives me just the

image-5012443c18b79200381151be1528f27725e5399d-2048x1536-jpg

I can try to reconstruct the full asset URL, and pass it as a complete image URL. Not sure what Studio expects for the preview function….
nope….
Could you try this?

import React from 'react'

...

preview: {
    select: {
      ...,
      heroImage: 'vehicleContent.bilder.0.asset.url'
    },
    prepare({ ..., heroImage }) {
      return {
        ...
        media: <img src={heroImage} alt={...} />
      }
    }
  }
YES! Success! 🙂. 🙌🙌🙌🙌.
Nicely done!!
Great! Those are some nice lookin’ buses! 🚌
Thanks 🙂 Appreciate the help very much! My editors have been itching for these previews, so this makes several people very happy!

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.

Get started for freeExplore the demo

Was this answer helpful?