Skip to content
✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now
Get help on Slack

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 :''}`

      }
    }
}
}

May 19, 2021, 10:06 PM
This looks like an array of bilder, so could it be 
bilder[0].bilder
?
May 19, 2021, 10:19 PM
testing….. Nope, made no difference… 😞
May 19, 2021, 10:21 PM
between 
prepare
and 
return
can you try to 
console.log(heroImage)
and see what it outputs?
May 19, 2021, 10:22 PM
Could you try bilder.0.asset ?
May 19, 2021, 10:22 PM
between 
prepare
and 
return
can you try to 
console.log(heroImage)
and see what it outputs?
May 19, 2021, 10:22 PM
Could you try bilder.0.asset ?
May 19, 2021, 10:22 PM
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 :''}`

      }
    }
}
}

May 19, 2021, 10:24 PM
This looks like an array of bilder, so could it be 
bilder[0].bilder
?
May 19, 2021, 10:19 PM
Try my comment above and see if you can identify the actual image object.
May 19, 2021, 10:25 PM
testing….. Nope, made no difference… 😞
May 19, 2021, 10:21 PM
between 
prepare
and 
return
can you try to 
console.log(heroImage)
and see what it outputs?
May 19, 2021, 10:22 PM
Yes, looks like it’s at least finding the asset
May 19, 2021, 10:29 PM
but still the question is what syntax does Studio require in order to follow the reference to the image?
May 19, 2021, 10:35 PM
I've never been able to use a referenced object in the preview, actually.
May 19, 2021, 10:35 PM
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….
May 19, 2021, 10:39 PM
nope….
May 19, 2021, 10:46 PM
Could you try this?

import React from 'react'

...

preview: {
    select: {
      ...,
      heroImage: 'vehicleContent.bilder.0.asset.url'
    },
    prepare({ ..., heroImage }) {
      return {
        ...
        media: <img src={heroImage} alt={...} />
      }
    }
  }
May 19, 2021, 11:09 PM
YES! Success! 🙂. 🙌🙌🙌🙌.
Nicely done!!
May 19, 2021, 11:15 PM
Great! Those are some nice lookin’ buses! 🚌
May 19, 2021, 11:16 PM
Thanks 🙂 Appreciate the help very much! My editors have been itching for these previews, so this makes several people very happy!
May 19, 2021, 11:18 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?