Mastodon

I’ve recently been playing with Directus as a backend for some small projects. One of the great features that Directus provides is translation support which I decided to try out. Unfortunately, it when it came to the setup I couldn’t find much documentation on this so it took me a bit of read and some trial and error to figure it out.

This articles shares my findings and shows how easy it is to setup.

Setup your collection

Select an existing (or create a new collection) that you want translations for. Don’t add any fields that need translations just yet!

An example of a categories collection that we want to add translations to

Next, click on Create Field and choose the ‘Translations’ type field:

The default options for the Translation field are fine for now

If you like you can modify some of the field configuration by clicking the Continue in Advanced Field Creation Mode. For example I prefer using UpperCamelCase for my table names, so I modified the languages table name to Languages

Setup Translation Fields

Once you’ve done that go back to the Data Model screen. Here you’ll see a new hidden collection, in my case Categories Translations

Click into the Categories_Translations table, and within this collection add all the fields for Categories that need translations. e.g.:

The id, Categories_id, Languages_id fields are created automatically when you setup the translations on Categories. I added Name and Description

Add Translated Content

Now, go to the Content menu and choose your collection. You’ll see the fields you’ve added to the Translations table appear with the option to fill them out in different languages.

Example of adding translated content

Here you can use the Translations input to select a language, and then use the input fields below to populate the content in your selected Language. There’s even a split view which is very handy if you’re translating content from one language to another.

Managing Languages

You can control which Languages appear by modifying the entries in the Languages collection. By default Directus populates that table with 8 common languagues.

Hopefully this demonstrates how easy it is to add translated content in Directus. Of course, if there’s fields that don’t need translation you just add them in the parent table – in this case the Categories collection.

0
Would love your thoughts, please comment.x
()
x