Provides multilingual pages for Radiant. A multilingual page has one slug for every language. Use slugs like about-us-en, about-us-de or about-us, ueber-uns and translate away using <r:translate en="Welcome" de="Willkommen" /> and <r:if_language lang="en"><p>Some english text</p></r:if_language>.
This extension is different from the “Language Redirect” extension. “Language Redirect” expects you to replicate your page tree for every language you use. “Multilingual Pages” allows you to define multiple language versions within one single page.
Special feature for non-multilingual pages: if you use the multilingual tags in layouts or global snippets, you might want to language-enable non-multilingual pages (blog articles, etc.) as well. Just add /lang-<your lang> to your regular urls and the tags work as if you had called a slug in <your lang>. This is also the preferred way of operation for your home page: simply use /lang-<your lang> instead of /.
Good to know: this extension is cache-safe.
Has been developed with Radiant 0.8
To install Multilingual Pages, run:
./script/extension install multilingual_pages
You can use multilingual tags everywhere throughout your site, not only on multilingual pages. This is specifically useful for layouts and general snippets. For now, there are three tags: <r:translate />, <r:if_language>...</r:if_language>, and <r:language_selection>...</r:language_selection>. Use them like so:
<r:translate en="Welcome" de="Willkommen" />
<r:if_language lang="en"><p>This is an english paragraph.</p></r:if_language> <r:if_language lang="de"><p>Dies ist ein Absatz auf deutsch.</p></r:if_language>
<r:meta:language />
<r:language_selection> <r:current> ... <r:language /> ...</r:current> <r:available> ... <r:url /> ... <r:title /> ... <r:language /> ... </r:available> <r:unavailable> ... <r:language /> ... </r:unavailable> <r:between> ... </r:between> </r:language_selection>
More help on tags is available within Radiant using the “Available Tags” reference.
The main feature of this extension are multilingual slugs. A multilingual page can have one or more multilingual slugs. Define them right below the title field of your page like so:
en=our-staff;de=unsere-mitarbeiter;fr=nos-employes
This will add three additional slugs resulting in three new ways to call your page: /home, /startseite, and /acceuil. Please note, that your original slug (as defined in the meta section of the page) works as well. It is recommended to not mention the english slug in the multilingual slugs again, even though it would not break anything.
Of course, the multilingual slugs work on multiple levels. You can have multiple nested Mulilingual Pages and they all can have their own multilingual slugs. The Multilingual Pages Extension makes sure you can reach your pages just the way you would with regular Pages. Please note: you can’t combine slugs of different languages here. Stuff like
http://domain.com/company/mitarbeiter/le-directeur
does not make sense and will render a 404. These would work, however:
http://domain.com/company/staff/the-ceo http://domain.com/firma/mitarbeiter/der-geschaeftsfuehrer http://domain.com/entreprise/employes/le-directeur
There are pages which can’t get multilingual slugs. One of them is the home page (see below), but also pages which come with other extensions won’t support the multilingual slugs. This isn’t that much of a problem, as there are two ways to cope with this:
Let’s say you have a blog using the Archive Extension and you want to offer that in multiple languages.
As noted above: it’s not very elegant, but works. You would just create one Archive page for each supported language and create blog articles in each language. This way, you could also have different articles in different languages. The downside of this solution: multilingual tags in your layout or general snippets will render/expand in english (or whatever your default language is). You would have to use a different layout and snippets for the replicated pages.
This is suitable for cases where you’re okay with the fact that some of your content is not translated. Maybe, you don’t have the staff to write your blog in all supported languages. However, you want the multilingual tags in your layout and general snippets. This case is supported using a route suffix which comes with Multilingual Pages. Just add /lang-<your lang> (e.g. /lang-de for german) to any url and the multilingual tags in your page will render/expand in the <your lang> language.
Technically, you can combine solutions #1 and #2. You could also use multilingual tags in your blog articles when you use the route suffixes, you just won’t have urls in your language then.
The home page somehow is a special beast. The problem is: it doesn’t really have a slug. The slug of your home page is /. How do you translate that? Bummer. Route suffixes to the rescue! Just use /lang-<your lang> (e.g. /lang-de) instead of / to access your home page in your preferred language.
The good news: links on your multilingual pages will automatically look for a slug on the target page that matches the current language. Thus, stuff like
<r:children:each> <r:link/> </r:children:each>
will just work as expected.
The bad news: this does not work with the <r:navigation>...</r:navigation> tag, as it wants you to explicitly specify the urls you’d like to link to. Something like
<r:navigation urls="Products: /products | Blog: /blog | Locations: /locations | About us: /about-us"> <r:normal><li><a href="<r:url />"><r:title /></a></li></r:normal> <r:here><li><a class="active" href="<r:url />"><r:title /></a></li></r:here> <r:selected><li><a class="active" href="<r:url />"><r:title /></a></li></r:selected> </r:navigation>
would have to become:
<r:if_language lang="en">
<r:navigation urls="Products: /products | Blog: /blog | Locations: /locations | About us: /about-us">
<r:normal><li><a href="<r:url />"><r:title /></a></li></r:normal>
<r:here><li><a class="active" href="<r:url />"><r:title /></a></li></r:here>
<r:selected><li><a class="active" href="<r:url />"><r:title /></a></li></r:selected>
</r:navigation>
</r:if_language>
<r:if_language lang="de">
<r:navigation urls="Produkte: /produkte | Blog: /blog/lang-de | Filialen: /filialen | Über uns: /ueber-uns">
<r:normal><li><a href="<r:url />"><r:title /></a></li></r:normal>
<r:here><li><a class="active" href="<r:url />"><r:title /></a></li></r:here>
<r:selected><li><a class="active" href="<r:url />"><r:title /></a></li></r:selected>
</r:navigation>
</r:if_language>
That’s not the prettiest thing in the World but it works. Please note, that we made use of the route suffix for the blog here as described above.
Of course, you want those nice little flags on your web site as soon as you have Multilingual Pages in place, don’t you? Well, look no further, here comes <r:language_selection>...</r:language_selection>. It behaves similar to Radiant’s <r:navigation>...</r:navigation> so it should be easy to understand and implement. Here are two examples, one for flags (yay, flags!) and one for a select box.
<r:language_selection>
<r:current>
<img src="/images/flags/<r:language />.png" />
</r:current>
<r:available>
<a href="<r:url />" title="<r:title />"><img src="/images/flags/<r:language />-inactive.png" /></a>
</r:available>
<r:unavailable>
<img src="/images/flags/<r:language />-strikethrough.png" />
</r:unavailable>
<r:between> </r:between>
</r:language_selection>
(You can get very nice flag icons for free from www.famfamfam.com/lab/icons/silk.)
<select onchange="location.href=this.value;">
<r:language_selection>
<r:current>
<option selected="selected" value="<r:url />"><r:language_name /></option>
</r:current>
<r:available>
<option value="<r:url />"><r:language_name /></option>
</r:available>
<r:unavailable>
<option disabled="disabled" value="<r:url />"><r:language_name /></option>
</r:unavailable>
</r:language_selection>
</select>
Alright, language selection is great, but you want your first time users to see the right page according to their Accept-Language headers, don’t you? Perfect, because that’s what Mulilingual Pages does out of the box. If the home page is accessed using the basic slug /, language detection will redirect the user to the right language version using the route suffix.
If that’s not what you like, you can always disable this feature by setting the multilingual.use_language_detection config option to false.
For various reasons (SEO being one), it is good practice to include a <meta /> tag on every page revealing the current language the page is written in. Just add <r:meta:language /> to the <head /> section of your layout and you’re done.
Configuration options are stored in Radiant’s config table and are prefixed with multilingual., so they should be easy to spot. The following options are available:
-
non_multilingual_route: The first part of the route suffix which is used for non-multilingual pages. Can be set to''(the empty string) in order to just append the two-character language code to non-multilingual routes. But beware: if you have slugs with only two characters, you might get in trouble and you’d better setnon_multilingual_routeto something likelang-. (Default:lang-) -
default_language: The default language that is used when nothing else is found. (Default:en) -
meta_part_name: The name of the page parts that are added to multilingual pages and which are used to specify multilingual meta information like title, breadcrumbs, etc. (Default:multilingual meta) -
available_languages: A comma separated list of available languages throughout your site, used for<r:language_selection>...</r:language_selection>and other things. Every time you add a multilingual slug to a multilingual page, its two character language code is automatically appended to this list for you. If you remove a language version, you’d have to remove it from this list as well, in order for it to disappear form language selection menus. You can also re-order the languages here, language selection will follow the order of this list. (Default:enand evolving with your multilingual slugs) -
use_language_detection: Use this switch to turn language detection (see above) on or off. (Default:true)
0.5
MIT
-
The language detection feature borrows concept and code from the Language Redirect extension, wiki.github.com/radiant/radiant/language-redirect-extension
-
The list of languages is taken from Wikipedia, en.wikipedia.org/wiki/List_of_ISO_639-1_codes
-
Jan Schulz-Hofen
If you contribute, go ahead and add your name to the list!