Content

Translations

Both content and the data studio can be translated into multiple languages.

Localising content in Directus involves using translation strings, which are multilingual key-value pairs that you can use throughout the app. They enable you to translate things like dropdown options, placeholder text, field notes, and more.

Translation strings

Data Studio Translations
This article refers to translating your content in Directus. Many parts of the Data Studio are already translated into multiple languages via community contribution on Crowdin.

Create a Translation String

Form to create a translation string

To create a translation string, navigate to Settings > Translation Strings and click on in the page header and a drawer will open.

Add a key and click on "Create New" to open another drawer. Select the language and type in the corresponding translation. Click on to confirm and add the translation.

Use a Translation String

Using a translation string on a field

Throughout the settings module, you will notice certain input fields have a icon on them, meaning you have the option assign a translation string.

To assign a translation string, navigate to the input that you'd like to add a translation string to. There are two ways to assign a translation string:

  • Click and a dropdown menu with all translation strings will appear.
  • Type $t:translation-string-key and hit enter.

Choose a translation string key as desired.

Switching Language
There are two ways to change the app language. Administrators can set the project's default language, while users can choose their own personal language preference.
Adding New Translation Strings
You can also click ":icon{name="material-symbols:add-circle-rounded"} New Translation String" in the dropdown menu to create a new translation string on the fly.

Content Translations

With Directus, you can localize your content into several languages using a translations field on a given collection.

Creating a translations field

Once this field is added to a collection, a few new collections will be created. One being a pre-populated languages collection, as well as a hidden <colletion-name>_translations collection.

In the "Data Model" section of the settings module, navigate into the <colletion-name>_translations collection and add the fields which you'd like to translate.

Post translations collection showing it has a title and content field added

Now, when editing an item of that collection, you'll be able to add translations for those fields.

Creating a post with a title in both Spanish and English