Skip to content
👀 Our most exciting product launch yet 🚀 Join us May 8th for Sanity Connect
Get help on Slack

Handling empty content in Sanity previews with fallbacks

12 replies
Last updated: Sep 17, 2021
Does anyone have a solution for how to handle previews breaking when content is empty?
For example, I would like to have a fall-back for all my modules so that if one is empty, it doesn't break the preview (maybe displays a message telling the editor to choose an image or insert content, etc).
Sep 17, 2021, 4:28 PM
If you’re looking for a fallback if any item in an array is missing a field, that’s also possible. Please let me know if that’s what you’re after.
Sep 17, 2021, 4:40 PM
Thank you - I am reviewing with my team. I will let you know 🙂
Sep 17, 2021, 5:05 PM
Thank you - I am reviewing with my team. I will let you know 🙂
Sep 17, 2021, 5:05 PM
user A
what about something like this for an image:

preview: {
    select: {
      image: "image.secure_url",
      sizing: "layoutSettings.sizing",
    },
    prepare({ image, sizing }) {
      return {
        title: `Image ${sizing}`,
        media: <img src={image.replace(/upload\/v\d+\//, "upload/w_40/")} />,
      };
    },
  },

Sep 17, 2021, 5:13 PM
media
might look like:

import React from 'react'

// ...

media: image ? <img src={image.replace(/upload\/v\d+\//, "upload/w_40/")} /> : <>🤷‍♀️</>,
If you want 
title
to render a certain message based on there being no image, you can do that in a conditional too. With more extensive logic, you might do this outside of the return.
Sep 17, 2021, 5:20 PM
media
might look like:

import React from 'react'

// ...

media: image ? <img src={image.replace(/upload\/v\d+\//, "upload/w_40/")} /> : <>🤷‍♀️</>,
If you want 
title
to render a certain message based on there being no image, you can do that in a conditional too. With more extensive logic, you might do this outside of the return.
Sep 17, 2021, 5:20 PM
Ah, I see this affects the small preview in the editor, but what about in the web preview tab?
Sep 17, 2021, 5:28 PM
That would be handled by the front end code that the live preview is using. Basically the same approach – see if an image exists and return accordingly.
Sep 17, 2021, 5:30 PM
If I remember right you’re not using React, but if you were, it might be something like (where 
…
is your image handling):

{image && <img src=… />}

Or a conditional like:


{image ? <img src=… /> : <img src='fallback.png' />}
Sep 17, 2021, 5:34 PM
With live preview and Sanity you’ll want to optionally chain almost everything. 

{image?.asset?._ref && <img…

Assume nothing exists, and that every object is empty!
Sep 17, 2021, 5:58 PM
Thank you for your help! I was finally able to get my preview from breaking, and get to end my day with a win. Have a great weekend!
Sep 17, 2021, 7:48 PM
Great news! Enjoy yours as well!
Sep 17, 2021, 7: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.

Get started for freeExplore the demo

Was this answer helpful?