Get help on Discord

How to show filename in image preview and set default position value?

2 replies
Last updated: Jun 7, 2023
Hello. I have an image block that includes some fields, added to portable text:
export default {
  name: 'blockContent',
  title: 'Content',
  type: 'array',
  of: [
    {
      type: 'block',
    },
    {
      type: 'image',
      fields: [
        {
          name: 'position',
          title: 'Position',
          type: 'string',
          options: {
            list: [
              {title: 'Default', value: 'default'},
              {title: 'Left', value: 'left'},
              {title: 'Right', value: 'right'},
            ],
          },
        },
        {
          name: 'alt',
          title: 'Alternative text',
          type: 'localeString'
        },
      ],
    },
  ]
}
With this setup, the title in the image preview is showing the 
position
string instead of the filename. How can I show the filename instead?Also, is there any way of having one of the 
position
list items as the pre-selected default?
AI Update

Looking at your code, the issue with the title showing the position string instead of the filename is happening because when you add custom fields to an image in portable text, those fields get prioritized in the preview. To fix this and set a default value for the position field, here's what you need to do:

1. Fix the preview to show filename:

Add a preview configuration to your image block that explicitly selects the asset's original filename:

export default {
  name: 'blockContent',
  title: 'Content',
  type: 'array',
  of: [
    {
      type: 'block',
    },
    {
      type: 'image',
      fields: [
        {
          name: 'position',
          title: 'Position',
          type: 'string',
          options: {
            list: [
              {title: 'Default', value: 'default'},
              {title: 'Left', value: 'left'},
              {title: 'Right', value: 'right'},
            ],
          },
          initialValue: 'default', // Sets default value
        },
        {
          name: 'alt',
          title: 'Alternative text',
          type: 'localeString'
        },
      ],
      preview: {
        select: {
          title: 'asset.originalFilename',
          subtitle: 'position',
          media: 'asset'
        }
      }
    },
  ]
}

The preview configuration uses select to pick which fields to display. By selecting asset.originalFilename as the title, you'll see the actual filename. I've also added the position as a subtitle so you can still see that information at a glance.

2. Set a default value for position:

Simply add initialValue: 'default' to your position field (shown in the code above). This will pre-select "Default" whenever a new image is added.

If you want even more control over the preview display, you can add a prepare function to format the information:

preview: {
  select: {
    filename: 'asset.originalFilename',
    position: 'position',
    media: 'asset'
  },
  prepare({filename, position, media}) {
    return {
      title: filename || 'Untitled',
      subtitle: position ? `Position: ${position}` : undefined,
      media: media
    }
  }
}

This gives you complete control over how the preview appears in your portable text editor!

Show original thread
2 replies
Hi
user E
. To show the filename, you can use a preview (as a sibling to the 
fields
array in your schema) that specifies a 
title
of 
asset.originalFilename
. To set a 
position
as a default (in this case, using the value in your list of 
'default'
, but this could be anything), you can use the 
initialValue
prop on the schema . Both are reflected below:

{
  type: 'image',
  fields: [
    {
      name: 'position',
      title: 'Position',
      type: 'string',
      options: {
        list: [
          {title: 'Default', value: 'default'},
          {title: 'Left', value: 'left'},
          {title: 'Right', value: 'right'},
        ],
      },
      initialValue: 'default',
    },
    {
      name: 'alt',
      title: 'Alternative text',
      type: 'localeString'
    },
  ],
  preview: {
    select: {
      title: 'asset.originalFilename',
    },
  },
},
By using the title for the preview the image disappeared, but I added it back with 
media: 'asset'
. Thanks for your help!

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?