Connect

Tutorial: Getting started with localization and translation in Drupal 7, by example

I'm beginning to build a Drupal-powered web site for a customer. A goal for this project is to provide translation of pages, events, and announcements for Spanish-speaking site visitors. Although Google's Translation service is great, automated translation tools remain less than perfect. Fortunately, the customer has several dedicated bilingual volunteers who will translate as much of the site's content as possible.

In this post, I'll walk you through the steps to configure a Drupal 7 site so that it may be translated to other languages.

It's Not Just Translation

If you're new to building multilingual web sites, I recommend reading the Wikipedia entries on internationalization and localization. Building a multilingual web site involves much more than translating content from one language to another. Translation must be done with an awareness of a language's idioms as spoken within a geographic region. If you're a native English speaker in the United States you probably know that "a lift" means something quite different to the English. Idiomatic differences also exist in Spanish spoken in Mexico, Latin America, South America, and, of course, Spain. Localizing translations is one of the biggest challenges for machine translation and the primary reason we chose to manually translate our content rather than slapping the Google Translation Widget on our pages.

Localization, Translation, and Drupal

Localizing and translating a web site is a complicated task, but Drupal does a remarkably good job of simplifying the process. If you're interested in the technical details and decisions that went into how Drupal supports internationalization, have a look at Gabor Hojtsy's series, "Drupal 7's new multilingual systems compilation."

Karen Stevenson wrote a wonderful article, "Localized and Multi-Lingual Content in Drupal 7", which summarizes Gabor's series. In her article, Karen discusses the two site components requiring translation, the interface and the site's content. Text in Drupal's interface, including the login form and navigation menu, has already been translated into many of the world's languages which saves you, I, and the rest of the Drupal community a ton of time.

Karen also breaks down the two content translation options available in Drupal 7, full-node translation and entity translation, which is new in Drupal 7. After some consideration, I decided that entity translation was the best choice for the site I'm building. So, with this introductory information in mind, here are the steps I used to configure multilingual support in a Drupal 7 site.

1.0 Define Languages and Translate the Interface

The foundation for multilingual support in Drupal 7 is the Locale module which ships with the default distribution. Enable locale, then define the languages your site will support. In this article, I'll be using Drush to install and enable modules. If you're new to Drush, have a look at my introductory article, or download and enable modules through Drupal's administration interface.

Check one or more methods to detect the language to display (I enabled all, although I won't use all initially)

Save the settings

You can rearrange the priority of detection methods, set which part of the URL to use in detection (es.mysite.com vs. mysite.com/es/), and set a request/session variable name to use to switch languages.

1.2 Load an Interface Language Translation

If you're localizing for one of the predefined languages listed on the Add Language form, most, if not all, interface translation work has already been done for you. Most of the core Drupal interface, including default menus and blocks, has already been translated by the Drupal community. All you need to do is download a translation file and load it.

Be sure the "Import into" menu selection corresponds to the imported file.

Choose whether to replace existing string translations, or just import new ones. Yes, this means that if a translated string isn't appropriate for your site, you can override imported values. Just be careful not to overwrite your changes when updating translations.

Click Import.

Once complete, you'll be shown an import results showing how many strings were updated and added. You'll also see the percentage of the translation complete for that language. Since it's one of the most spoken languages on the planet, Spanish is a well maintained Drupal interface translation which is typically at 100% complete.

You may now visit your site and append the language code (http://mysite.com/es) to the URL to see the fruits of your labor, so far. Next, let's enable content translation.

2.0 Enable Content Translation

As Karen points out in her article, content translation in Drupal 7 can now be configured at the node or field levels. She notes the debate among Drupal developers about the merits of each method. For this site, since I'm new to developing multilingual sites, I've decided to follow Karen's recommendation and use the newer field translation model.

Since the translation debate was not settled before Drupal 7 shipped, field translation is not part of core. I'll need to install several contributed modules to enable field translation.

Now give it a try. You'll now see a Translation tab next to the standard View and Edit node tabs.

On this tab you'll now see an "add translation" link next to each language you've enabled. Clicking this will display a slightly altered add/edit node form to create a translated version of the original. The translation form will contain the original languages values for reference during translation.

The translation form provides controls to set published state, whether the translation requires an update, and a translated URL alias.

After saving the translation, click on it's title in the translation list to view it. We're almost there. We still need to translate the site's title, slogan, and main menu. We also need to provide a way for visitors to switch languages.

3.0 Switching Between Languages

Next, let's provide a language switcher for users. The Locale module provides a simple block with enabled languages listed. If your site's translated to several languages, this list will take up a lot of real estate. The Language Dropdown module converts the language switcher list to an attractive dropdown menu.

You should now see a fully-functional language switcher menu like this. If you'd like, you can also download and install the Language Icons module which will add flags for each language in the menu.

4.0 Menu Item, Block, Variable, and Contact Form Translation

What about translating menu items and blocks? Let's not forget about the site's name, slogan, and contact form. To tackle these tasks, you'll need the i18n module and the slew of module's it, and it's sub-modules, depend upon.

Under "Multilingual options", set the Translation mode to "Translate and Localize"

Save the menu

Edit a menu item from the "List Links" tab

Select the "Translate" tab

Translate the item and save

Repeat for each menu item.

Note that translation of the Home tab requires that it's default language be changed to English. Once this is done, a translation for the Home tab may be added. You'll see both "Home" and the translated version of Home on menu lists, but only the tab appropriate for a selected language will be displayed to end-users.

Translate Site Variables

The Internationalization module, along with the Variables module, provide support for translating site variable values. These include, but are not limited to, site name, slogan

Enable Block Translation

When i18n_menu was enabled above, i18n_block was automatically enabled which, as the name suggests, provides support for block translation. Just create or edit a block and set which languages it can translated to.

You may receive the following error when attempting to translate blocks:

"The string blocks:block:1:body for textgroup blocks is not allowed for translation because of its text format."

If you've enabled node comments, you'll need to consider how you want to display comments made in various languages. Have a look at the Filter comments per language section of the Comment settings tab.