If you want to have a globally successful website, at some stage you will need to display your pages in multiple languages… also known as a multi-lingual website. Multi-lingual websites are pretty common nowadays so we shouldn’t have to re-invent the wheel in order to provide this functionality. Luckily, out-of-the-box Umbraco makes setting everything up very quick and painless.
In today’s guide, I’m going to cover a very basic multi-language website with two languages. There are several ways you can create a multi-language website; today, I’m going to cover a method where we create a separate home page for each language branch that you can implement.
Creating A Second Language
In the Umbraco backend, go to the ‘Settings’ section, and click on the ‘Languages’ node. In here we can create a new language, for this tutorial, I am going to create a French variant.
From the create screen, I selected French-France. The next step is to create a French homepage.
Hostnames, Sub Folders and Sub Domains Explained
In a single language website, you will have one homepage. When we implement a multi-language website we will need to have multiple home pages, one for each language we want to implement. As we have two homepages you will also need to think how you want your websites URL’s to look. You basically have two options available to you, sub-domain, or, subdirectories. A sub-domain would look something like, uk.website.com. In IIS you would set-up a host header and the hostname will be used to point a visitor to the UK site. The fr.website.com sub-domain will direct a visitor to the french version. I’ve always found this approach to be a bit fiddly and not as good for SEO, instead the alternative approach is to use sub-directories, like www.website.com/uk/ and www.website.com/fr/
In case you have never set-up a host in Umbraco before, I’ll quickly cover it. In the Umbraco backend, go to the content section, right click on the homepage and select ‘Culture And Hostname’
In the domain field you then map your IIS domain.
Creating Multiple Homepages
Now it’s time to create the second homepage. Under the content root, select properties and hit create and create a new homepage.. Before you start it is probably worthwhile checking that you can create a new homepage under the content route. So in the Umbraco back-end, go to the settings section -> Document Types -> Homepage (or whatever your homepage document type is called). In here make sure the ‘Allow At Root’ is ticked:
This french homepage will be the basis for a new language branch. In case you haven’t guessed.. you will have to create a whole new duplicate tree for each new language you create. In a later guide, I will show you how to hook into the Save Event to make this process a lot easier.
Normally, I would call my new homepage something like.. ‘French Homepage’.. original I know 🙂 After you add your French content you can save the page. Now in the content section content tree, if you select the french homepages properties and select the ‘Culture and Hostnames’ options again, we can now add in a hostname and a language for the new page.
As mentioned above, in this tutorial, I’m using a sub-folder approach as it’s quicker and easier. So the French domain www.website.com, would become www.website.com/fr/.
If you have set everything up correctly and saved and published everything, if you try and view your french web page you should see the french version displaying. In my example it looks like this:
So now you know the basics of setting up a multi-lingual website, what data-types and settings you need and how to configure everything… we still have the one big dilemma to discuss… how do you implement multi-lingual values for things like placeholders and labels.
In most .Net sites, you would normally use a resource file, but this file is not easily editable by the content editor. Instead, Umbraco provides us with a Dictionary type. The dictionary type is very different from the C# dictionary. The C# dictionary is a key/value pair. In Umbraco, a dictionary is a key, multi-value pair. After you set-up multiple languages and create a new dictionary, you can add different values for each country as seen below:
To create a dictionary, all you need to do is in the Umbraco backend, go to the settings section and click ‘Dictionary’, right click on ‘Dictionary’ and hit ‘Create’
Lastly, all we need to do is display the Dictionary. To do that we use this handy snippet
In today’s guide, we’ve covered how to create a multi-language site in Umbraco. Luckily, the majority of it can be done without having to do any coding at all. To create a new language, in settings we enable a new language, we create a new separate home page for that language under root and set the ‘Culture and Hostname’ settings to use the new language and add a hostname to a subfolder.
For any of the annoying little template bits of text that would usually go in a resource file in a vanilla MVC build, we use an Umbraco dictionary data type.