MENU

Multilingual template for CMS Made Simple

  Previous article Next article  

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

 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!

 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.

 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}

Buy Me A Coffee


  Comment Form

ReviewManager

Click here to open the form

ReviewManager

  33 Comments

Buy Me A Coffee

CMS Made Simple - Tutorials, Tips and Tricks - CMSMS

Multilingual template for CMS Made Simple

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.1.6
  Last updated: 23-06-2018
  Comments: 33
  http://cms.ms/iC8A


Buy Me A Coffee




Advertisement


Ads help me to help you! Thanks!

Ads help me to help you! Buy products from these advertisers!