Get help on Discord

Field level translation for Media Plugin alt text and descriptions

14 replies
Last updated: Apr 13, 2023
Hello from Copenhagen, Sanity land. Question: Anyone have any experience applying field level translation to the Media Plugin? https://github.com/sanity-io/sanity-plugin-media …maybe this is a bad idea, but I need alt text and descriptions to be multi-lingual. 😬
AI Update

Hey there from Sanity land! 👋

This is definitely doable, but there are some important considerations for applying field-level translation to the media plugin's asset metadata.

The good news: Alt text and descriptions are simple string fields, which makes them good candidates for field-level localization. Field-level translation works well for straightforward fields like strings and numbers.

How to approach this:

You'll likely need to customize the media plugin's schema to support field-level translations. The typical pattern would be structuring your alt text and description fields like this:

{
  altText: {
    en: "English alt text",
    da: "Dansk alt tekst",
    // other languages
  },
  description: {
    en: "English description",
    da: "Dansk beskrivelse"
  }
}

Since the sanity-plugin-media allows for custom asset fields, you should be able to extend the schema to support this structure. You might need to create custom input components to make the editing experience cleaner.

Important caveat: If you were planning to use Portable Text (rich text) for descriptions, field-level localization is explicitly not recommended due to attribute limit issues. But for simple strings, you're in the clear!

Alternative approach: If you run into limitations with the media plugin, you could also consider using document-level localization where you create separate asset documents per language, though that's probably overkill for just alt text and descriptions.

The Language Filter plugin could also help with the UI if you go the field-level route, making it easier to switch between languages while editing.

Not a bad idea at all for your use case – alt text and descriptions are exactly the kind of simple metadata that field-level translation handles well! 🇩🇰

Show original thread
14 replies
Yeah then you probably need to keep these text on the image and not in this plugin.
Try a custom field that has an media/image and an i18n field (where the i18n field has the languages you need)... Also you have just reminded me that I also need to do this to my own site at some point 😆
Thanks
user A
seems to be the case… but weird… it’s a weird oversight in the architecture

user V
…I thought about this, and that maybe it was even best practice to do it this way… but then I ran into another challenge, and that is that images are in a blockContent / portable text field… so I don’t know of a mechanism or method for consistently or cleanly attaching meta images that aren’t stand-alone images. 🧐
We always just do something like this and consistently only use the “figure” field when defining new images:
Cool,
user A
– but are you inserting these in the context of a portabletext field? i.e. the attached
Looks like links have this popover available, so maybe I can harness something like that for inline images? To add alt, desc, etc in the supported locales.
https://github.com/sanity-io/sanity/issues/3427
I think I might be finding an answer here for how to add this, but also thinking it can’t be right that alt text isn’t supported by default, or requires extra steps to make possible. I am probably missing something.
🙂
import React from "react"
import { defineField } from "sanity"
export const portableText = defineField({
  title: "Portable Text",
  name: "portableText",
  type: "array",
  of: [
    {
      type: "block",
      styles: [
        { title: "Normal", value: "normal" },
        { title: "H2", value: "h2" },
        { title: "H3", value: "h3" },
        { title: "H4", value: "h4" },
        { title: "Quote", value: "blockquote" },
      ],
      lists: [
        { title: "Bullet", value: "bullet" },
        { title: "Numbers", value: "number" },
      ],
      marks: {
        decorators: [
          { title: "Strong", value: "strong" },
          { title: "Emphasis", value: "em" },
        ],
      },
    },
    { type: "figure" },
  ],
})
Just add it as a block type
🙂
Anyways, I almost always prefer document level translations in situations where I would need an image inside a portable text field
user A
yeah I think I just hit another wall. And it’s super dumb… I added field level translation for alt and caption text on the image block type… and then realized / remembered I have field level translation on the whole portable text field as well! 😅 Bc, yeah… there isn’t really another way to handle it. So I’ll have to undo that addition and just ask editors to handle translation there. Without a media browser that can manage fields and locales at a higher level, it’s the only way.
It would make things you know, slightly easier / nicer if there was the ability to copy and paste these image blocks from field to field… so if anyone knows about that I am all ears.

Thanks for the figure snippet, I will use it for sure,
💯
Be aware that field level translations with portable text is an easy way to hit the attribute limit
user A
has given some great advice! Just to note in case you ever do want to write to fields inside of the Media Plugin: you can use a custom input component that writes to the media document instead of the current document. You can look at the plugin’s repo to see how they handle it. It’ll be very similar logic.
Thanks RD! This sounds pretty interesting as I’ve been keen on getting more out of the media library and having more of an experience as I had with Craft CMS like this: https://github.com/sanity-io/sanity-plugin-media/issues/128
Just a brief followup – I opted to use the Media Plugin’s alt and description fields as the source for Danish lang alt text and captions (Danish is the primary lang for the site) – using alt and description fields I added to the image block as an optional override.
This works for my needs because the portable text field is itself localized, So I have two for every page, as in the attached.

When images are added to the Danish layout, that meta can be pulled from the media library…or optionally overridden with inline alt and desc text added to the object in the block.

When images are added to the English layout, text and descriptions should be added inline.

So at the template level, we’ll just be looping over possible places the meta might live in order of preference, …and in this way find fallbacks if and where they exist.


_alt_={props.alt || props.description || props.asset.alt || props.asset.title || props.asset.description || 'Sorry, alt text for this image is missing.'}

I know this is super basic, …but maybe someone can find it useful as a strategy for localizing image meta.

Seems like it could also be expanded and vastly improved, bc if I understand
user M
correctly, then it should also be possible to add a checkbox or a toggle to enable writing/over-writing directly to the metadata of the object in the Media Plugin, …without needing to navigate away from the editor and into the Media Plugin. 🤩
Newly uploaded images with NO existing meta could have this checked by default, so data would be passed globally in the first go, again, …without leaving the editor view.

And images with
existing meta would, of course, have this toggle unchecked, so whatever they edit or input is just a local override. If a check is toggled to overwrite data in the Media Plugin, a modal warning modal would need to be cleared.
Could be neat.
😊

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?