Show Portable Text in Preview When Title is Missing
You can show the portable text content when the title is not provided by adding the portable text field to your select object and then conditionally using it in the prepare function. Here's how:
preview: {
select: {
title: "title",
media: "image",
portableText: "yourPortableTextField" // Add your portable text field name
},
prepare({ title, media, portableText }) {
// If there's no title, extract text from portable text
const displayTitle = title ||
(portableText && portableText[0]?.children?.[0]?.text) ||
'Untitled';
return {
title: displayTitle,
subtitle: "Text and Image",
media,
};
},
},The key here is accessing the portable text content. Since portable text is an array of blocks, you need to drill into the structure to get the actual text. The pattern portableText[0]?.children?.[0]?.text gets the text from the first child of the first block.
If you want to be more robust and handle multiple blocks or extract more text, you could do something like:
prepare({ title, media, portableText }) {
let displayTitle = title;
if (!displayTitle && portableText) {
// Get text from first block that has content
const firstBlock = portableText.find(block => block._type === 'block');
displayTitle = firstBlock?.children?.[0]?.text || 'Untitled';
}
return {
title: displayTitle,
subtitle: "Text and Image",
media,
};
},This approach gives you a fallback chain: use the title if it exists, otherwise extract text from the portable text field, and finally fall back to "Untitled" if neither is available.
Show original thread16 replies
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.