» TYPO3 multi language | TYPO3 tips, tricks & tutorials

What are the exact steps to make your TYPO3 website multi language on a site with TemplaVoila. This little tutorial explains it all… what to put in typoscript, how to handle realurl and how you can get a language selector on each page. If you like it or miss something please comment on it

1. Install Static info tables

Download and install the extension static info tables in the extensionmanager. This adds some database info in TYPO3 with countries, languages, currencies etc. After installing, include static in your main typoscript template (see image under 8. Realurl and multilanguage). If you do not install this extension, the localisation tab in TemplaVoila will not appear.

Installing this extension takes a lot of time so if your PHP.ini has limited the maximum execution time on 30 seconds, you might get an error while installing. If you get this error you can try to add in the TYPO3 .htaccess file the line php_value max_execution_time 90 or higher. If this does not work contact your webhost.

2. Create website languages

Go via List and click on the image of the “globe” level, that is the very top of the page tree. (NOTE: this has changed in newer TYPO3 versions. The highest level has now a TYPO3 logo.) There create the wanted languages. Fill in language, iso code and flag. We use english as default in this example, no need to define that one. Pay attention to the id’s of the languages which you can see if you hover with the mouse over the symbol. Those id’s need to be used later in realurl.

3. Check if langdisable is in TemplaVoila data source

This code is normally in the datastructure of a templavoila template :

    <meta>
        <langDisable>1</langDisable>
    </meta>

You can verify that in the DS record of the templavoila template.

4. Define the languages in typoscript.

In the setup of the main typoscript template the following code has been put. In our example our default language is enlish and we included spanish, german, dutch, french and portuguese. The id’s have to be identic to the created weblanguages. The default language has uid 0.

config.linkVars = L
config.uniqueLinkVars = 1
config.sys_language_overlay = content_fallback
config.language = en
config.locale_all = en_EN
config.htmlTag_langKey = en-EN
config.sys_language_uid = 0
[browser = msie]
config.htmlTag_setParams = xmlns="http://www.w3.org/1999/xhtml" xmlns:v=”urn:schemas-microsoft-com:vml” xml:lang="en"

[globalVar = GP:L = 2]
config.language = es
config.locale_all = es_ES
config.htmlTag_langKey = es-ES
config.sys_language_uid = 2
[globalVar = GP:L = 2] && [browser = msie]
config.htmlTag_setParams = xmlns="http://www.w3.org/1999/xhtml" xmlns:v=”urn:schemas-microsoft-com:vml” xml:lang="es"

[globalVar = GP:L = 3]
config.language = de
config.locale_all = de_DE
config.htmlTag_langKey = de-DE
config.sys_language_uid = 3
[globalVar = GP:L = 3] && [browser = msie]
config.htmlTag_setParams = xmlns="http://www.w3.org/1999/xhtml" xmlns:v=”urn:schemas-microsoft-com:vml” xml:lang="de"

[globalVar = GP:L = 4]
config.language = nl
config.locale_all = nl_NL
config.htmlTag_langKey = nl-NL
config.sys_language_uid = 4
[globalVar = GP:L = 4] && [browser = msie]
config.htmlTag_setParams = xmlns="http://www.w3.org/1999/xhtml" xmlns:v=”urn:schemas-microsoft-com:vml” xml:lang="nl"

[globalVar = GP:L = 5]
config.language = fr
config.sys_language_uid = 5
config.locale_all = fr_FR
config.htmlTag_langKey = fr-FR
[globalVar = GP:L = 5] && [browser = msie]
config.htmlTag_setParams = xmlns="http://www.w3.org/1999/xhtml" xmlns:v=”urn:schemas-microsoft-com:vml” xml:lang="fr"

[globalVar = GP:L = 6]
config.language = pt
config.locale_all = pt_PT
config.htmlTag_langKey = pt-PT
config.sys_language_uid = 6
[globalVar = GP:L = 6] && [browser = msie]
config.htmlTag_setParams = xmlns="http://www.w3.org/1999/xhtml" xmlns:v=”urn:schemas-microsoft-com:vml” xml:lang="pt"
[global]

For exact explaination what this code does read the article Creating multilanguage sites with TemplaVoila or the Frontend Localization Guide. You can read here more about XHTML and language in TYPO3.

For now just copy it and adjust to your languages. Make sure you end with [global]. Without realurl installed your urls will now be something like www.yourwebsite.com/index.php?id=1&L=2 , where L=2 means that you get the Spanish version of the page.

5. Put the default language and flag in TSconfig

On your root page edit the page properties. Under Options include in TSConfig :

mod.SHARED.defaultLanguageLabel = English
mod.SHARED.defaultLanguageFlag = gb.gif

This sets the default language on english and uses the english flag in the backend.

6. Create new page translation and pagecontent

Click via Page on the page where you wish to create a new translation. There choose the localization view tab and create a new page translation.

After that you can fill in the pagetitle for that language.

When you create new pagecontent you now should be able to choose the language for that page.

7. Creating a language selector on the TYPO3 website

For the language selector I installed in the extension manager the extension sr_language_menu. No configuration is needed if your default language is english. If not change in constant editor the default language and country. For example for dutch :

plugin.tx_srlanguagemenu_pi1.defaultLanguageISOCode = NL
plugin.tx_srlanguagemenu_pi1.defaultCountryISOCode = NL

You can add this extension as as plugin on your pages via pagecontent or you could map it with TemplaVoila. I prefer to map it so it appears on each page. To do that create a sysfolder, call it elements or something. In the sysfolder create pagecontent and choose Language Selection. There you need to select the languages from the globe level and choose if you want a dropdown list or flags. Note that you do not need to add the default language here (english in this example).

In the TemplaVoila html template add for example

<div id="language-selector"><!-- languages --></div>

Go via List to the TemplaVoila storage folder, click on the TO icon before your template and than templavoila, modify DS/TO. Add a new data element language. Choose as mapping type Element and as Editing Type “typoscript object path”, fill in after update lib.language.

Update, click on map, choose as Mapping Window “mode: html source” and click on the the new created div. Than click SET and “save as” to overwrite the TemplaVoila template. Since this is not a TemplaVoila tutorial I do not go further into this, however these are pretty much the steps needed, so should be sufficient.

Now, in your typoscript template add the following under setup:

lib.language = RECORDS
lib.language.tables = tt_content
lib.language.source = 62

The number needs to correspond with the id of the pagecontent element. You can see the id by hovering with the mouse over the icon before the Language menu item under the folder elements as stated above.

When you’re set and done clear all cache.

If you now check on the frontend of your site the language selector should be visible and working. Note that on a certain page only the languages will appear in the selector for which you made a page translation.

Only thing to do now is putting it on the right place in the design by adding something like this in your CSS :

#language-selector {
      left: 500px;
      top:100px;
      position:absolute;
      z-index:10;
     }

8. Realurl and multilanguage

If you want nice url’s you may want to install the extension Realurl. After installing uncheck “Enable automatic configuration” in the extension manager at the realurl extension. In the main typoscript template the following code needs to be put under setup :

    tx_realurl_enable = 1
    baseURL = http://www.yourwebsite.com/
    simulateStaticDocuments = 0
    prefixLocalAnchors = all

Read here about the needed .htaccess file at the root of TYPO3 folder. This is absolute necessary.

Since I am lazy I use the nice pre configuration of the extension CB Realurl (cbrealurl). It includes configuration for some popular extensions like tt_news. (Else you need to create manually a realurl configuration and include it in the file localconf.php.)
Install cbrealurl in the extension manager and include static in your main typoscript template.

Now you need to alter the file realurl.php in the extension cbrealurl with your languages. Unfortunately this needs to be done in php instead of for example via the constant editor.

Click on the extension manager, click on “Cannonbose RealURL Configuration Helper” then choose edit files.

You see there the languages defined when you scroll down a little. Default are some other languages defined than you see in the image above.  In this example our default language is english and we included spanish, german, dutch, french and portuguese. The id’s have to be identic to the created web languages – explained under point 2.

In the url you now will get http://www.yourdomain.com/pageblabla/ for english and for the other languages it will become http://www.yourdomain.com/es/pageblabla/ ,  http://www.yourdomain.com/de/pageblabla/ etc.

If you do see the message “SAVING IS DISABLED” instead of the save button go to the install manager first, find in all configuration “[noEdit]” (use ctrl-F in Firefox to search),  uncheck it and than scroll down totally and click on “Write to localconf.php”.

I know it’s not a nice way to edit in the extensionmanager, however its quick and dirty. (You could also create a custom file where you overwrite the default configuration, since on line 664 of realurl.php it states $customFile   = ‘../../realurl-custom.php’; ).

Notes

• Note that on TYPO3 versions 4.2.2 and 4.2.3 there are problems at the moment of this writing with realurl and multilanguage. Description of the bug ” Wrong path for links to other language versions ” is found on the bugtracker.  On 4.2.1 and lower there are no problems. In the examples realurl 1.5.2 and cbrealurl 1.1.0 were used on TYPO3 4.2.1.
  Update 12/1/09 : it seems this problem is fixed in the core of TYPO3 4.2.4
  
• This tutorial is partly based on the article Creating multilanguage sites with TemplaVoila by Dmitry Dulepov.

Monday, December 15th, 2008 at 6:09 pm and is filed under TYPO3 extension configuration, TYPO3 general configuration. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.