👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

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: {

source: "GET THE BLOCK CONTENT",

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
post.body[0]
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
_ref
to a parent folder, but no obvious solution to list the children. Children being other folders with this
_id
in the parent field.• Similarly, a list and links to all articles that have
_ref
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
hi
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' }} />


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


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 -&gt; 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

Sanity is a modern 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?