Unlock seamless workflows and faster delivery with our latest releases – get the details

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.

Was this answer helpful?