Image type: Enable alt bool in options object, to enable Alt text field

[pierrenel]

** Problem **
I ran into a situation where some SEO people wanted me to enable Alt text on all the images I've used in my Sanity/Gatsby build. To add Alt text to my images, I had to extract the image field out into it's own object, otherwise I would get that error about lifting anonymous objects:

Error: Encountered anonymous inline object "image" for field/type "slide". To use this field with GraphQL you will need to create a top-level schema type for it. See https://docs.sanity.io/help/schema-lift-anonymous-object-type

After setting up my own image object (with alt text) I had to re edit all my documents :(

Describe the solution you'd like
It would be amazing if the options object that you currently use in the image type (ie hotspot: true) would also let you enable alt text, since I think it's a common use case to want to add a text description to each image for accessibility etc.

[saasen]

The solution you are suggesting goes a little against what a customizable content model would be. The whole point is to model it yourself without us try to find the best model for you. That said, not everyone needs an alternative text, as its mostly used on the web, and similar content channels. People are using Sanity for a lot, and not only web, but books as well for example.

You can define fields on your image type if you want like this:

export default {
    title: 'My Cool Image Type',
    name: 'myImage',
    type: 'image',
    fields: [
      {
        title: 'Alternative Text',
        name: 'alt',
        type: 'string'
      }
    ]
  }

This would extend the built-in image type with your own defined fields. Documentation can be found here: https://www.sanity.io/docs/image-type.

As to how you could skip moving content from an old to a new structure, you could migrate your data using a script which grabs all of these documents, transforms the existing alternative texts where they currently are into the correct structure and patch all the documents with the new structure. That way you won't have to do any editing! (You will have to write your own script though, but I think we have something laying around for you to take a look at, at least.

[kmelve]

I think there are valid points to both here. Custom fields to asset documents are undoubtedly useful, but as @saasen points out, it has been thought of beyond alternative text. We're talking about how to go about this, but it has to be done carefully since we can't go back on it, and it has implications for how other things should work as well.

[hdoro]

I understand Sanity's position on this, but when you have to deal with the GraphQL API and portable text, you must extract an image field with alt text into a new object, such as blockImage... This in itself is no problem whatsoever, but the block preview in the editor goes from a nice full width image to a tiny, miserable square, and I have no clue how to fix it other than creating my own custom preview component 😥

Maybe you could expose a part that handles the preview like a regular _type: "image" field? 🤓

[saasen]

I see that I read the original question wrong. It would be pretty nice to be able to do this!

---

I understand Sanity's position on this, but when you have to deal with the GraphQL API and portable text, you must extract an image field with alt text into a new object, such as blockImage... This in itself is no problem whatsoever, but the block preview in the editor goes from a nice full width image to a tiny, miserable square, and I have no clue how to fix it other than creating my own custom preview component 😥

Isn't this a different issue, @hcavalieri?

[hdoro]

Sorry for the wait! Yup, I believe this is a different issue, related only to custom image types and their previews :)

[jacdx]

Faced this same issue (the original one) today. And @saasen 's custom type was an elegant solve.

[pushred]

It seems like this is supported now, I somehow missed that (or it's a recent addition) and already went to the trouble of adding an object to encapsulate the image + additional fields. Leaving this message for any other souls on that journey!

See image type fields array