Sometimes a client has the need to deliver content in different languages from their website to increase traffic and have more visibility across the web.
Drupal has two main modules to implement translation of content in order to make a site multilingual.
One is Entity Translation and the other one is Content Translation.
- Works only for node
- Creates one node for each language
- Creates one menu item for each language
- Block translation is not easy
- Works with all entities
- Translates at field level so there is one entity with translated field
- Needs title module in order to work
- Block translation can be extended using Bean block
- One menu item for all languages
BrightLemon has successfully delivered two multilingual site:
www.blogs.msf.org - MSF blogs site with 4 languages.
www.uod.edu.sa - University of Dammam website with two languages which include a right to left (rtl) language.
In this tutorial I will explain how to create a multilingual site with Drupal 7 and Entity Translation and I will cover the following topics:
- Install and configure Locale adding new language, configuring Detection method and translate strings
- Install and configure Entity translation and its dependencies
- Translate nodes
- Translate taxonomy
- Translate Blocks
- Translate Menus
In order to create a multilingual site with Drupal 7 and Entity translation you will be required to install the following modules:
- Locale (Drupal core)
- Entity Translation
- Internationalization i18n
- Language switcher
Step 1: Install and configure core module Locale
Locale (core module):
’Adds language handling functionality and enables the translation of the user interface to languages other than English.”
This modules gives you the chance to add and configure languages, choose you language detection method, translate strings, import and export translated strings file (.po files).
Once it’s enabled, Language and Translate interface links will be added under Configuration > Regional and Language
Add a new language:
Under Configuration > Regional and language > Languages click on Add language
Select a language from the select list and click Add language
You now have two languages on your site: English and Italian.
For this tutorial I’m adding the prefix to the default language. This can be done by editing the default language, English in this case and add the prefix in the Path prefix language code field and press save.
Now we need to define which language will be used by Drupal to display page elements.
Click on Detection and Selection
You will now be presented with different options:
URL: Determine the language from the URL (Path prefix or domain).
Url detection can use one of the below options
- Path prefix: language code as first argument of the URL mysite.com/en/contact or mysite.com/it/contatti. (This option will be used for this tutorial).
- Domain: language code as if you wantlike en.mysite.com or it.mysite.com. You will need to create subdomains with this option.
Session: Determine the language from a request/session parameter.
Determine the language from a request/session parameter like mysite.com?language=en or mysite.com?language=it
User: Follow the user's language preference.
The user will be able set his language from his/her edit profile page.
Browser: Determine the language from the browser's language settings.
Default: Use the default site language (English).
Let’s configure URL and Browser for this tutorial
Click on configure in the URL row
Choose Path prefix and save configuration.
Go again in the Detection and Selection page, enable URL and Browser ticking the relevant checkbox, bring up Browser and place it under URL, and Save settings.
Now the website will define the language by checking the detection method we have enabled starting from the top:
URL path prefix
mysite.com/en will deliver content in English
mysite.com/it will deliver content in Italian.
Browser language: If the user hits mysite.com without adding any prefix Drupal will check the user’s browse language and redirect to mysite.com/en if my browser language is in English or mysites.com/it if my browser language is in Italian.
Default: If the user hit mysite.com without any prefix and the user’s browser language does not correspond to any language of your site, Drupal will use the default language and the user will be redirect to mysite.com/en.
If you want Drupal to check Browser language before URL, swap the order of the detection methods in Detection and Selection page.
Now you have two languages installed on your site, accessible from mysite.com/en for English and mysite.com/it for Italian, three detections method URL, Browser and Default.
It’s time to try it out in the next step.
Step 2: Translate Interface
Go to Configure > Regional and languages > Translate interface.
You will see an Overview of the status the translation. As you can see at the moment there is not translation for Italian, let’s add one manually.
Our homepage at the moment looks like this
I would like to translate “No front page content has been created yet.”
From the translate interface page, click on Translate
Here you can look for any text string that is on the site. For new string you create in code, remember to wrap it in a t() function.
Look for “No front page content has been created yet.” and click filter.
Now you have found the string and how you can see by the stroke on the Italian prefix that the string has not been translated. Click on Edit and translate it.
Provide the Italian translation and click on Save translations.
Now if I visit mysite.com/it I will see the translated text and If I go to the mysite.com/en I will see it in English.
Step 3: Import
You are also able to Import translated strings to the system from Import page. The file format will be .po . A list of ready translation may be found here https://localize.drupal.org/
Click on the language you are interested in.
download the po file related to your drupal version and the import it. Those files contains translation for basic installation drupal site.
Go to Configuration > Regional and language > Translate interface > Import, add the file in the Language file field input, import to the targeted language, choose the Text group (At the moment we have only Built-in interface) and choose the mode and click import. I will choose ‘Strings in the uploaded file replace existing ones, new ones are added. The plural format is updated.’ mode as I don’t want to keep the previous change I have done for the message in the homepage. If you want to keep your changes, choose ‘Existing strings and the plural format are kept, only new strings are added.’
After the import, Drupal speaks your new language! In this case, Italian.
From the Overview page under Configuration > Regional and Language you can now see the percentage of translated strings has risen to 99.18% and all menu items and text are now in Italian.
Also if we check the homepage, we can see that most of the text has been translated too and the message I’ve translated previously, has been replaced with the one provided by the .po file.
Step 4: Export
If you want to import strings from an environment to another one go to Go to Configuration > Regional and language > Translate interface > Export and under Export translation, select the language you want to export, textgroup and click export. This operation will create a .po file with all the translated strings.
Repeat the import operation in an other Drupal environment to get you translated strings.
You can also export a clean template for translation, this will give you a file with all strings from the Drupal locale database.
You can find more information about .po and .pot files at https://www.drupal.org/node/1814954