Get help on Discord

Use object title as preview in pageBuilder array

7 replies
Last updated: Aug 18, 2020
Does anyone know if it is possible to use the title of the object in the preview for a pageBuilder? e.g if I have an object called 'Two Images' can I have that as the preview title
AI Update

Yes! You can display the schema title (like "Two Images") in your preview. The correct way to do this is with a custom preview component, since the prepare function doesn't have direct access to the schema type information.

Here's how to implement it:

Custom Preview Component Approach

import {defineType} from 'sanity'

const CustomPreview = (props: PreviewProps) => {
  return props.renderDefault({
    ...props,
    title: props.schemaType?.title
  })
}

export const twoImagesType = defineType({
  name: 'twoImages',
  type: 'object',
  title: 'Two Images',
  fields: [
    // your fields here
  ],
  components: {
    preview: CustomPreview
  }
})

The custom preview component receives props.schemaType.title, which will be "Two Images" as defined in your schema.

For PageBuilder Arrays

When using this in a pageBuilder array, apply the custom preview to each object type:

{
  name: 'pageBuilder',
  type: 'array',
  of: [
    {
      name: 'twoImages',
      type: 'object',
      title: 'Two Images',
      fields: [/* ... */],
      components: {
        preview: (props) => props.renderDefault({
          ...props,
          title: props.schemaType?.title
        })
      }
    },
    {
      name: 'heroSection',
      type: 'object',
      title: 'Hero Section',
      fields: [/* ... */],
      components: {
        preview: (props) => props.renderDefault({
          ...props,
          title: props.schemaType?.title
        })
      }
    }
  ]
}

Combining Schema Title with Dynamic Content

You can also combine the schema title with other field data:

const CustomPreview = (props: PreviewProps) => {
  const {title, media} = props
  
  return props.renderDefault({
    ...props,
    title: props.schemaType?.title,
    subtitle: title || 'No content yet',
    media: media
  })
}

This approach is perfect for pageBuilder scenarios where you want editors to easily identify block types by their schema names without maintaining separate title fields. You can read more about this in the Sanity documentation on preview configuration and custom preview components.

Show original thread
7 replies
My page builder pulls the title for objects from the object itself
So if the object has a title set that is what is shown, see how here
https://www.sanity.io/docs/previews-list-views 🙂
Sure, but I am not adding a title. I would like the title to be the title of the object rather than one set by the user
basically I just want to be able to put a string in there
have you tried something like this:
title: `some title`
Yes, I thought back ticks would work but it still says untitled for some reason
I think you should be able to do something like this:

  preview: {
    prepare() {
      return {
        title: "Two Images",
      };
    },
  },
That worked
Jayne Mast
thank you

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?