Unlock seamless workflows and faster delivery with our latest releases – get the details

Missing "displayExcerpt" and "displayTitle" fields on the front page. Code and schema provided. Query needs to fetch those fields. Issue resolved with help.

14 replies
Last updated: Nov 2, 2021
I got to the post page title and excerpt working in the post page, but i am missing the "displayExcerpt" and "displayTitle" on the front page. A little unsure what I'm missing, I swapped "titles" and "excerpt" for "hero. post" and "more.articels" to "displayTitle" and "displayExcerpt". What am I doing wrong?

Oct 25, 2021, 10:39 PM
Hi, will this be followed up?
user M
Nov 1, 2021, 2:17 AM
Hey User! As I recall from your previous thread, you'll need to do two things:1. Make sure your query is fetching those fields
2. Make sure you're rendering the data that's fetched.
Feel free to share your current code and I can take a look again.
Nov 1, 2021, 7:34 PM
studio/schemas/post.js:
export default {
  name: 'post',
  title: 'Artikler',
  type: 'document',
  fields: [

    {
      name: 'displayTitle',
      description: 'Title for displaying on the FRONT PAGE',
      title: 'Display Title',
      type: 'string'
    },
    {
      name: 'displayExcerpt',
      description: 'Excerpt for displaying on the FRONT PAGE',
      title: 'Display Excerpt',
      type: 'string'
    },
    {
      name: 'displayImage',
      description: 'Image for displaying on the FRONT PAGE',
      title: 'Display Image',
      type: 'image'
    },
    {
      name: 'title',
      title: 'Display Main Title',
      description: 'Title for displaying on the POST PAGE',
      type: 'string'
    },
    {
      name: 'excerpt',
      title: 'Display Excerpt',
      description: 'Excerpt for displaying on the POST PAGE',
      type: 'text',
    },
    {
      name: 'slug',
      title: 'Slug',
      description: 'Displaying in the end of the URL',
      type: 'slug',
      options: {
        source: 'title',
        maxLength: 96
      }
    },
    {
      name: 'mainImage',
      title: 'Main image',
      description: 'Image for displaying on the POST PAGE'
      type: 'image',
      options: {
        hotspot: true
      }
    },
    {
      name: 'tags',
      title: 'Tags',
      type: 'tags',
    },
    {
      name: 'categories',
      title: 'Categories',
      type: 'array',
      of: [{type: 'reference', to: {type: 'category'}}]
    },
    {
      name: 'author',
      title: 'Journalist',
      type: 'reference',
      to: {type: 'author'}
    },
    {
      name: 'publishedAt',
      title: 'Published at',
      type: 'datetime'
    },
    {
      name: 'body',
      title: 'Body',
      type: 'blockContent'
    }
  ],

  preview: {
    select: {
      title: 'title',
      author: 'author.name',
      media: 'mainImage'
    },
    prepare(selection) {
      const {author} = selection
      return Object.assign({}, selection, {
        subtitle: author && `av ${author}`
      })
    }
  }
}

template/components/hero-post.js:
import Avatar from '../components/avatar'
import Date from '../components/date'
import CoverImage from '../components/cover-image'
import Link from 'next/link'

export default function HeroPost({
  title,
  coverImage,
  date,
  excerpt,
  author,
  slug,
  displayExcerpt,
  displayTitle
}) {
  return (
    <div>
      <div className="mb-5 md:mb-5">
        <CoverImage slug={slug} imageObject={coverImage} title={title} url={coverImage} />
      </div>
      <div className="md:grid md:grid-cols-1 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
          <p className="text-1xl lg:text-2xl leading-relaxed mb-4">{displayExcerpt}</p>
          <h3 className="mb-4 text-7xl lg:text-8xl leading-tight">
            <Link as={`/posts/${slug}`} href="/posts/[slug]">
              <a className="hover:underline">{displayTitle}</a>
            </Link>
          </h3>
      </div>
    </div>
  )
}
Is this correct?
Nov 1, 2021, 8:09 PM
That looks correct. What does it look like on your frontend?
Nov 1, 2021, 8:28 PM
template/pages/index.js
import Container from '../components/container'
import MoreArticles from '../components/more-articles'
import HeroPost from '../components/hero-post'
import Navbar from '../components/Navbar'
import Layout from '../components/layout'
import { getAllPostsForHome } from '../lib/api'
import Head from 'next/head'
import styles from '../styles/Home.module.scss'

export default function Index({ allPosts, preview }) {
  const heroPost = allPosts[0]
  const morePosts = allPosts.slice(1)
  return (
    <>
      <Layout preview={preview}>
        <Head>
          <title>******* | ******</title>
        </Head>
        <Navbar />
        <Container>
          {heroPost && (
            <HeroPost
                title={heroPost.title}
                coverImage={heroPost.coverImage}
                date={heroPost.date}
                author={heroPost.author}
                slug={heroPost.slug}
                excerpt={heroPost.excerpt}
                displayTitle={heroPost.displayTitle}
                displayExcerpt={heroPost.displayExcerpt}
            />
          )}
          {morePosts.length > 0 && <MoreArticles posts={morePosts} />}
        </Container>
      </Layout>
    </>
  )
}

export async function getStaticProps({ preview = false }) {
  const allPosts = await getAllPostsForHome(preview)
  return {
    props: { allPosts, preview },
    revalidate: 1
  }
}
Displayexcerpt and displayTitle doesn't show.
Nov 1, 2021, 8:56 PM
user M
was this what you meant? Please let me know so I can learn how to get it right! ☺️
Nov 2, 2021, 9:46 PM
Can you share your repo?
Nov 2, 2021, 9:53 PM
Can you share your repo?
Nov 2, 2021, 9:53 PM
Got it. Your query isn't fetching 'displayExcerpt' or 'displayTitle', so there's not data to render in your component.
Nov 2, 2021, 10:15 PM
How do I make the query fetch ‘displayExcerpt’ and ‘displayTitle’ in the component?
Nov 2, 2021, 10:19 PM
You could need to add it to the
postFields
const here .
Nov 2, 2021, 10:21 PM
Thanks! It worked now 👍
Nov 2, 2021, 10:24 PM
Nice! Glad we got it sorted out!
Nov 2, 2021, 10:25 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?