Tutorials - Big bits of code to help you do more
Using Translatable to create a Simple Multilingual SiteTweet
9 April 2011 | | | Supports v2.4
I recently had a request to build a multilingual site for an accountant who wanted to enter content in English, Romanian and Russian, and wanted their site visitors to be able to switch languages by clicking on the image of the country flag - and I was pleasantly surprised to learn how quick and easy it is to implement using Silverstripe's Translatable class.
1. Set the default site locale
For me, I'm based in the UK, so my default local is en_GB, so in /mystie/_config.php, I added:
// Set the site locale i18n::set_locale('en_GB');
2. Enable Translations in Silverstripe (Translatable)
Add the following lines to the /mysite/_config.php file
//default translation Translatable::set_default_locale('en_GB'); /* restrict the language select dropdown in the admin to only those languages that you will actually use. In my case, UK English, Romanian and Russian */ Translatable::set_allowed_locales(array( 'en_GB', //UK English 'ro_RO', //Romanian 'ru_RU' //Russian ) );
3. Make your SiteTree and SiteConfig Translatable
SilverStripe needs to know which parts of our site we want to Translate so we tell it by adding the following to mysite/_config.php:
Object::add_extension('SiteTree', 'Translatable'); Object::add_extension('SiteConfig', 'Translatable'); // 2.4 or newer only
Now run /dev/build/ to rebuild the Database with the relevant translateable fields.
4. Add a simple language switcher to your template
Now that our site is translatable, we need to let users switch between languages so add this to your site template, (e.g. themes/yourtheme/templates/Page.ss):
<% if Translations %> <div id="lang" class="clear"> <ul class="clear"> <% control Translations %> <li> <a href="$Link" hreflang="$Locale.RFC1766" title="$Title - $Locale.Nice"> <img src="$ThemeDir/images/lang-<% sprintf(_t('IMAGE','%2.2s'),$Locale.RFC1766) %>.gif"> </a> </li> <% end_control %> </ul> </div> <% end_if %>
Incase you are wondering, RFC1766 is an ISO Language Identification Code Standard in which they have a "TAG" (not in the HTML/XML sense) for each language to identify what language is spoken and in what region. The language code list can be downloaded in CSV and Spreadsheet format here. However, Silverstripe uses underscores in the language code to seperate the language from the region in which it is spoken - and it also uses Uppercase letters for the region, so I have put together a simple Excel spreadsheet of Language codes available.
5. Add your flag images to the theme images folder,
Carefully following the naming convention used in the previous step add the flag images to themes/yourtheme/images.
In my case, I used the following image names:
lang-en.gif (UK flag for English language)
lang-ro.gif (Romanian flag)
lang-ru.gif (Russian flag)
Remember to flush your site template cache by adding /?flush=1 to the url.
6. Create your pages in the SiteTree.
To add content other languages, use the new 'Translations' tab in the admin and off you go!
7. (Optional) Make DataObjects Translatable
To make a DataObject translatable, you must add the following to your mysite/_config.php:
Don't forget to run a /dev/build to rebuild the database afterwards.
Please note: When creating dataobjects in other languages, there is currently a bug in translatable causing all dataobjects to be added to the database using the default locale rather than selected locale. In my case, I had to manually change the locales of the Romanian and Russian dataobjects in the database table from en_GB to en_RO and en_RU, respectively the very first time that I created the dataobject in a language other than the default.
That's all! Good luck with creating your multilingual site!
Special thanks go to Aram Balakjian for their contributions to this post.