Applying field level translation to the Media Plugin for multi-lingual alt text and descriptions
14 replies
Last updated: Apr 13, 2023
K
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. 😬
Apr 12, 2023, 9:26 AM
S
Yeah then you probably need to keep these text on the image and not in this plugin.
Apr 12, 2023, 9:31 AM
C
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 😆
Apr 12, 2023, 9:50 AM
K
Thanks
user A
seems to be the case… but weird… it’s a weird oversight in the architectureuser 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. 🧐Apr 12, 2023, 9:59 AM
S
We always just do something like this and consistently only use the “figure” field when defining new images:
Apr 12, 2023, 10:01 AM
K
Cool,
user A
– but are you inserting these in the context of a portabletext field? i.e. the attachedApr 12, 2023, 10:22 AM
K
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.
Apr 12, 2023, 10:26 AM
K
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.
🙂
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.
🙂
Apr 12, 2023, 10:51 AM
S
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" },
],
})🙂
Apr 12, 2023, 10:53 AM
S
Anyways, I almost always prefer document level translations in situations where I would need an image inside a portable text field
Apr 12, 2023, 10:56 AM
K
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,
💯
Apr 12, 2023, 11:57 AM
S
Be aware that field level translations with portable text is an easy way to hit the attribute limit
Apr 12, 2023, 12:00 PM
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.Apr 12, 2023, 4:45 PM
S
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
Apr 12, 2023, 7:07 PM
K
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.
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
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.
😊
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.
😊
Apr 13, 2023, 12:41 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.