Creating a field in Sanity for a blog and generating an excerpt, with discussion on previewing references and using a renderer component.

15 replies
Last updated: Apr 4, 2022
Hello there,I'm using Sanity for a blog, and I wonder if there's some way to create a field that gets populated with the text from another field (a blockContent).
Initial thought:


name: "excerpt",

title: "Excerpt",

type: "string",

options: {


maxLength: 96,

Or can an excerpt get generated for the blockContent in an easier way?
(Sometimes the blogposts starts with a picture and sometimes with text, so I don't want to get the data by doing something static like
Mar 11, 2022, 3:11 PM
yeah, there are other ways. Were do you want to excerpt to appear (front end or as a preview within the sanity studio?
Mar 11, 2022, 4:06 PM
user M
Do you have examples for how to do a preview in sanity studio?
Mar 16, 2022, 7:01 AM
user E
Yeah I do. But can you tell me a bit more: Where do you want to preview the exerpt? I have quite a lot of examples and not a lot of time at the moment, so this will help me find the right one for you :)
Mar 16, 2022, 12:27 PM
The simplest cases is where I'd like to show incoming references.• In a folder, I have
to a parent folder, but no obvious solution to list the children. Children being other folders with this
in the parent field.• Similarly, a list and links to all articles that have
to this article.I've managed to produce a desk structure that gives me the overview I need but it would be more useful in the document view it self.

Thanks for taking the time
user M
Mar 16, 2022, 12:43 PM
Now I think I know what you need and will find that for you later …
Mar 16, 2022, 12:54 PM
user M
Sorry to put a ⏲️ on you but you got me excited and curious to see some examples 😄
Mar 18, 2022, 7:59 AM
user E
So i FINALLY found my code for it.
Apr 4, 2022, 12:51 PM
import { BsTypeH1 } from "react-icons/bs";
import React from 'react'

const Preview = ({ value }) => {
    const { headline, subline, body } = value;

//This is just so I dont have to use types in this example, In my code I have a preview component in src-folder
    let subline2;
    subline ? subline2 = subline.slice(0, 20) : subline2 = null;

    let body2;
    body ? body2 = body.slice(0, 90) : body2 = null;

    return (
        <div style={{ display: 'flex', alignItems: 'center' }}>

            <BsTypeH1 style={{ verticalAlign: 'middle', fontSize: '1.5em', padding: '0 10px' }} />

                Text Header Section: <strong>{headline}</strong> <br />
                <span>{subline2}</span><br />
                {body && <small>{body2}...</small>}

export default {
    name: 'headerSection',
    title: 'Text Header Section',
    type: 'object',
    icon: BsTypeH1,
    fields: [

            name: 'headline',
            type: 'string',
            rows: 2,
            name: 'subline',
            title: 'Subline',
            type: 'text',
            rows: 1,
            name: 'body',
            title: 'Body',
            type: 'richText',
    preview: {
        select: {
            headline: 'headline',
            subline: 'subline',
            body: 'body',
            media: 'icon'
        component: Preview

Apr 4, 2022, 12:53 PM
Using the `.slice`method worked great for me INSIDE the studio
Apr 4, 2022, 12:55 PM
outside will follow, I am on the search at the momentz
Apr 4, 2022, 12:55 PM
Ok, I think I see what you do here.. And this is just manipulating the preview of a document from the "outside". Like when you se a list of documents in studio. (?)
Apr 4, 2022, 1:02 PM
AH and now I found an example for a preview of a reference inside the studio:1. The structure in my richText (blockContent) which references a job and then I setup the preview (renderer) component
2. Renderer job
Apr 4, 2022, 1:04 PM
user E
i don’t get your question 🙈Wait I’ll post another pic, so it is more clear
Apr 4, 2022, 1:06 PM
So in order to be able to display or preview any schema, you can do that INSIDE the schema you want to preview (reference) later -> then you can be sure, that it will be displayed right everywhere.
Apr 4, 2022, 1:09 PM
Yep! Nice. I'll try this out. Thanks
Apr 4, 2022, 1:13 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?