Heading, text, and illustration

By Knut Melvær

Schema for a text with a heading and a illustration with a caption.

Text with illustration block

// textWithIllustration.js
export default {
  name: 'textWithIllustration',
  type: 'object',
  title: 'Text with Illustation',
  fields: [
    {
      name: 'heading',
      type: 'string',
      title: 'Heading'
    },
    {
      name: 'text',
      type: 'simpleRichText', // or text, or simpleRichText depending on what you want to allow,
      title: 'Text'
    },
    {
      name: 'illustration',
      type: 'figure', // image field with alt and caption fields
      title: 'Illustration'
    }
    /*
    {
        name: 'alternate',
        type: 'boolean',
        title: 'Use alternative position'
    },
    */
  ]
}

Figure

// figure.js
export default {
  name: 'figure',
  type: 'image',
  title: 'Figure',
  fields: [
    {
      name: 'alt',
      type: 'string',
      title: 'Alternative text',
      description: `Describe the image for people who can't see it`,
      isHighlighted: true
    },
    {
      name: 'caption',
      type: 'string',
      title: 'Caption',
      description: `Text that's displayed with the image`,
      isHighlighted: true
    }
  ],
  options: {
    hotspot: true
  }
}

Simple rich text

// simpleRichText.js
export default {
  name: 'simpleRichText',
  type: 'array',
  title: 'Text',
  of: [
    {
      type: 'block',
      styles: [],
      lists: []
    }
  ]
}

With this schema, you can let editors add a section that contains a heading, some rich text, and an illustration with alternative text and a caption. This is a common pattern in article and landing page layouts, but not restricted to it.

Most times you want the presentation layer and the design system to decide how the text and image should be composed. Alternations between the position of the text and image can be programmed so that editors don't have to figure out this themselves.

I've added a commented-out boolean to select an “alternative position” instead of explicit directions (like “left” and “right”). This makes the content more agnostic to its presentation, more compatible with responsive design (where you don't have horizontal space always), multichannel publishing, and redesigns.

Contributor

Other recipes by the contributor

First Published Timestamp Function

Featured contribution
Official(made by Sanity team)

Automatically track when content was first published with a timestamp that sets once and never overwrites, providing reliable publication history for analytics and editorial workflows.

Knut Melvær
Go to First Published Timestamp Function

Automatically tag blog posts

Featured contribution
Official(made by Sanity team)

AI-powered automatic tagging for Sanity blog posts that analyzes content to generate 3 relevant tags, maintaining consistency by reusing existing tags from your content library.

Go to Automatically tag blog posts