Create a multilanguage website in Drupal
The project we are working on may require adaptation of the content to other languages, sometimes even the complete translation of the user interface into multiple languages. This can be a laborious and heavy task depending on the technology we use. Drupal 8 makes it very easy for us.
Why create a multilingual website
The Internet has rapidly globalized, reaching historic numbers. In fact, the latest report carried out in January 2018 shows that 53% of the world population has access to the internet (4,021 million)
That is why web accessibility makes more and more sense, that is, ensuring that that 53% are able to locate, enter, navigate and understand our website without problems. Carrying out this requires a lot of work, but one of the essential factors is the translation of our site according to our scope (target audience).
In addition to promoting accessibility, we achieve better positioning favoring the SEO of our website. Positioning is essential so that search engines are able to locate and position our site better.
If you already have more than enough reasons to convert your Drupal 8 into a multilanguage website, let's wait no longer.
Multilanguage modules in Drupal 8
Drupal 8 brings with it four modules that will be responsible for the translation of content, configuration and user interface and they will be the ones we are going to use.
Language. It is the “mother” module, similar to “Locale” of Drupal 7 and is required by the other modules. It allows you to change the language or add others. By default it is disabled, unless we select a language other than English when installing Drupal.
Content Translation. It is the module that is responsible for providing an interface in which we can enable or disable the entities that we want to be translatable.
Interface Translation. It is the module that is responsible for translating user interface strings.
Configuration Translation. It is the module that is responsible for translating different configuration elements, such as variables, field labels, text formats, menu names, roles, etc...
Add multilanguage to our Drupal website
To start, we need to download and install Drupal 8 and I will explain how to do it from scratch using composer and drupal-project here.
Once we have completed the steps in the post along with the installation setup and we have our Drupal 8 project ready and running in the browser, we will move on to the next step.
We must keep in mind that if we have left English as the default language, the Language module will be disabled, so we will have to activate it manually.
To activate the Language module we must go to Extend and look for the “Multilingual” block, in which we can find the 4 translation modules.
Once we activate the Language module, we can enable the others. This is because Language is a dependency on the other modules.
Once installed, we will go to Configuration > Regional and language > Languages. Next we are going to add a new language, clicking on “Add language”. A drop-down menu will appear, where we must select the language we want to add. In our case we will add Spanish, but if the language does not appear in the list, we will select “Custom language…”.
If the language is in the list, the system will connect directly to the translation server to automatically download and import all available translations, both in core and in contributed modules.
As we can see in the image, Drupal 8 today translates close to 100% of the entire interface into Spanish thanks to the immense community behind it, contributing day by day to the translations.
However, if we select “Custom language…” we must add the language code, the name and the address in which it is will present the text on the screen.
Drupal translations are located at https://localize.drupal.org/, where the community periodically adds new translations and Moderators are in charge of reviewing them to register them on the translation server.
Now it is the turn to select which entities will be translatable and what language they will have by default. This can be configured from Configuration > Regional and Language > Content language and translation.
Once we have studied what will be translatable (this largely depends on the dimensions, time and budget of the project), we will select the type of entity and below we will mark the “ Content type” as translatable. The default language that we will leave will be English, but we can choose between one of the added languages, the one selected in the interface, the one the author prefers or simply not specify it.
If we do not select an entity as translatable, we will not be allowed to translate it later from the interface.
Once we click on “Save configuration” we will save changes and we will be able to translate, in this case, content and custom blocks.
To check this, we will create “Basic page” type content and translate it into Spanish.
Always remember to create the entity (content, custom block, etc.) in the default language to avoid inconsistencies when translating later. You can view or change the default language in Configuration > Regional and Language > Languages.
In this case, the basic page has been created with the title “Corporative image”, with lorem ipsum content and above “English” to then be able to identify the translated content. The URL alias /corporate-image has also been created. URL aliases can also be translated; We will see later how. We will also check the “Promoted to front page” option in the “Promotion options” drop-down menu to position the content on the main page.
We must keep in mind that Drupal does not translate the content we generate for us, so we must translate it ourselves programmatically or by hand from the interface .Therefore, we will translate the content we just created. To do this, we simply have to go to Content and in the Operations drop-down menu click on “Translate”.
Next we can add and edit existing translations. In this case we want to add a translation for Spanish, so we will click on the “Add” button corresponding to the Spanish language.
Once the Spanish translation is finished in the title, body and URL alias, we will save the translation.
Translations will be enabled for all fields provided by the type of content in question. In the previous case, since it is a basic page, it only has a title and body.
With this we can now access both the original and translated content through the URL, looking like this:
- example.com/corporative-image
- example.com/es/corporate-image
But of course, accessing the content via URL is not the most effective. For this reason, Drupal 8 already provides us with a default block to switch from one language to another easily from the user interface. To position it, we must access Structure > Block layout and place the block “Language switcher” in the region, in this case, content.
This will position the block as follows:
In this way, if we access the content node in English (the original), by clicking on “Read more” or from the URL, we can access the translated content directly from the switcher that we have just positioned. Finally, it would be necessary to layout it and give it the corresponding style.
Conclusion
Drupal gives you the necessary tools and makes things easier for you to a certain extent. But it is important to plan the time invested when building a multilingual website. What is clear is that once carried out you will have a linguistically accessible page and therefore a greater influx of web traffic.
