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

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.

Was this answer helpful?