Adding an image thumbnail to a document list item in Sanity.io
7 replies
Last updated: Sep 8, 2020
H
Hello! I have one document and in the list items, i want to show the image of that document like a thumbnail, i am trying the "preview" with "media" but im getting the default folder icon. I am missing something?
Sep 8, 2020, 11:25 AM
P
Hey! Could you share the code for the image field and the preview? 🙂
Sep 8, 2020, 11:28 AM
S
Yes of course, i hope it helps, im missing something 🙂
export default {    name: 'publisher',   Â
title: 'Publisher',   Â
type: 'document',   Â
fields:Â [Â Â Â Â Â Â Â Â
{            name: 'name',           Â
title: 'Name',           Â
type:Â 'string'Â Â Â Â Â Â Â Â
},       Â
{            title: 'Logo',           Â
name: 'logo',           Â
type:Â 'file'Â Â Â Â Â Â Â Â
}Â Â Â Â
],   Â
preview: {        select: {            title: 'name',           Â
media:Â 'logo.asset.url'Â Â Â Â Â Â Â Â
}Â Â Â Â
}
};
Sep 8, 2020, 11:29 AM
P
Also, seems like the image preview on the Logo field itself is not working correctly either, which might cause the issue above even if the preview was set up correctly. Could it be an issue with the file itself perhaps? Have you tried uploading a different image file to compare?
Sep 8, 2020, 11:30 AM
P
I see -
logois of the
filetype rather than of the
imagetype. If you change it to
type: 'image'that should fix it!
Sep 8, 2020, 11:32 AM
S
Wow it worked! sorry so dumb question
Sep 8, 2020, 11:33 AM
P
No such thing! Glad it’s working! 🙂
Sep 8, 2020, 11:33 AM
S
For anyone comming here, as
       Â
user M
say, change type to image and in the preview media: 'logo' or the name of the image you want to show as an imagefields:Â [Â Â Â Â Â Â Â Â
{            name: 'name',           Â
title: 'Name',           Â
type:Â 'string'Â Â Â Â Â Â Â Â
},       Â
{            title: 'Logo',           Â
name: 'logo',           Â
type: 'image' // type image       Â
}Â Â Â Â
],   Â
preview: {        select: {            title: 'name',           Â
media:Â 'logo' // the name of the image you want to show
}Â Â Â Â
}
Sep 8, 2020, 11:33 AM
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.