Multilingual template for CMS Made Simple

  Previous article Next article  

Multilingual template for CMS Made Simple

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.1.6
  Last updated: 21-01-2017
  Comments: 24

In this article I will try to give a description of my second approach to create a multilingual website with basic CMSMS functions.
You can find my previous method here at the CMSMS Tips & Tricks board
I tried to make this one as simple as possible, if you need it you can add other features yourself!

Explaining how to create a MLE-template really can't in 10 lines, so I have tried to make it as clear as possible. Don't be frightened by the size of the article and the amount of code. When you take a closer look at it, you will see the minor changes you have to make to let it all work.

  How to use

 1. Install pretty URL

First you have to enable pretty url at your website using mod_rewrite.
Read all about it in this tutorial

 2. Create a new blank Core::Page template

We need this for the landing page of the website to prevent warning messages in the admin log.
(Tip: you can also use it for dynamic sitemaps etc.)
In your Admin panel you go to Layout >> Design Manager, open the tab Templates and create a new Core::Page template with the only content:

Blank template
{content}

 3. Page structure

Makes your content pages in this structure:

  • 1. Landingpage [set as default page]
  • 2. Start [Important: set page alias in options tab to 'nl']
    • 2.1 Start [Set Internal Link to 2 ^ ]
    • 2.2 Page 1
    • 2.3 Page 2
  • 3. Accueil [Important: set page alias in options tab to 'fr']
    • 3.1 Accueil [Set Internal Link to 3 ^ ]
    • 3.2 Page 1
    • 3.3 Page 2
  • 4. Anfang [Important: set page alias in options tab to 'de']
    • 4.1 Anfang [Set Internal Link to 4 ^ ]
    • 4.2 Page 1
    • 4.3 Page 2
  • 5. Homepage [Important: set page alias in options tab to 'en']
    • 5.1 Homepage [Set Internal Link to 5 ^ ]
    • 5.2 Page 1
    • 5.3 Page 2

A2 Webhosting CMS Made Simple


 4. The landingpage

To redirect visitors to a homepage in their own language, you have to add two tags in the content block of your (1.) landingpage. It is better to turn off WYSIWYG...
Change in the options tab the template to "Blank template" that you just created.

{browser_lang accepted='de,en,fr,nl' default='en' assign='browser_lang'}
{redirect_page page=$browser_lang}

 5. GCB with country flags

Create a Global Content Blocks with code for showing the country flags and links.

flags
<div id="flags">
  {cms_selflink page='nl' image='uploads/template/nl.jpg' imageonly=1 alt='Nederlandstalige versie'}
  {cms_selflink page='fr' image='uploads/template/fr.jpg' imageonly=1 alt='Version Française'}
  {cms_selflink page='de' image='uploads/template/de.jpg' imageonly=1 alt='Deutschsprachige Version'}
  {cms_selflink page='en' image='uploads/template/en.jpg' imageonly=1 alt='English version'}
</div>

 6. GCB's for the footer

Create a Global Content Block for the footer code, one for each language

  • footer_nl
  • footer_fr
  • footer_de
  • footer_en

 7. GCB's for the sidebar

Create a Global Content Block for the sidebar code, one for each language

  • sidebar_nl
  • sidebar_fr
  • sidebar_de
  • sidebar_en
sidebar_nl
{Navigator start_element='2.1' show_root_siblings='1'}
sidebar_fr
{Navigator start_element='3.1' show_root_siblings='1'}
sidebar_de
{Navigator start_element='4.1' show_root_siblings='1'}
sidebar_en
{Navigator start_element='5.1' show_root_siblings='1'}

 8. Create a User Defined Tag: "get_root_page_alias"

This is important!

CMSMS has to know which language is connected to each page.
In this method I use the page_alias of the root pages for that!
I hereby use a UDT out of another blog post of mine: get_root_page_alias »
Create this User Defined Tag at your website!


A2 Webhosting CMS Made Simple



 9. Core::Page template

One small page template is enough! You're kidding? Noop. Amazing!!! :D
Note the difference between the quotes `, ' and " in the Smarty tags.

HTML-template
{strip}
   {process_pagedata}
   {$lang = "{get_root_page_alias}" scope=global}
{/strip}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang}">

<head>
   <title>{title} - {sitename}</title>
   {metadata}
   {cms_stylesheet}
</head>

<body>
   <div id="header"><h1>{cms_selflink page=$lang text='My website name'}</h1></div>    
   <div id="main">
      <div id="sidebar-right">{global_content name='flags'}</div>
      <div id="sidebar-left">{global_content name="sidebar_`$lang`"}</div>
      <div id="content">
         <h2>{title}</h2>
         {content}<br />
      </div>
      <div style="clear: both"></div>
   </div>
   <div id="footer">{global_content name="footer_`$lang`"}</div>
</body>
</html>

Well, that's all you need to do for a multilingual website with basic CMS Made Simple functions.
Now I will show you some optional extensions for the template.

 Optional extensions

 1. Error 404 page

When you have an error 404 page in the root of the website pages, it isn't a part of a language tree. Therefore the template misses a value for the $lang parameter and doesn't show all template parts.
To solve this, simply add in the top of the template, just behind the line {get_root_page_alias assign='lang'} the following line:

{if $lang == 'error404'}{$lang = "{browser_lang accepted='nl,fr,de,en' default='en'}" scope=global}{/if}

Where "error404" is the page alias of the error page.
With this line the browser language will be used for the page.


A2 Webhosting CMS Made Simple


 2. Global Language Strings

You can have language strings that automatically change with the language setting.
I will describe two possible methods! The first one is the easiest and can be used when you only have a few language strings. The second one needs an extra UDT and is very useful when you have many language strings. It is up to you what to use!

For both(!) methods you can use the multilingual language strings in your pages and templates like
{$languagestring.sitename} instead of {sitename}
The output will change depending on the language of the website page.


Method #1

Add to the top of your HTML-template, but under the line {$lang = "{get_root_page_alias}" scope=global}:

{global_content name="languagestrings_`$lang`"}

Create Global Content Blocks with WYSIWYG off:

languagestrings_nl
{* Global Languagestrings *}
{$langstring.sitename = 'Your site name in Dutch' scope=global}
{$langstring.youarehere = 'U bent hier' scope=global}
{$langstring.foo = 'bar' scope=global}
languagestrings_fr
{* Global Languagestrings *}
{$langstring.sitename = 'Your site name in French' scope=global}
{$langstring.youarehere = '...' scope=global}
{$langstring.foo = 'bar' scope=global}
languagestrings_de
{* Global Languagestrings *}
{$langstring.sitename = 'Your site name in German' scope=global}
{$langstring.youarehere = '...' scope=global}
{$langstring.foo = 'bar' scope=global}
languagestrings_en
{* Global Languagestrings *}
{$langstring.sitename = 'Your site name in English' scope=global}
{$langstring.youarehere = 'You are here' scope=global}
{$langstring.foo = 'bar' scope=global}

Method #2

For the second method we need a small User Defined Tag, create one in Extensions >> User Defined Tags named set_languagestrings.

set_languagestrings
$lang = isset($params['lang']) ? $params['lang'] : 'en';
$langstrings = $smarty->fetch('globalcontent:languagestrings_' . $lang );

$langstring = array();
$strings = preg_split('/((\r?\n)|(\r\n?))/' , $langstrings);
foreach ($strings as $string)
{
    $part = explode('|' , $string , 2);
    $langstring[$part[0]] = $part[1];
}

$smarty->assignGlobal('langstring',$langstring);

Add to the top of your HTML-template, but under the line {get_root_page_alias assign='lang'}:

{set_languagestrings lang=$lang}

For each language you need create a Global Content Block - with WYSIWYG off - like:

languagestrings_en
sitename|Your site name in English
youarehere|You are here
foo|bar
languagestrings_nl
sitename|Your site name in Dutch
youarehere|U bent hier
foo|bar

You can have as many lines as you need!!

 3. Breadcrumbs

If you need breadcrumbs at your website add the following tag in your template. You need to import the breadcrumbs.tpl menu template in the Menu Manager module Admin page in the database in order to change it and add the correct MLE language string for the "You are here" text.

{cms_breadcrumbs template='breadcrumbs' root=$lang}

A2 Webhosting CMS Made Simple

  Comments

  Click here to leave a comment






This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net)
  « Enter the CAPTCHA code (lower case)

Your IP address will be stored on submit. I reserve the right to change or delete your response without notice!
In case of abuse your IP address will be blocked!


Can I have your attention for a moment?

Did this tutorial help you solving a problem at your (clients) website and it saved you many hours of work? Great!!
Consider buying Rolf a cup of coffee in return! [ Click here ]


  24 Comments

CMS Made Simple 2.2.2 - Tutorials, tips and tricks - CMSMS 2.2.2

Multilingual template for CMS Made Simple

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.1.6
  Last updated: 21-01-2017
  Comments: 24

A2 Webhosting CMS Made Simple