Make Multi Lingual Site

From MODx Wiki

Jump to: navigation, search

Contents

A Multi-language site is a great way of expanding your userbase. Every CMS handles Multi-language pages differently. Since MODx doesn't come with this capability out-of-the-box, here's how to make your MODx website a multi-lingual website.

[edit]

Download Icons

This is an optional step. However, if you skip this step, you will need to change the $image variable in the "Languages" snippet below.

  1. Download a set of icons whose names correspond to a two-letter Country Code.
  2. For more information, see Resources at the end of this tutorial
[edit]

Create the snippets

[edit]

Redirect

Create a new snippet, call it "Redirect" and put the following code inside it: 

<?php
$url = $modx->makeUrl($id);
ob_end_clean(); // this will end the output buffer and discard silently what ever was in it
header('Location: '.$url);
?>
[edit]

Languages

Create another snippet called "Languages" with the following code: 

<?php
// get languages info
$tv = $modx->getTemplateVar('languages', "", $modx->documentIdentifier);
$languages = $tv['value'];
 
if (!strlen($languages))
{
  return "";
}
 
$langnames = array(
  "en" => "English",
  "de" => "Deutsch"
  );
 
$output = "";
 
// get entries in languages list
$entries = explode(",", $languages);
// loop through language entries
for ($e = 0; $e < count($entries); $e++)
{
  // seperate into lang code and target document id
  list($lang, $targetid) = explode("=", $entries[$e]);
  $image = '<img src="assets/images/'.$lang.'.gif" width="16" height="11" border="0" alt="'.$langnames[$lang].'" />';
  if (strlen($output))
  {
    $output .= ' ';
  }
  $output .= '<a href="'.$modx->makeUrl($targetid).'">'.$image.'</a>';
}
 
return $output;
?>

Edit the langnames array in the Languages snippet to list all the languages you will support. The first two letters are the ISO country codes and will match the flag icons (which also use the same codes). Make sure to enter the country name in the native language of that country (e.g. "Deutsch" instead of "German").

[edit]

Create the Template Variable

Next create a template variable called "languages", with the type "text". Associate this with all your template(s).

Edit your templates to call the Languages snippet with no parameters. Place it where you want the flags to appear. Users click on the flags to change the language.

[edit]

Setup document Tree

Create empty documents with names that match the ISO country codes. For example I created documents called "en" and "de" for an English/Deutsch website.

Add documents under the country code documents. I.e. you are duplicating your entire site each time, once per language. For example I have: 

start (1)
en
 |-> Welcome (2)
de
 |-> Willkommen (3)

For the "root" document, I.e. the one that shows by default (in my example it's "start" with ID 1), add the Redirect snippet: 

Redirect?id=`2`

so the page will redirect to one of the welcome pages. In my example the default language will be English. If I changed the ID in the redirect to 3 then the default language would be Deutsch.

For each page on your site you need to specify which is the translated page. This is achieved using the languages template variable. The format of the template variable value is:

two_letter_iso_country_code=document_id,two_letter_iso_country_code=document_id

Here are some examples: 

de=3

specifies that the Deutsch version of this page has the ID 3. 

en=2,pl=6,fr=7

specifies that the English version of this page has the ID 2, the Polish version of this page has the ID 6 and the French version of this page has the ID 7.

[edit]

Conclusion

That's it! The Languages snippet looks at the template variable for the current page and then uses the flag icons to build the links to the same page in different languages.

To add more languages:

  1. Duplicate all site pages in the new language
  2. Add the new flag icon to assets/images
  3. Add the new language to the array in the Languages snippet
  4. Edit existing pages to specify where the new translated page is, using the languages template variable

For a menu system, use the Wayfinder snippet with the following call: 

[!Wayfinder? &startId=`[[UltimateParent]]`!]

and each webpage always lists the menu from the top folder of each language..

[edit]

See also

[edit]

Resources

Retrieved from "http://wiki.modxcms.com/index.php/Make_Multi_Lingual_Site"
Personal tools