Internationalization (or simply i18n) is one of Drupal's most complex module suites. It covers many different multilingual needs - so, in order to make the most of it, you have to know what you're doing.
For the beginner Drupal user, building a multilingual site seems quite straightforward, but in fact it represents a challenging task. That's because each site is based on different multilingual demands.
For instance, have you got 100% of the content in different languages? If not, will your site display content in a default language as a fallback? Does your client adopt subdomains for each language? etc.
Those are interesting use cases.
However, this guide is intended for those who can install Drupal, yet still don't know their way around i18n. We'll cover the basic setup of a multilingual site: how to display some hypothetical content in more than one language, assuming only one language is seen at all times.
We'll use two languages, each with its own footer, menu, contact form... and content. We'll also see how to keep the same image across posts, and how to organize posts in views with different paths.
Remember: whenever you see example.com, replace it with your actual domain. ;)
In order to complete this tutorial, you must know how to:
- install a Drupal 7 website
- add modules
- create content
- customize menus
- create views
- rearrange blocks
- create custom blocks
- use the site-wide contact form
You can still read this guide if you don't know how to do one thing or another, but of course it'll impact what you can learn.
You'll need the latest version of each of the following modules. If there isn't a stable release, don't worry. It'll still work for the purpose of this tutorial.
- Chaos Tools
- Internationalization Views
- Localization update (l10n_update)
Optional, but handy
- Administration Language
- Administration Menu
- Demonstration site (Sandbox / Snapshot)
- Module Filter
Installing modules in Drupal 7
In case you're new to Drupal 7, you can now install modules easily by visiting example.com/admin/modules/install and entering in the textbox the address for the module you want.
For example, to install Views, go to http://drupal.org/project/views, scroll down and copy the address in the tar.gz or zip next to the appropriate version (for example, version 7.x-3.0-rc1 will have the address http://ftp.drupal.org/files/projects/views-7.x-3.0-rc1.tar.gz). Paste that link in the box and hit Install.
Note that not all web hosts support this feature; if that's your case, download and extract the module folder to example.com/sites/all/modules and you're good to go. :)
Access example.com/admin/modules and check the following modules under each group:
- Content translation
- Chaos tool suite
- Chaos tools
- Multilingual - Internationalization
- Block languages
- Contact translation
- Menu translation
- Multilingual content
- Multilingual select
- String translation
- Synchronize translations
- Taxonomy translation
- Translation sets
- Views translation
- Views UI
- Administration Language
- Administration menu
- Administration menu Toolbar style (uncheck Toolbar in Core)
- Demonstration site
- Module filter
Date and Time
Often an overlooked detail, date and time have different formats in each country. By default, Drupal uses the format mm/dd/yyyy (month with two digits, day with two digits and year with four digits). If that's not your case, access example.com/admin/config/regional/date-time and change the date and time format to suit your needs. Remember there's three formats: Long, Medium and Short.
Add your language
In order to have a multilingual site, you have to first tell Drupal which languages your site speaks. Go to example.com/admin/config/regional/language and add your language(s) by clicking on the Add language link.
Detect your language
Back to example.com/admin/config/regional/language, click on the Detection and selection tab, on the upper right corner. You'll be taken to example.com/admin/config/regional/language/configure.
There's a list of detection methods that your site uses to display content: URL, Session, User, Browser and Default. Your needs may vary, but a basic functionality is URL. This means that when the user accesses example.com/es, they'll see content in Spanish; example.com/fr shows content in French and so on. Check the box to the right of URL and click on Save settings. Now every time a user visits example.com, they'll get content in your site's default language; example.com/ followed by any language code will show content in that language code.
- Install the Localization update (l10n_update) module (see instructions)
- Update the translations for your languages -
Admin your language (optional)
Some people prefer the admin screens in one language, even though it isn't the site's default language. If that's your case, you need the Administration Language module (http://drupal.org/project/admin_language).
Enable it, then visit example.com/admin/config/regional/language. You'll notice there's two columns with radiobuttons: Default and Admin. Now you can set a language for the site and another one for the admin screens.
Node edit language
Isn't it odd that the admin screens are in one language and node edit screens in another?
If so, visit example.com/admin/config/regional/language/admin_language and click on all checkboxes. Now the admin screens will be entirely in the language of your choice: even node and user edit ones. You can also set it to any other language you prefer.
Please note that in some cases Drupal core or its modules aren't 100% translated from English.
Some sites leave content translation links close to the text, while others have only a block where users switch their language.
The default behavior for i18n is the former. If you'd like to change that, head over to example.com/admin/config/regional/i18n/node. In there, check Hide content translation links.
Next, you'll have to go to example.com/admin/structure/block and enable the block Language switcher (User interface text) by placing it somewhere in your theme's regions (header, footer, sidebars etc).
What if the content isn't translated?
That's easy. Visit example.com/admin/config/regional/i18n/node again and, under Default language for content types with Multilingual support disabled, choose Language neutral (Recommended).
This one is very useful when you have subtitled videos, for example. It doesn't matter which language the node is in, so just publish them as language neutral ;)
Don't worry, we'll see how to set multilingual options for content shortly, as well as how to publish content in any given language.
Now that you have set the basics, it's time for the juicier bits of this tutorial. We're going to learn how to tell Drupal our content is translatable; create nodes in different languages; and organize them in views.
First we'll set our content to be translatable. Head on to example.com/admin/structure/types/manage/page. Once there, scroll down to the vertical tabs and click on Publishing options. Under Multilingual support, select Enabled, with translation and click on Save content type.
Now create a test page. Notice how there's a language selection dropdown: choose one. Add a title and some text and click save.
(If you need some text to fill up the space, visit http://lipsum.com.)
Look at the tabs on your page. To the right of View and Edit, there's Translate.
Click on it and you'll see a table with different languages for your node.
Choose a language to translate to and click on add translation to the right, under the Operations column. Translate your content and click Save.
URLs without accents
Many languages have accents; but, in many cases, it's not good to have URLs with them. if you want to strip accents but keep letters intact, go to example.com/admin/config/search/path/settings and check Transliterate prior to creating alias.
Then resave your content, checking Automatic alias under URL path settings. This will turn example.com/es/mi-página into example.com/es/mi-pagina. ;)
Same pic, different post
For some content types, there's no need to create a whole new node from scratch. For example, sometimes you need the same picture even though it's in a different language.
If that's your case, access example.com/admin/structure/types/manage/article; scroll down to Publishing options and, under Multilingual support choose Enabled, with translation.
Click on Save content type, but go back there (example.com/admin/structure/types/manage/article). Under Synchronize translations, check Image and click on Save content type again.
Now post some articles with images. You'll see that their translations retain the respective pictures - unless you change them ;)
Views and internationalization
By now you're probably aware that you can create several kinds of content listings with Views. but how does that play out when your site speaks different languages?
Same view, different languages
A basic usage of views and i18n is when you need one page (for instance, Blog) in which nodes vary conformed to the language the user is in.
To do that, create a basic view for your articles. Add a single page display and give it the address example.com/blog. Then, add a filter. look for Content: Language. Add it.
Under Language, select Current user's language and click Apply.
Save your view and access it. Switch languages and the nodes will display accordingly.
Different view, different language
Now create another view for your articles' images. Name it Images and select fields as row style.
Use only your articles' titles and images. Give it the address example.com/images.
Don't forget to give it the same filter as before (Content translation: Language) but choose a specific language instead.
Add another page display and give it a title that means Images in another language (let's say "Imágenes" if you speak Spanish). Give it the address example.com/imagenes, for example. Its language filter will be different, of course, so override it and change the language.
Now you have two views which display the same content, but in different addresses and languages. You must set different menu items that point to each one. But when users switch language, they must see the corresponding view - with address, page and node titles all in one language. This means menu items which are a translation of each other. How? Read on.
As a finishing touch for this tutorial, we'll set different menu items, contact forms and footers.
In order to access the views created before, we'll add two menu items:
- One that points to the same place regardless of the users' language, switching content to suit: example.com/blog shows blog posts in English, example.com/es/blog shows posts in Spanish etc.
- Two that point to different views (Images or Imágenes), with different titles and content, one for each language.
So we'll really add three menu items, two of which are a translation of one another.
Head on to example.com/admin/structure/menu. Before we can create menu items in different languages, we must tell Drupal the menu itself is translatable. Click on the Edit menu link, to the right of Main menu.
Under Translation mode choose Translate and Localize and click Save.
To the right of Main menu, click on add link.
Give your link the title Blog and address example.com/blog. Click on Save. Repeat the process to create another link named Images which points to example.com/images - but, this time, under Language, select English.
Now edit the link Images. Click the Translate tab. To the right of your language, click on add translation.
Give it a different title and address and click Save. Now your menu is complete :)
Go to example.com/admin/structure/contact. You'll notice a Category named Website feedback. Click on Edit to the right.
On the following page, click on the Translate tab. Click on translate to the right of the untranslated language.
Under Category, change Website feedback to the proper translation (for example, in Spanish, type "Comentarios del sitio web"). Click on Save translation.
Repeat the above step for each of your contact form's untranslated categories. Now, whenever people visit your site, they have different contact forms whose messages can be sent to different emails.
But the title in the contact form isn't translated. For instance, in example.com/es/contact it isn't "Contacto". Now what? Easy: go to the Translate interface page in example.com/admin/config/regional/translate/translate. We'll find the right text string to translate.
Under String contains, type "Contact". There's some dropdowns here to help you refine your search; they'll save you a lot of time and effort. Select like so:
- Language: English (provided by Drupal)
- Search in: Only untranslated strings
- Limit search to: Built-in interface
Then click on Filter. You'll see Contact is the first result. Click on Edit to the right of it. Translate and save. Now visit your contact form in another language :)
What if I need to change the default language?
You may have a problem if you have changed the default language, for instance Drupal asking you to translate into English while the original is in English. In such a case, export the strings of this category: this creates an editable file on your local computer. In this file add the needed translations and then, from the web site, import the modified file.
In D7, you don't set a single footer like you used to. Instead, we'll create two different footer blocks, one for each language. Visit example.com/admin/structure/block/add to create the first one.
The first footer will be in English. Enter the following information:
- Block description: "English Footer"
- Block title: "<none>"
- Block body: "This is my footer"
Now scroll down to Visibility settings and click on Languages. Under Show this block for these languages, choose English. Click on Save block.
Repeat the steps above to create another footer for your language. Enable them on the footer area of your theme. Voilà!
Whew! If you came this far, you already know how to set some basic multilingual preferences in Drupal that should get you up to speed. But as Drupal goes, there's much more. And quite often, there's more than one solution. For example, you can try and translate that block you just created, instead of having one for each language. Give it a try! ;)