Nibble

Adding a language selector to your multilingual umbraco site

Create mutlilingual sites with umbraco, there are several approaches in doing this, the one I use the most is to have multiple ‘top level’ nodes (I’ll make a screencast of this in a future post). So for each language you would have a top level node.

The content tree would look like this:

languageselectorcontent

I would like to add a language selector on the site, a dropdown with all languages that will redirect to the selected langauge homepage. How to do this ?

languageselector

I’ll first add a new property to the top level node document type. This will store the text that is displayed in the dropdown.

languageselectordocumenttype

Next step is to create a new xslt file (with macro).

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE xsl:Stylesheet [ &lt;!ENTITY nbsp “&#x00A0;”> ]>
<xsl:stylesheet 
    version=”1.0″ 
    xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” 
    xmlns:msxml=”urn:schemas-microsoft-com:xslt”
    xmlns:umbraco.library=”urn:umbraco.library”
    exclude-result-prefixes=”msxml umbraco.library”>
 
 
<xsl:output method=”xml” omit-xml-declaration=”yes”/>
 
<xsl:param name=”currentPage”/>
 
 
            
 
<xsl:template match=”/”>
<form>
<select name=”langselection” onchange=”loadPage(this.form.elements[0])” target=”_parent._top” >
<option selected=”selected”>– Please select –</option>
 
  <xsl:for-each select=”$currentPage/ancestor::root/node”>
         
         <option value=”{umbraco.library:NiceUrl(@id)}”><xsl:value-of select=”data [@alias = ‘language’]”/></option>      
    
  </xsl:for-each>
</select>
</form>
 
</xsl:template>
 
</xsl:stylesheet>

This will output the html code for the dropdown. The most important part is the for-each loop, wich will loop all top level nodes, add the url of the top level node as a value of the dropdown option and add the content of the language property as the displayed text of the drop down option.

Now you can add the macro to your template, but you’ll also need to add a little javascript.

<script language=“JavaScript”>
 
function loadPage(list) {
 
  location.href=list.options[list.selectedIndex].value
 
}
 
</script>

14 Comments so far

  1. Ryan on April 15th, 2009

    Any chance you could extend this post to cover how to set up multilanguage sites using Umbraco (either 1:1 or multiple directories).

    There are NO good resources out there that cover this. The umbraco documentation is really poor. Looking at the Umbraco forum this is a common issue/problem in the umbraco community.

  2. vijay on December 30th, 2009

    Hi,

    Can u give me clear idea on how to implement Multi language site.
    if possible please send me any sample code how to display content in different languages…..

    vijay

  3. Great on February 22nd, 2010

    It work fine, thanks.

  4. Haroon on December 15th, 2010

    Umbraco documentation is really very poor. I m a .net developer but new to umbraco and I cant find any good help on how to set up multilingual applications with umbraco… If anyone knows any good site, plz refer me as I m not getting the starting point…

  5. umit kavala on January 6th, 2011

    hi, I have tried but dropdown shown empty. I have added new generic property and set these properties on root nodes for eng and arabic. but it didn’t work.
    could you please help me? I am doing something wrong?

  6. anthony on January 7th, 2011

    I had the same problem as Umit: empty dropdownlist. Could it be this line that is written for an older schema:

    greetings,

    Anthony

  7. anthony on January 7th, 2011

    I have tried it out, it’s indeed the schema:

    One has to change the above code to this:

    – Please select –

  8. Jhansi Nadella on May 23rd, 2011

    How to create login form in Umbraco pls help me

  9. Jhansi Nadella on May 23rd, 2011

    Can u give me clear idea on how to implement Multi language site.
    if possible please send me any sample code how to display content in different languages…..

  10. Jhansi Nadella on May 23rd, 2011

    Can u give me clear idea on how to implement Multi language site in Umbraco CMS.
    if possible please send me any sample code how to display content in different languages…..

  11. Alexey Shevchenko on September 5th, 2011

    I have same problem with some other users. Dropdown list is empty.

  12. Mike on January 16th, 2012

    Hi,

    I’ve almost the correction, replace the “for-each” by :

    but I’ve one element, one the current page only…

  13. Mike on January 16th, 2012

    Code here :

    — $currentPage/ancestor-or-self::* [@isDoc and @level=1] — in the select of for-each

  14. norton.com/setup on January 27th, 2017

    We have an umbraco installation with mixed languages in the backend. When I switch the language for my user to “English (United Kingdom)” or “English (USA)” I still see some german words in the backend, e.g. “Durchsuchen” instead of “Type to search…” in the search box or “Entwickler” instead of “Developer”, but not everywhere. As i cannot send picture or so can’t show you you screenshort.

Leave a Reply