Skip to content
Unlock seamless workflows and faster delivery with our latest releases – get the details
Get help on Slack

Modifying previews in lists and finding a solution for limited space issue.

6 replies
Last updated: Apr 13, 2022
Sanity team, is there a way to modify how previews are displayed in lists? A recent update inserts the document type name, but it makes the more compressed lists illegible:
Apr 13, 2022, 8:29 PM
if a preview works here, I’m not sure if it should be at the reference object root or associated with each type. Where yours says “HELP CENTER ARTICLE” is that the document type title or a subtitle? Alternatively, maybe add an annotation for each type:
 annotations: [
          {name: 'help', title: 'Help Docs', type: 'reference', to: {type: 'help'}},
          {name: 'article', title: 'Articles', type: 'reference', to: {type: 'article'}},
        ]
Apr 13, 2022, 8:48 PM
ah I see, looks to be the same for block and regular schema reference types whenever you add multiple type references they’re noted to the right of the list and can overlap pretty severely. I’m not sure if there’s a way around this with the typical type api. You may want to add multiple fields in your document with a single type or a query per reference field - otherwise you might need to shorten the titles in those articles - or move that longer title into the subtitle field.
You can do quite a bit with the preview setting. Maybe getting creative with fewer characters in the long document titles and then tweaking previews could improve readability. Here’s an example where didn’t want a document to have a title and instead replaced the preview title value with a reference in the document:

preview: {
    select: {
      title: 'title',
      showtitle: 'show.title',
      date: 'date',
      media: 'show.image',
      venue: 'venue.title'
    },
    prepare({venue, showtitle, date, media}) {
      return {
        title: `${showtitle ? showtitle : 'Add a show'}`,
        subtitle: `${date ? date.slice(0,10) + '@' + venue : 'Add a date + venue'}`,
        // subtitle: `${showtitle ? title + showtitle : title}`,
        // subtitle: date.toISOString().slice(0,10), //  ${date.toLocaleTimeString("en-US")}
        media: media || <Icon emoji="🎩" />
      }
    }
  },

Apr 13, 2022, 9:18 PM
I just tested multiple reference types in block content in my own studio and I think I see where this limited space issue is happening. I don’t see any way around this in the API documentation I linked, but it may be worth a shot to add preview/subtitle options into the reference object.

{
            title: 'Reference',
            name: 'reference',
            type: 'reference',
            to: [{ type: 'category' }, { type: 'tag' }],
          },
Apr 13, 2022, 9:20 PM
You may want to run this past content-modeling and content-strategy to for a bit of schema design input.
Apr 13, 2022, 9:30 PM
oh wow, I was just informed that you can define width in annotation modals - this may help you: https://github.com/sanity-io/sanity/releases/tag/v2.23.0
Apr 13, 2022, 9:54 PM
Wow, thank you for the very thorough response!!! I should have added context - this is an 
internalLink
annotation used in rich text. The info in the changelog is exactly what I needed. Thank you!
Apr 13, 2022, 11:33 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?