Skip to content
📆 Don't miss our Sanity Showcase virtual meetup on March 20th!
Get help on Slack

Best practice for specifying alt text for images in block text using Sanity

8 replies
Last updated: Jul 20, 2021
Hi, is there a best practice to specify alt text for an image embedded in a block text (I'm using block-content-to-react)?
Jul 19, 2021, 10:05 AM
Do you mean the best practice to set it up in Sanity?
Jul 19, 2021, 1:45 PM
Yes, so that an editor could specify it manually
Jul 19, 2021, 1:57 PM
Okay, thanks for clarifying. One approach would be:
1. In Sanity, create an 
image
object. Let’s say this lives at schemas/objects/customImage.js:
export default {
  name: "customImage",
  title: "Image",
  type: "image",
  options: {
    hotspot: true,
  },
  fields: [
    {
      title: "Alternative Text",
      name: "alt",
      type: "string",
      validation: Rule => Rule.required(),
      options: {
        isHighlighted: true,
      },
    },
  ],
};
2. Import that 
image
object into your portable text schema:
import customImage from './customImage';

export default {
  name: "content",
  title: "Content",
  type: "array",
  of: [
    {
      type: "block",
      styles: [
        // ...
      ],
      marks: {
        decorators: [
          // ...
        ],
        annotations: [
          // ...
        ],
      },
    },
    customImage,
  ],
}
This will let you and your editors add images to your portable text (block content) and set alt text in a field that will show directly below the image upload widget. If you’d rather the alt text hide behind the Edit details button, you can get rid of 
options.isHighlighted
(or set it to 
false
).
Jul 19, 2021, 3:15 PM
Okay, thanks for clarifying. One approach would be:
1. In Sanity, create an 
image
object. Let’s say this lives at schemas/objects/customImage.js:
export default {
  name: "customImage",
  title: "Image",
  type: "image",
  options: {
    hotspot: true,
  },
  fields: [
    {
      title: "Alternative Text",
      name: "alt",
      type: "string",
      validation: Rule => Rule.required(),
      options: {
        isHighlighted: true,
      },
    },
  ],
};
2. Import that 
image
object into your portable text schema:
import customImage from './customImage';

export default {
  name: "content",
  title: "Content",
  type: "array",
  of: [
    {
      type: "block",
      styles: [
        // ...
      ],
      marks: {
        decorators: [
          // ...
        ],
        annotations: [
          // ...
        ],
      },
    },
    customImage,
  ],
}
This will let you and your editors add images to your portable text (block content).
Jul 19, 2021, 3:15 PM
Thank you, how can I reference the alt field? My code:
Jul 19, 2021, 5:31 PM
Thank you, how can I reference the alt field? My code (
asset.alt
doesn't work):
const serializers = {
    types: {
      image: ({ node: { asset } }) => (
        <picture>
          <img
            src={urlForImage(asset)}
            alt={urlForImage(asset.alt)} />
        </picture>
      ),
    }
  };
Jul 19, 2021, 5:33 PM
I believe 
alt
will be a child of 
node
, so you’ll want to include it when you destructure 
node
. Perhaps:

const serializers = {
    types: {
      image: ({ node: { asset, alt } }) => (
        <picture>
          <img
            src={urlForImage(asset)}
            alt={alt} />
        </picture>
      ),
    }
  };
Jul 19, 2021, 5:43 PM
You're right, it works. Thank you for helping
Jul 20, 2021, 3:44 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.

Get started for freeExplore the demo

Was this answer helpful?

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
How to turn PortableText into plain text in Javascript?Dec 7, 2020
Rendering nested block contentJan 18, 2021
Warning: Data for Page Exceeds the Threshold of 128 kBAug 17, 2022
List Arrays - Is it Possible to Fill a List Array Within a Schema Asynchronously?Mar 16, 2021
Custom Document Views - Is it Even Possible to Use the Structure Builder?Apr 21, 2022
TypeError: Cannot Read Properties of Null (Reading 'jsonType')Sep 28, 2022
Error in custom validation rule for schema in Slack threadAug 18, 2023
GraphQL query resolving references on a _raw field in GatsbyMay 17, 2022
How to populate a list of values in a Sanity schema using a separate fileSep 6, 2021
How to fetch an array of images using groq in Sanity.ioMay 21, 2023

Related contributions

Turbo Start Sanity
Template

Featured

The battle-tested Sanity template that powers Roboto Studio's websites

Schema UI - Next.js Sanity Starter
Template

Featured

A Next.js starter template with Next.js 15, Tailwind CSS, shadcn/ui, and Sanity CMS with Live Editing. Get production-ready React components with matching Sanity schemas and queries. Build dynamic pages faster while keeping full control over customization.

Serge Ovcharenko

The Swaddle
Made with Sanity

Featured

A new brand identity to represent a more mature company, to signify The Swaddle’s evolution from publisher to production house, combined with an easier to navigate platform that can surface multiple content types - drawing readers through The Swaddle’s content offering.

Nightjar