# Improve authoring with previews and thumbnails

https://www.sanity.io/learn/course/page-building/improved-ui-with-previews-and-thumbnails.md

Updates to the configuration of your page builder schema types can dramatically improve the content creation experience.

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:

![Missing alt text](https://cdn.sanity.io/images/3do82whm/next/13884f45681aae33d08e747c953622cad5ae7694-1346x1286.webp)

## What makes a good preview?

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 allow 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](https://icons.sanity.build/) to minimize dependencies. However, in a real-world project, [Lucide](https://lucide.dev/) may be preferred as it has a larger icon selection.

## Using prepare and preview

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.

![Missing alt text](https://cdn.sanity.io/images/3do82whm/next/8a3ca601a1b52ef91aa885e970c2b6ccc83339fa-2864x554.png)

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.

1. **Update** the `splitImage` schema type to include an `icon` and `preview`

```typescript:src/sanity/schemaTypes/blocks/splitImageType.ts
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 preview should now look like this:

![Missing alt text](https://cdn.sanity.io/images/3do82whm/next/169973097460feecb773977cd3a896db509387bd-2240x1488.png)

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.

1. **Update** the `hero` type block

```typescript:src/sanity/schemaTypes/blocks/heroType.ts
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,
      };
    },
  },
});
```

1. **Update** the faqs type block

```typescript:src/sanity/schemaTypes/blocks/faqsType.ts
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",
      };
    },
  },
});
```

1. **Update** the features type block

```typescript:src/sanity/schemaTypes/blocks/featuresType.ts
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",
      };
    },
  },
});
```

## Adding thumbnails

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:

![Sanity Studio showing the "add item" picker with thumbnails](https://cdn.sanity.io/images/3do82whm/next/a041688bb996a45ef745f89b43e74d3f9711d8d5-2240x1480.png)

1. **Update** the page builder schema type

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

### Create your own thumbnails

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](https://www.figma.com/community/file/1404904715260176924/arrayfield-template-for-sanity).

### Pre-designed thumbnails

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`

1. **Download**, the example thumbnails, and extract them into a `/public/block-previews` directory

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.