Skip to content
Get help on Slack

How to display the filename of an image in a gallery field in Sanity.io

14 replies
Last updated: Aug 13, 2021
I have an gallery field which is an array of images, it works fine though the title preview of each image shows "Untitled", which doesn't look great. Ideally I'd like to show the filename of the image but I don't know how to get this working. There doesn't seem to be a way to do this in the docs .
Aug 10, 2021, 11:08 AM
this is the field in the document 
project.js

    {
      name: "gallery",
      title: "Gallery",
      type: "array",
      of: [
        {
          name: "image",
          type: "galleryImage",
        },
      ],
    },
Aug 10, 2021, 11:09 AM
this is my attempt to get it working within 
galleryImage

export default {
    name: "galleryImage",
    title: "Gallery Image",
    fields: [
        {
            name: "caption",
            title: "Caption",
            type: "string",
            description: "An optional description.",
        },
    ],
    type: "image",
    preview: {
        select: {
            image: 'galleryImage',
        },
        prepare(selection) {
            const { image } = selection
            return {
                title: JSON.stringify(image),
            }
        }
    },
}
Aug 10, 2021, 11:10 AM
any pointers would be greatly appreciated
Aug 10, 2021, 11:10 AM
you can find an example of using the filename here https://www.sanity.io/docs/previews-list-views#d82fd035385f 

select: {
  image: 'galleryImage.asset.url'
}
Aug 10, 2021, 11:11 AM
another option is to set display the array in a grid https://www.sanity.io/docs/array-type 

type: "array",
options: {
  layout: "grid",
},
Aug 10, 2021, 11:12 AM
thanks for replying
user B
, I realised that the previews may not be applicable as 
galleryImage.js
is 
type: "image"
not a 
type: "object"
. I can't convert it to an object as I'd would like to preserve bulk uploading when dragging files from the filesystem
Aug 10, 2021, 11:29 AM
I did try your first suggestion
Aug 10, 2021, 11:29 AM
export default {
    name: "galleryImage",
    title: "Gallery Image",
    fields: [
        {
            name: "caption",
            title: "Caption",
            type: "string",
            description: "An optional description.",
        },
    ],
    type: "image",
    preview: {
        select: {
            title: 'galleryImage.asset.originalFilename',
            media: 'galleryImage.asset.url',
        }
    },
}
Aug 10, 2021, 11:30 AM
but I couldn't get it to work
Aug 10, 2021, 11:30 AM
Hi User! Could you try that same preview (the one two comments ago), but remove 
galleryImage.
from your 
select
. You’re already working inside of 
galleryImage
so I expect you’ll want to ask for 
asset.originalFilename
.
Aug 10, 2021, 3:49 PM
Hi User, thanks for the help. Changing it to 
asset.originalFilename
does indeed work for the title however, neither 
asset
or 
asset.url
work for the media preview
Aug 11, 2021, 12:41 AM
this is my current schema
Aug 11, 2021, 12:42 AM
export default {
    name: "galleryImage",
    title: "Gallery Image",
    fields: [
        {
            name: "caption",
            title: "Caption",
            type: "string",
            description: "An optional description.",
        },
    ],
    type: "image",
    preview: {
        select: {
            title: 'asset.originalFilename',
            media: 'asset.url',
        }
    },
}
Aug 11, 2021, 12:42 AM
Hi
user A
, just wondering whether you have any recommendations to show the thumbnail?
Aug 13, 2021, 1:49 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?