How to setup a multilingual website with Drupal 7

Setting up a basic Drupal website in English is relatively easy. Setting up a multilingual website isn't as obvious as you would hope it to be. Knowing a thing or two about how and where to find help on drupal.org is a must. See References for more information. The present article does not address the topic of multilingual menus. Alright, let's do it.

  1. Starting with a fresh Drupal 7 install is the best way to avoid problems. That said, it is possible to transform a unilingual website into a multilingual one. Let's just say that it is beyond the scope of the current article.
  2. Activate the Locale and Content translation modules. Both come installed with Drupal 7.
  3. Download, install and activate the i18n and Variable modules (and all their submodules). The Variable module is new and required by i18n in D7. It provides a simple interface where you can designate system variables as Multilingual variables. In D6, you have to do it by hand in the settings.php file (See References block). More on the usefulness of the Variable module a little later.
  4. Go to the languages interface (admin/config/regional/language) and add a new language to the list. In this article, I'll be adding French.
  5. Now, add a Path prefix language code to each language. You can do this by clicking the language edit link (admin/config/regional/language/edit/en). In the current example, I've added "en" for English and "fr" for French. Note the warning: Modifying this value may break existing [node] URLs. I had created a couple of nodes prior to making this change and encountered many nagging problems related to bad links. Deleting and recreating all existing nodes solved all those problems. If you have many existing nodes, export them before deleting them. Then import them back. You can do this more easily with the Node export module (http://drupal.org/project/node_export). Also, make sure the option "Determine the language from the URL (Path prefix or domain)" is enabled at admin/config/regional/language/configure.
  6. Once this is done, go to the Drupal translation page (http://localize.drupal.org/) and download the translation package for the language you just added. In this article, French for Drupal core 7.x. Look for the Download link which appears to the right of Drupal core 7.x. If you hover over this link, you will see that is points to a file named drupal-7.x.fr.po. Download this file to your desktop.
  7. Go to admin/config/regional/translate and click on the Import tab. Import the translation package you've just downloaded into the desired language (drupal-7.x.fr.po into French for this article). You may need to import other project (module) packages (e.g. Views, Panels, etc.). But you can do that later.
  8. Go back to the Overview tab. Note the higher percentage for translated strings for the language you added.
  9. Next, we will activate the Language switcher block which will allow users to switch between languages. Go to admin/structure/block. Look for Language switcher and set the region (sidebar first in the present case). Click the Save blocks button at the bottom of the page. Goto your Home page and check that the block is showing. Clicking the different languages will switch the interface back and forth between them.
  10. The last step is to enable Multilingual support, with translation for each of the content type that you require. For the Article content type, go to admin/structure/types/manage/article and click on the Publishing options tab (the horizontal ones) and activate the Enabled, with translation radio button. Then click the Save content type button. Repeat for all content type that need a language specific translation.

That's it. Your website is multilingual ready. Now every time you create a new node (Article, Page, etc.), you'll have to specify which language it belongs to. Language neutral nodes will be displayed just the same for all languages. That's why this article appears in English as well as in French. Check it out. Cheers! p.s. I'm thinking screen captures would be nice, right? I'm also thinking about a screencast version. That would be cool...

Submitted by Neil (not verified) on Fri, 08/05/2011 - 16:44

Permalink

Ok so I followed these instructions religiously and I get a new tab i.e. View | Edit | Track | TRANSLATE. I get the other language link (in my case Francais) display at the end of the article which when clicked on did toggle between the translations the first time but no longer. I get the ability to position the Language Switcher in Blocks but it doesn't show in either admin or user.

To be honest I was hoping that I would simply get English and French radio buttons and a module would do the translation for me (as in Google Translate)

BTW. Perhaps Step 7 needs a little more explanation as the it is presented as page not a downloaded file and in Step 4 I believe you want to go to simply Configuration/Language.

Regards, Neil

Submitted by admin (not verified) on Fri, 08/05/2011 - 18:30

Permalink

Hello Neil,

If toggling between the source and its translation doesn't work, try deleting the translation and recreating it & keep a close eye on the paths. As for the Language Switcher block not showing somewhere or for someone, have a look at its Visibility settings (blocks admin page, under Configure) and make sure there are no restrictions.

I've revisited step 7 and added explanations. Let me know if it is still unclear. I'll also add more links in References block (top-right).

Cheers!

Submitted by guest (not verified) on Sat, 09/03/2011 - 10:33

Permalink

Hi,

i also had the problem with the invisible language switcher block. What helped me was to enable the URL detection method under administration > configuration > regional and languages > languages > detection and selection.

hope this heps

cheers

Submitted by admin (not verified) on Sat, 09/03/2011 - 11:12

Permalink

I've updated step 5 to reflect this.

Submitted by Boyan (not verified) on Fri, 09/16/2011 - 04:31

Permalink

Thanks for the great guide!

I've done this and everything is right, except that I have problems with setting my custom homepage to be multilingual. After I set in /admin/config/system/site-information the "Default front page" URL slug to be the one I want (which has the same URL slug for all three languages, just the language prefix differs), Drupal automatically chooses the "node"-type of this page's URL slug and thus I have just one language version of the homepage in all three languages.

Am I clear enough and can you help me here?

Submitted by Boyan (not verified) on Fri, 09/16/2011 - 04:40

Permalink

To make myself more clear: I have a page in three languages with the URL slugs as follows:
homepage.html (default bg language)
en/homepage.html
de/homepage.html

Then I want to make this my homepage, go to /admin/config/system/site-information and enter "Default front page" URL slug to be "homepage.html" . But, when I switch to the other 2 languages, the homepage language version doesn't change and in /admin/config/system/site-information I see that drupal has chosen the "node"-type of the URL slug for the other 2 languages

I'll be helpful if you know where is the problem.

Submitted by andy (not verified) on Wed, 11/02/2011 - 12:04

Permalink

A very good, easy to follow set up. Helped a lot to get me started.
Thanks

Submitted by Sucheta (not verified) on Wed, 12/14/2011 - 02:24

Permalink

As per your step 5, you have selected "Path prefix language code". Can we select "Determine the language from a request/session parameter" or "Follow the user's language preference" option to avoid the breaking of URL throughout the site?

Indeed, there are a number of detection methods available at admin/​config/​regional/​language/​configure. Note that the first detection method that gets a result will determine which language is used. In the context of the current tutorial, the URL method configured to Path prefix is appropriate. See References for more information.

I tried using the option for session and user preference but there is something may be I am missing. The switcher doesn't work properly at my end. Can you please guide me with this?

Submitted by claudine (not verified) on Mon, 08/05/2013 - 06:59

Permalink

Hi,

I have installed drupal 7 with 3 languages. English (set as default), Nederlands, Français. Each time I go to my localhost I see the english version (localhost/sitran). I do not want the english version to be seeing at all. I have English because it is easy to configure but I do not need the english language and certainly not as opningspage when you are going to the website. Can you help me with this?

Hello Claudine,

Language detection settings (admin/​config/​regional/​language/​configure) determine which language UI is presented to a visitor. For example, if you set path prefixes as the first detection method, then example.com/fr will automatically take any visitor to the French UI.

Now, what happens then when someone visits example.com ? There is no path prefix here. If there is another detection method such as Determine the language from the browser's language settings, and the visitor's browser is Dutch, then in your case, this visitor will go to example.com/nl. When all detection fail, the visitor will go to the default site language. And in your case, that will be English.

If you don't need English for visitors, then perhaps you should set the default language to French or Dutch. WARNING - it is not recommended to change the default language after you have created content because it will mess up translations.

Thank you very much for your quick and clear reply! But I have some more questions:

[Re: paragraph #1] Ok, but is this also when you are hosting two different sites on 1 wampserver?

[Re: paragraph #3] Yes I know, that is what happened, I had a mess with my translations and that is why I did choose for going back to the default English.

To solve my problem, I have made a CCK calling front page (only used for making the front page) where the visitors of example.com can choose to continue in French or Dutch. But I'm looking now for not showing the title of the page node and the read more button at the end.

And I want to do this with css. I placed this code in the global.css:

#node-frontpage-52.h2.node-title {
display: none;
}

But it does not work, any idea? I tried a lot of other combinations.

I know this has nothing to do with multilingual, but perhaps you can give me a good hint to do this. Many thanks in advance!

Submitted by admin (not verified) on Sun, 08/18/2013 - 18:48

Permalink

I'm not sure I understand your question which refers to [paragraph #1]. For a possible solution to [paragraph #2] question, see the 2nd comment (/comment/6#comment-6).

As for CSS for hiding the node title, if you send me an email with the URL of your website (use the contact form), perhaps I can help you then.

I finally have found how to hide the title and the read more button in the omega theme on the frontpage with css. At the global.css in my theme I have put this code:

/* hide the title on frontpage*/
article[id="node-frontpage-52"] h2.node-title {
display: none;
}
/* hide the readmore botton frontpagina*/
article[id="node-frontpage-52"] li.node-readmore {
display: none;
}

I can not send an url of my website because I'm still developping local on my pc.

With the first question I mentionned that I will put 2 sites under one www at my apache wampserver. So under www you will have ccff and sitran. And when people go to the website http://myservername/​mywebsitename (=sitran in my case), they will be forwarded to http://myservername/​sitran and they will see the page that correspond with the nl frontpage or do I misunderstood? And for someone who is French, they will arrive immediately on the french page?

Your explanation is really great and clear, very glad to meet someone who is answering my questions

Submitted by Roberto Garcia… (not verified) on Tue, 08/06/2013 - 14:42

Permalink

Thanks for this great explanation.
I think this is enough and no screenshot will be necesary.

Submitted by Stephan (not verified) on Sun, 09/08/2013 - 10:34

Permalink

Hi there, first of all let me say that your guide is excellent!

A little help though. How can I change the language of content articles on nodes that were created before I enabled the multilingual options?

Currently they are set to "Language neutral" and I can't find a way to edit this...

Hi Stephan, before you can set an article to a specific language, you must first enable Multilingual support: Enabled, with translation for that content type at admin/structure/types/manage/article. You will find this option in the vertical tab Publishing options. When this is done, a language selection drop down menu will appear on the node/edit form of each article.

Submitted by admin (not verified) on Mon, 09/09/2013 - 12:53

Permalink

Simply go to admin/​structure/​types/​manage/​article/​display and hide the language field.

Submitted by Mayank (not verified) on Wed, 03/19/2014 - 04:18

Permalink

Thanks for such easy and quick luring tutorial.. and valuable comments..

this help me allot...