Use object title in pageBuilder preview

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 definitely use the object's schema type title in the preview! The key is to manually set it in your prepare function. While the prepare function doesn't automatically receive access to schema metadata, you can simply reference the title you've already defined in your schema.

Here's how to do it for a pageBuilder array:

{
  name: 'twoImages',
  type: 'object',
  title: 'Two Images',
  fields: [
    // your fields here
  ],
  preview: {
    prepare() {
      return {
        title: 'Two Images', // Use your schema title here
        subtitle: 'Your custom subtitle here'
      }
    }
  }
}

For better maintainability, you can store the title in a constant so you don't repeat yourself:

const TWO_IMAGES_TITLE = 'Two Images';

export default {
  name: 'twoImages',
  type: 'object',
  title: TWO_IMAGES_TITLE,
  fields: [
    // your fields here
  ],
  preview: {
    prepare() {
      return {
        title: TWO_IMAGES_TITLE,
        subtitle: 'Your custom subtitle here'
      }
    }
  }
}

According to the preview configuration documentation, the prepare function receives the selection object containing the fields you've selected, but it doesn't have built-in access to schema metadata. The approach above ensures your preview displays the schema type title consistently.

You can also combine this with selected fields if you want to show both the type name and some dynamic content:

preview: {
  select: {
    image: 'images.0'  // select first image if you have one
  },
  prepare(selection) {
    return {
      title: 'Two Images',
      subtitle: selection.image ? 'Has images' : 'No images yet',
      media: selection.image
    }
  }
}

This pattern works great for pageBuilder arrays where you have multiple object types and want each to clearly display what type of block it is!

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
user V
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.

Was this answer helpful?