Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive

Issue with getting a string accepted and displayed as list media in Studio 3.

6 replies
Last updated: Feb 22, 2023
Is this documentation still valid in Studio 3? I can't get it to work. https://www.sanity.io/docs/previews-list-views Edit: I just needed to rename the file, thanks RD.
Feb 1, 2023, 11:02 PM
More importantly, I have a string const for the preview thumbnail image url, I just need to know how to get that string accepted and displayed as the list media
Feb 1, 2023, 11:05 PM
I believe you’ll need to change your file extension to .tsx if you’re using JSX.
Feb 1, 2023, 11:19 PM
user M
perfect, thanks! I'm glad it was something simple that I was missing 😆
Feb 2, 2023, 12:50 AM
Hey did you get this to work?I am getting the error shown in image when trying to use a span with backgroundColor red. File extension is .tsx, react is imported at the top.
code for the preview:

preview: {
    select: {
      title: 'title',
      type: 'campaignItem._type',
      start: 'startTime',
      end: 'endTime',
    },
    prepare({
      title,
      type,
      start,
      end,
    }: {
      title: string;
      type: string;
      start: string;
      end: string;
    }) {
      let status = 'Ingen dato';
      const now = new Date().toISOString();
      if (start < now && now < end) {
        status = 'Pågående';
      }
      if (now > end) {
        status = 'Utgått';
      }
      if (start > now) {
        status = `Begynner: ${start}`;
      }
      return {
        title,
        subtitle: (
          <span style={{ backgroundColor: 'red' }}>
            {status}
            {titleFromType[type]}
          </span>
        ),
      };
    },
  },
Feb 22, 2023, 4:01 PM
Do you know if this works for subtitle and title aswell? Like providing some html tags that wraps it then style that tag with a color.It seems to error-out when im using it on anything else than the media key.
Feb 22, 2023, 4:09 PM
Nah, subtitle and title can only take strings or numbers, I believe.
Feb 22, 2023, 5:30 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?