String Translations in Directus

Speaker 0: Hey, everybody. My name is Carmen, and I'm a Developer Educator at Directus. Now, don't worry. Your TV settings aren't wrong. Those are indeed Spanish subtitles you see under me.

But why Spanish? Well, because this is Translation Station, the show all about localization and translations using Directus. In this episode, I'll be showing you how to use translation strings, multilingual key value pairs that you can use throughout your Directus project for things like drop downs, placeholder text, field notes, system collections, and more. So get ready, everybody, because next up is Translation Station. Alright.

Here we are in my Directus project, which is dedicated to my blog. You can see we have a collection here called posts, which is the one we're going to be working with during this episode. Let's go ahead and take a look at its data model. I go to settings and then click on posts. We're going to see we have, amongst other fields, an ID, a slug for accessing our blog with an application, the title of the blog post, the content of the blog post, as well as author, publishing date, the image, and whether it's published or not.

Now, one thing I'd like to do is add a field to specify the language that our blog post is written in. So I'm gonna go ahead and click on create field and then look for the dropdown. So we're gonna call this language. It's gotta be a string. And we need to add a few choices for this.

So I'm gonna go ahead and click on create new. First one is going to be English. The value will be en west. And I'm gonna go ahead and do the same for the remaining languages. German.

And finally, French. Perfect. Let's go ahead and save that field. Now we can go into our content and specify the language of our blog post. So given this post is written in English, I'm going to set the language here to English.

So this is great. But what happens if I set my DirectUs project to another language? What if, for example, I set it to French? Looks good. But notice what happens when I look at the language dropdown itself.

Everything else is perfectly in French, but the language dropdown is still in English. The way we can achieve having these different values in different languages is using translation strings, which is what we're going to be adding next. So back in our settings model, we've got hold on. Let me set this back to English for a sec. Lovely.

Back in our settings module, there's a tab here called Translations. And you can see I've been hard at work creating translation strings for us. So for German, for example, we've got English, Spanish, Deutsch, We've got English, German, Spanish, and French for English. We've got English, Aleman, Francis, and Espanol for Spanish, and English, Francais, Espanol. Hold on.

We still need German. Let's go ahead and add that. Then click here on the plus button. So the key needs to match the same key for every language. So English is going to be English across all languages.

In this case, we want to specify German. We want to specify the language to be French. And the value is going to be the name of German in French, which in this case is Aleman. Go ahead and save that. Fantastic.

Now we've got all of our translation strings ready. So now we just need to integrate them into our data model. This can be achieved by going back to the data model, going back to posts, going back to our language dropdown. And then for each of these, check it out. This translation button here allows us to specify a translation string.

So now I can go ahead and set these to be the translation strings. And when I change my language, it's going to display the correct language name. So that's all saved. What happens now? Let's go look at my data model again.

So we can still see English, Spanish, German, and French, which is great. But let's now change the language of our directus instance to be French. And now let's see what happens. So directus is in French. And if I go over to our guide once again, scroll down, and now we can see the correct language is displayed.

Now you might be wondering hold on. Put this back in English one more time. There we go. Cool. Now you might be wondering, where else can I use these translation strings?

Well, really this can be used anywhere where you saw that translation button. For example, the notes, a placeholder, and a variety of other ways to do this. For example, if you wanted to have displayed different names for your system collections, you can add a custom dropdown field for that translation key. Just an idea. But all in all, that's how you use translation strings to integrate multiple languages into your Directus project.

Alright. Well, there you have it. As you can see, we can use translation strings in a multitude of ways to make it more accessible for folks speaking other languages to work on our Directus project. But that's not the only stop on our journey at Translation Station. If you wanna know how to contribute to Directus' localization itself, how to translate your content in the data studio, or how to access your translated content from our SDK or other APIs, check out the other episodes.

So get ready everybody because next stop after this is Translation Station. See you soon.