We made the entire site localized except the information that we have in the template in a static form. For example the footer has a phrase that we have to translate to every language that our web site supports.
An idea would be to make a property to the Document type but this is not a good idea because we will have to type the same text multiple times for every page that we create. If we have 100 Greek page and 100 English pages we will have to go to 200 pages and set this value.
In order to solve this problem we can use the Dictionary. The dictionary is a node in the Settings section which allows us to create a text and type the translation for each of the installed languages.
Let’s create a dictionary for our footer. We right click on the Dictionary node in order to display the dictionary commands.
We click the Create command and the Create dictionary form will appear on the screen.
We type the name Footer for our new dictionary and we click the Create button. The edit form for the Footer will appear on the screen.
There are two textareas one for each of the languages that we have added to the site. If we had more languages installed they would appear in this form.
There is also a node under the Dictionary node which will allow us later to select it in order to edit it.
Before we type the English and the Greek texts for the footer let’s try something else. We click on the Dictionary node and we will see a list of all the dictionaries created for the site.
The important thing here is that we can see a report of what has been translated and what has not translated yet. There are three columns. The first column contains the key name of the dictionary entry and after that we have one column for each of the languages that we have installed and they contain an exclamation mark which means that there is no translation for this dictionary entry.
We can click the Footer value in the first column in order to go and edit the dictionary values. We type only the English value for the Footer and we click the Save button in order to save it. Now we click again the Dictionary node so that we will see the list of dictionaries created for the site.
We can see that now there is a green tick in the English column which means that the English value has been typed. This is very useful when we have a lot of dictionary records in order to keep track of what has been translated and what has not. Let’s go back to the Footer dictionary and type the Greek text as well.
Now that we created the dictionary values, let’s go to the Page template in order to update it as well so that it will not contain the static text but it will get the values from the Dictionary list. We replace the static text with the following command.
@Umbraco.GetDictionaryValue("Footer")Now the entire template for our page is the following.
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = null;
var LanguagePage = CurrentPage.AncestorsOrSelf().Last();
string CurrentUrl = CurrentPage.Url;
string EnglishUrl = "/en" + CurrentUrl.Substring(3);
string GreekUrl = "/gr" + CurrentUrl.Substring(3);
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>@Umbraco.Field("title")</title>
<meta name="description" content="@Umbraco.Field("description")">
<meta name="keywords" content="@Umbraco.Field("keywords")">
<link href="/css/Stylesheet.css" rel="stylesheet" />
</head>
<body>
<div id="Container">
<div>
<nav id="Menu">
@foreach (var MenuItem in LanguagePage.Children.Where("Visible"))
{
<a href="@MenuItem.Url">@MenuItem.Name</a>
}
</nav>
<nav id="Lanugages">
<a href="@GreekUrl">Greek</a>
<a href="@EnglishUrl">English</a>
</nav>
</div>
<div id="Body">
@Umbraco.Field("pageText")
</div>
<div id="Footer">
@Umbraco.GetDictionaryValue("Footer")
</div>
</div>
</body>
</html>Now we can try to view the web site using the web browser and we have a Multilanguage site.
We have to mention that we can have a dictionary which will have child dictionary values. This is useful when we want to organize dictionaries to categories. Let’s see an example by creating a child dictionary inside the footer dictionary.
We expand the Dictionary node from the Settings section in order to see the Footer Dictionary entry.
We right click on the Footer Dictionary and the list of all the commands will appear on the screen.
We click on the Create command and the Create dictionary form will appear on the screen.
We type the name of the new dictionary in the Name textbox. For our example we type the name "Child" and we click the Create button. The new dictionary will appear on the screen as a child to the Footer node and we will be able to type the English and the Greek text for the new dictionary.
Now we can display the value of the new dictionary using the following code.
@Umbraco.GetDictionaryValue("Child")This means that we can display the contents of the child dictionary like all the other dictionaries in our web site.
