Best practice for specifying alt text for images in block text using Sanity
8 replies
Last updated: Jul 20, 2021
Y
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
G
Do you mean the best practice to set it up in Sanity?
Jul 19, 2021, 1:45 PM
Y
Yes, so that an editor could specify it manually
Jul 19, 2021, 1:57 PM
G
Okay, thanks for clarifying. One approach would be:
1. In Sanity, create an
2. Import that
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
1. In Sanity, create an
imageobject. 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,
},
},
],
};imageobject 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,
],
}options.isHighlighted(or set it to
false).
Jul 19, 2021, 3:15 PM
G
Okay, thanks for clarifying. One approach would be:
1. In Sanity, create an
2. Import that
This will let you and your editors add images to your portable text (block content).
1. In Sanity, create an
imageobject. 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,
},
},
],
};imageobject 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,
],
}Jul 19, 2021, 3:15 PM
Y
Thank you, how can I reference the alt field? My code:
Jul 19, 2021, 5:31 PM
Y
Thank you, how can I reference the alt field? My code (
asset.altdoesn't work):
const serializers = {
types: {
image: ({ node: { asset } }) => (
<picture>
<img
src={urlForImage(asset)}
alt={urlForImage(asset.alt)} />
</picture>
),
}
};Jul 19, 2021, 5:33 PM
G
I believe
altwill 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
Y
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.