How to get a Media Thumbnail/Preview in the Document List
20 replies
Last updated: May 19, 2021
J
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…)
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
J
testing….. Nope, made no difference… 😞
May 19, 2021, 10:21 PM
between
prepareand
returncan you try to
console.log(heroImage)and see what it outputs?
May 19, 2021, 10:22 PM
G
Could you try bilder.0.asset ?
May 19, 2021, 10:22 PM
between
prepareand
returncan you try to
console.log(heroImage)and see what it outputs?
May 19, 2021, 10:22 PM
G
Could you try bilder.0.asset ?
May 19, 2021, 10:22 PM
J
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
J
testing….. Nope, made no difference… 😞
May 19, 2021, 10:21 PM
between
prepareand
returncan you try to
console.log(heroImage)and see what it outputs?
May 19, 2021, 10:22 PM
J
Yes, looks like it’s at least finding the asset
May 19, 2021, 10:29 PM
J
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
J
so I can get to the image reference itself
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….
'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
J
nope….
May 19, 2021, 10:46 PM
G
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
J
YES! Success! 🙂. 🙌🙌🙌🙌.
Nicely done!!
Nicely done!!
May 19, 2021, 11:15 PM
G
Great! Those are some nice lookin’ buses! 🚌
May 19, 2021, 11:16 PM
J
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.