Get help on Discord

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 .
AI Update

Good news—you can definitely show the filename! The key is placing the preview configuration on the image object itself, not on the array field.

When you add custom fields to an image type in an array, Sanity stops showing the default filename preview. You need to explicitly tell it what to display by adding a preview configuration. Here's how:

{
  name: 'gallery',
  type: 'array',
  of: [
    {
      type: 'image',
      fields: [
        {
          name: 'alt',
          type: 'string',
          title: 'Alt Text'
        }
      ],
      preview: {
        select: {
          title: 'asset.originalFilename',
          media: 'asset'
        }
      }
    }
  ]
}

The important bits:

  • title: 'asset.originalFilename' - This pulls the original filename from the image asset
  • media: 'asset' - This keeps the image thumbnail visible in the list

The asset object is automatically populated when you upload an image and includes read-only properties like originalFilename, url, size, etc. You don't need to create any additional fields—just reference asset.originalFilename in your preview select.

If you want to get fancier, you can use a prepare function to customize the display even further, but for showing filenames, the simple select approach above should work perfectly.

this is the field in the document 
project.js

    {
      name: "gallery",
      title: "Gallery",
      type: "array",
      of: [
        {
          name: "image",
          type: "galleryImage",
        },
      ],
    },
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),
            }
        }
    },
}
any pointers would be greatly appreciated
you can find an example of using the filename here https://www.sanity.io/docs/previews-list-views#d82fd035385f 

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

type: "array",
options: {
  layout: "grid",
},
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
I did try your first suggestion
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',
        }
    },
}
but I couldn't get it to work
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
.
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
this is my current schema
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',
        }
    },
}
Hi
user A
, just wondering whether you have any recommendations to show the thumbnail?

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?