This article was written for a legacy version of Directus. Only reference this information if you are using Directus 6 and can not upgrade to version 7.

Multilingual Content Setup in Directus (i18n)

The Directus Webapp is available in a multitude of languages, including Japanese, Spanish, Dutch, and even Norwegian. You can also store content in as many languages as needed using the translation interface. In this example, I’ll show you how to set-up multilingual content within an Articles table.

Our goal is to create articles with title and body fields—both of which can be translated into multiple languages — as well as a featured image and publish date that’s used for all languages.

Feel free to follow along using your own table(s) if you already have a project set up! I’ll add a note when I use a name specific to my project’s articles table.

Directus provides you with a relational interface called translations which renders a special view to easily create and edit translations in any language. Before we can add that to our table, we need to set up two additional tables to save our supported languages and the translated content.

Languages table

The languages table stores all the different language options you want to support in your project. I use a text-datatype for the primary key (pk) of this table, which structures my languages table as follows:

| code (pk) | name       |
|-----------|------------|
| en        | English    |
| nl        | Dutch      |
| es        | Spanish    |

This is just my personal preference. Using a standard (numeric) primary key and saving just the name is enough to make the translations interface work. To setup the schema above, remove the default ID Primary Key interface and re-add the Primary Key interface using a string based datatype, like char or varchar.

Note: you don’t need to create a separate languages table for each “main” table. However, you can if your project requires different languages for certain tables.

Translation table

This table holds the columns/interfaces which are going to be different for each language (translated). I personally like to name the table {{table}}_translation to easily identify which main table it belongs to. That means we’ll call this one articles_translations.

Content columns and interfaces of articles_translations

Each translation needs to be connected to a language and a specific article so that Directus can map which translations go with which articles. Let’s add extra columns for these two foreign keys.

Updated columns and interfaces of articles_translations. Note: the column ‘Article’ is actually named `article_id`. Directus hides the `_id` bit.

Setting up the translations interface

With the languages and articles_translations tables set up, we’re ready to configure the main articles table. Columns that are added in this table — beside the translation interface — won’t be translated.

Let’s start off by adding featured_image (Single File interface) and date_published (Datetime interface) columns — these won’t be translated and are therefore the same for each language. Next up, add a column called translations (or whatever name you prefer) with the translation interface.

Now we connect the articles table to articles_translation by setting the one-to-many relationship from articles.id to the articles_id column within articles_translations.

Connecting the articles table to articles_translations

Next, the Translation interface requires you to fill in the names of the columns we configured earlier. If you followed the steps above and used the same names, these should all make sense. If you didn’t, or you’re not exactly sure what’s what, here are the options:

Languages Table: The name of the table which holds all supported language options.

Languages Name Column: The name of the column within the languages table which holds the language name (eg: “English”).

Languages Code Column: (optional) The name of the column which holds the language code.

Default Language: The ID of the row which holds the default language name. For example, this might be 1 if using an INT, or en if using a VARCHAR.

Left Column Name: The name of the column that stores the primary key of the languages table in the translations table.

If you followed along with the articles table setup, the values should look like this:

Values for the settings of the translations interface

We now have access to this simple-to-use translations interface within each article! You can edit the content of each supported language by selecting it from the dropdown. The interface automatically saves all changes to content when you change between languages.

The translation interface in action

We hope this tutorial helps you better understand how to set up multilingual content authoring within Directus. If you have any questions, we’d love to hear them in the comments!

We are very happy (and proud) to be able to support so many languages in the Directus Webapp, however, there are still many more needed. If you notice your native language missing from the Directus locales, please help us out by submitting your translation!

Happy coding!

Your friends at Directus

🐰

Update Oct 9 2017

• Fix reference to wrong table