How To Create A Multi Language Website Within Umbraco Only Using One Home Node

In this tutorial, you will learn how to create a multi-language website within Umbraco... all within a single home node.  If you read most other Umbraco multi-language tutorials (including this one) most of the recommendations will be to create a homepage for each language.  

In this approach, if you needed to support 25 languages, you would have 25 different websites within your Umbraco tree.  The obvious downside of this approach is that for content editors, there is a lot of maintenance.  They have lots of content to maintain.  Some clients may only need a partial multi-language website, where most of the content is still in English and bits and bobs are in the native language.  

If you need to build a website where creating hundreds of sub-websites seems like overkill then another approach you can take is to install the Vorto package.

What Is Vorto?

Vorto is an Umbraco package that can be installed via Nuget.  Vorto allows you to create multi-language properties.  When you add a Vorto wrapped property onto a document type, content editors are presented within a language toggle.  Content editors can then add different content for different languages, as seen below.

To get going with Vorto you need to have added some languages to your website.  If you are not sure how to do this, read either this article or this one.   Install Vorto over Nuget:

Adding Vorto To A Document Type

To create a Vorto property, within the Umbraco backend, go to Settings -> Document Types.  Find the document type you want to edit and select it.

Click on add properties, then select 'Vorto'.  

Pick the data-type you want to wrap, give it a name and job done.  

Rendering Your Vorto Property With Model Builder

Next, you will need to render your property within your view.  When I build a website, I like to adhere to good software engineering practices.  On all my builds I use strongly-typed models, using model builder.  I also always architecture my websites following good MVC good practices, e.g. keep as much logic out my views as possible.  Let's say we've created a Vorto property and generated a model using Model builder. The outputted property code will look like this:

		[ImplementPropertyType("content")]
		public Our.Umbraco.Vorto.Models.VortoValue Content
		{
			get { return this.GetPropertyValue<Our.Umbraco.Vorto.Models.VortoValue>("content"); }
		}

If you inspect the VortoValue you will notice that it's a collection.  This means you cannot render it directly, so you will need to iterate through the collection, find the corresponding locale and then render the value.  My assumption is you use controller and view models within your architecture (read here why).  Within your view model, you can then add a property like this: You can do this using:

    public class MultiLanguageBlockViewModel
    {
        public MultiLanguageBlockViewModel(IPublishedContent content)
        {
            MultiLanguageBlock = new MultiLanguageBlock(content);
        }

        public MultiLanguageBlock MultiLanguageBlock { get; }

        public string Content
        {
            get
            {
                foreach (var item in MultiLanguageBlock.Content.Values)
                {
                    if (Thread.CurrentThread.CurrentCulture.Name == item.Key)
                    {
                        return item.Value.ToString();
                    }
                }

                return string.Empty;
            }
        }
    }

In your view you can then render it like:

	
@{
    var multiLanguageBlockViewModel = new MultiLanguageBlockViewModel(Model);
}

@multiLanguageBlockViewModel.Content

Hopefully, that should be enough to get you going. As I'm hoping you can see, when you want to create a multi-language website within Umbraco, you do not need to create hundreds of subsites. Depending on your requirement, you can create a single site and then add multi-language content via Vorto properties. Enjoy!

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top