Improve authoring with previews and thumbnails

Next, you will enhance the user interface (UI) with previews, thumbnails, and filters. These additions will help editors quickly find and use the blocks they need to create pages.

Previews are the snippets of information that appear in the list view of the page builder. They're the first thing your editors will see when they're adding a new block to the page builder.

Here's an example of what a good preview looks like:

Open to enlarge image

Previews should always have consistency. Consistency creates familiarity and familiarity improves user experience. The more consistency you have in your previews and page builders, the faster it will be for your editors to create pages.

object and document schema types in Sanity Studio have a preview property which can allows the following to be customized:

• title: This is the title of the block, or the most important headline. Think what section a marketer would care about the most.
• subtitle: Set this to the block name.
• media: If the block has an image, use that, otherwise use an icon as a fallback.

Let's revisit our blocks from the last lesson and improve the readability.

Note, this lesson uses the default icons from Sanity to minimize dependencies. However, in a real-world project, Lucide may be preferred as it has a larger icon selection.

Pay attention to the preview and prepare functions. This is where you are defining how the block appears in the preview.

In the example below, there is a block with a title, subtitle and media.

Open to enlarge image

The pink cat on the left-hand side is the media, this can either be an image, or an icon. However, you should never leave it blank.

import { defineField, defineType } from "sanity";
import { BlockContentIcon } from "@sanity/icons";

export const splitImageType = defineType({
  name: "splitImage",
  // ...all other settings
  icon: BlockContentIcon,
  preview: {
    select: {
      title: "title",
      media: "image",
    },
    prepare({title, media}) {
      return {
        title: title,
        subtitle: "Split Image",
        media: media ?? BlockContentIcon,
      };
    },
  },
});

Insert a "Split Image" block and give it some content. The previous should now look like this:

Open to enlarge image

This example is a simple block with a title, subtitle and media. The prepare function is used to set the title and media for the preview.

import { defineField, defineType } from "sanity";
import { TextIcon } from "@sanity/icons";

export const heroType = defineType({
  name: "hero",
  // ...other settings
  icon: TextIcon,
  preview: {
    select: {
      title: "title",
      media: "image",
    },
    prepare({ title, media }) {
      return {
        title,
        subtitle: "Hero",
        media: media ?? TextIcon,
      };
    },
  },
});

import { defineField, defineType } from "sanity";
import { HelpCircleIcon } from "@sanity/icons";

export const faqsType = defineType({
  name: "faqs",
  // ...other settings
  icon: HelpCircleIcon,
  preview: {
    select: {
      title: "title",
    },
    prepare({ title }) {
      return {
        title,
        subtitle: "FAQs",
      };
    },
  },
});

import { defineField, defineType } from "sanity";
import { StarIcon } from "@sanity/icons";

export const featuresType = defineType({
  name: "features",
  // ...other settings
  icon: StarIcon,
  preview: {
    select: {
      title: "title",
    },
    prepare({ title }) {
      return {
        title,
        subtitle: "Features",
      };
    },
  },
});

Customized icons are good, but a visual preview of what a block can look like is even better.

To implement these previews, you need to update your page builder schema. For this particular example, you'll add a grid view to the options property.

This creates a grid view of the block, and the preview image is taken from the static folder.

It should look something like this:

Open to enlarge image

export const pageBuilderType = defineType({
  // ... previous configuration
  options: {
    insertMenu: {
      views: [
        {
          name: "grid",
          previewImageUrl: (schemaType) => `/block-previews/${schemaType}.png`,
        },
      ],
    },
  },
});

Next.js provides a public folder in the root of your application for serving static images. You could place your own images in this directory, ensuring they adhere to the following specifications:

• Dimensions: 600x400px (maintain consistent sizing)
• Format: PNG with transparent background
• Naming: Match schema type names (e.g., hero.png, splitImage.png)

There is a community file built for designing these, it is available here.

For the blocks in this lesson, we have prepared some example thumbnails you can use. Download these example images and place them in your application at /public/block-previews

Click the "Add item" button now and you should see the preview images.

It's time to finally start getting this content to show up in your Next.js application. First let's create a new dynamic route for rendering page documents.