Skip to content
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?