Content Translations in Directus: Data Studio

Speaker 0: Translation station. Alright. Back to English. So here we are in our data studio working on our blog application. And as you can see, we have a collection of posts.

So let's take a look at the data model for our posts. By going over to the settings module and over to data model, we can see we have a collection called posts. And now we can see a number of fields here, including ID, the slug, which helps us construct a URL so that we can access the blog post on our application, the title of the blog post, the content of the blog post, as well as the image, publishing date, the author, and whether the blog post is published or not. So that's our data model. Let's go back to our content and take a look at the sample post I've prepared here, the ultimate guide to rabbits.

And we can see the content is already filled in and in English. But our author, Gerance, also speaks French. So what we're going to be doing in this episode is enabling folks to be able to write their content in several languages. This is going to be achieved by going back to the settings module and adding a new field to our posts collection. So I'm going to open up our post collection and click on create field.

Now Directus has a plethora of fields that we can add and even one tailored specifically for content translations. By scrolling down over to the relational section, we're going to find the translations field, which is exactly what we need. So I'm going to click on that. And I'm going to walk us through a couple of things that are going to happen. First of all, the key is filled in for us automatically called translations.

The languages collection is also filled in for us. Now you may think, well, the languages collection doesn't exist yet, but that's fine because what's going to happen is that it is going to be created automatically. We'll see that in just a moment. The last part I want to fill in is the default language of our translations. And you saw already, I had pre written this blog post in English.

So the default language for our post is going to be, is going to use the language code, which is en US. Now I'm going to go ahead and save. And a number of things just happened. The first thing you'll notice is that we now have our field of translations, which is great. But what else changed?

Let's have a look. I'm going to go back to my data model. You're going to see a couple of new collections. First off is languages. And this is the collection that I mentioned earlier would be automatically created for us.

So I'm going to open the languages collection. We're going to see it has three fields, the code, which is that en US, the name, which is English United States, and the direction, which in this case is going to be whether you read from left to right, top to bottom, right to left, and so on and so forth. But there's one more collection that got created and is also invisible. That is, you won't be able to see it when adding content. And this is the post's translations pivot table.

Now a pivot table is used to connect a post to a language because many posts can be written in many languages. So let's open it up real quick. If I go over to post translations, we're going to see we have three fields here. The ID of the post translation itself, the ID of the post, and the code of the language. That is the identifier, in this case, EMUS, of the language.

So does that mean we can go ahead and start translating our content? Well, let's hop over to our content module, open up our ultimate guide to rabbits, and you're going to see that by scrolling down, we do have the option of adding translations, but it says empty form. And the reason for this is because, yes, we do have translations, but we have no fields that we can translate. So how do we fix that? Well, let's go back to our settings module and open up that post translations collection.

Now I'm going to click on create field and add two fields. First is going to be the title. Go ahead and create that. And now the content, which is going to be a WYSIWYG or what you see is what you get field. Alrighty.

I'm going to click on save. Now, it might not seem like I changed a lot, but check this out. Soon as I go back to my content module and open up my guide once again, I'm going to scroll down real quick. Now we have translations. So we can already start by filling in our title and content.

So I'm going to go ahead and do that from our English content. Perfect. And now we can add translations for our content. So given Guerance speaks French, she has written this article in French. So I'm going to look up French, and I'm going to add in that content.

Here we go. There's our title. And now our content. Wonderful. Once this is done, I can go ahead and save my item.

And now I have a translated blog post. If I take a look, French is there. Wonderful. So this is how I can translate my content using Directus. In another episode of the show, we're going to see how we can access these translations in our applications using the Directus SDK or REST API or GraphQL API.

Alright. Well, there you have it. How to translate your content in the Data Studio using Directus. But that's not the only stop on our translation station journey. If you wanna know how to translate Directus itself, how to use translation strings, or how to access your translated content using our APIs and SDK, well, tune in for other episodes of Translation Station.

So all aboard, and I'll see you next time.