Multi-Language Sites

Multi-Language Sites

This is a simple tutorial on how to make a multi-lingual site using DornCMS 1.3.

Language Codes

Starting in DornCMS 1.3, when a language code is present at the start of the url, the $language variable in php is set to the code. A language code consists of a 2-letter language abbreviation and an optional 2-letter country abbreviation. Below are some example of language codes and urls that would activate them. There is a list of possible language codes at http://msdn.microsoft.com/en-us/library/ms533052%28v=vs.85%29.aspx

  "en-us" - English, United States
  http://domain.com/en-us/home/
  $language = "en-us";

  "es" - Spanish
  http://domain.com/es/about_us/
  $language = "es";

  "fr-ca" - French, Canada
  http://domain.com/mysite/fr-ca/contact/
  $language = "fr-ca";

If no language code is present in the url, the $language variable is set to "en-us" by default.

Loading Different Content For Different Language Codes

Let's say you have an element in the home page called "welcome_message". You can create language-specific versions of this element that will automatically be loaded instead if the language codes match. Here are some examples:

   Elements present in homepage:
   "welcome_message"
   "welcome_message.fr-ca"

   http://domain.com/home/
   "welcome_message" loaded

   http://domain.com/fr-ca/home/
   "welcome_message.fr-ca" loaded

   http://domain.com/es/home/
   "welcome_message.es" doesn't exist
   "welcome_message" loaded

Right now, there is no way to do the same thing for entire pages. As a result, any language specific sections on a page must be included as an element.

Switching Languages

The default template included in the DornCMS 1.3 download has an example of letting the user switch between languages. I'll explain how it's done in the template and some alternative ways to do the same thing.

Images of Flags

This is the way it's done in the included template. Several flags are shown at the top of every page and when clicked, change the language in the url. The included flag icons in the /uploadedimages folder came from the famfamfam icon set at http://www.famfamfam.com/lab/icons/flags/ . Here is the HTML code for making these flag links. I'll explain what each part means afterwards.

  <a href="<?php echo $orig_siteroot . 'en-us/' . $current_path; ?>">
        <img src="<?php echo $site_root; ?>uploadedimages/us.png" />
  </a>
  <a href="<?php echo $orig_siteroot . 'fr-ca/' . $current_path; ?>">
        <img src="<?php echo $site_root; ?>uploadedimages/fr.png" />
  </a>

Here is a breakdown of the php variables used:

  "http://domain.com/mysite/fr-ca/home/"

  $site_root - holds the $site_root set in /server/server.php plus any language codes
  "/mysite/fr-ca/"

  $orig_siteroot - holds the original $site_root as set in /server/server.php with no language codes
  "/mysite/"

  $current_path - holds everything in the url after $site_root
  "home/"

As you can see, we are basically replacing the current language code with a different one for each link.

Drop Down List

This is another way to have the user select a language. The basic idea is the same, except that instead of showing image links, we are showing a drop down menu. Here is the code:

<select id="select_language">
    <option value='en-us'>US English</option>
    <option value='fr'>French</option>
</select>

<script type='text/javascript'>
//onClick event for options
function select_language() {
    window.location.href = "<?php echo $orig_siteroot; ?>" + $(this).attr('value') + "/<?php echo $current_path; ?>";
    return false;
}
//attach onClick function to options
$("#select_language option").click(select_language);
</script>

This method may be more useful if you have many languages to choose from or limited space.