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.

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

Create the snippets

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);
?>

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(
  "el" => "Ελληνικά",
  "en" => "English"
  );
 
$output = "";
 
// get entries in languages list
$entries = explode(",", $languages);
 
// loop through language entries
foreach ($entries as $entry)
{
  // seperate into lang code and target document id
  list($lang, $targetid) = explode("=", $entry);
  $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 Official ISO Language Codes. These sometimes match the flag icons (which use the ISO country codes). However, for languages such as Arabic or English which are not specific to a single country, the ISO language code should be used in preference to the country code. You may need to rename the flag icons to match. Make sure to enter the country name in the native language of that country (e.g. "Deutsch" instead of "German").

Create the Template Variable

Next create a template variable called "languages", with the type "text". Associate this with all your template(s). (In version Revolution in customisations of mapping of TV-parametre it is necessary to specify a default: for our example "en=2")

Edit your templates to call the Languages snippet with no parameters. Like so:

[[Languages]]

Place it where you want the flags to appear. Users click on the flags to change the language.

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 the 'Page Settings' of this page turn off 'Cacheable'. 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.

Alternative for more forgiving TV input format

Note that this will not work if there are spaces around the commas in the template variable values. If you need make the input format less strict — perhaps because the editor/client using the site does not always stick to that rule — here is a little workaround. In the "Languages" snippet, replace

// get entries in languages list
$entries = explode(",", $languages);

with the following:

// get entries in languages list
$entries = preg_split("/[\s,]+/", $languages);

This will allow for spaces around the commas, or even to only use spaces (as users often do when entering tags to blogs etc.). Example:

en=2, pl=6,fr=7 , de=9 es=13

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? &topLevel=`2`]]`!]

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

See also

Resources

Personal tools