Hi Arno,

I have created a language drop down for Umbraco 8 that utilises:

• Bootstrap 4 - for styling/structuring the HTML
• This flag icon library: https://github.com/lipis/flag-icon-css
• XML resx files - To store translated names of countries for each of the cultures on my site
• A single partial view

It displays translated country names and flags. It will not show the current culture in the dropdown.

Step 1: Create the necessary XML files for each culture. On my site I have 3 cultures - German and English (GB) & English (US).

I have decided to use the culture code DE, GB, US for my routing so that urls will look like this:

www.mysite.com/de/page-name

www.mysite.com/gb/page-name

www.mysite.com/us/page-name

This means I will need to create 2 XML files for the cultures called: 'de.xml' & 'en.xml' (GB & US will share the same XML file)

The XML files should be structure like so (German example):

<xml>
<languages>
  <language type="aa">Afar</language>
  <language type="ab">Abchasisch</language>
  ...
  <language type="zza">Zaza</language>
</languages>
</xml>

The good news is that these files already exist! Go here and download the core.zip file.

Open the zip and navigate to common/main.

It is here that you will find xml files that we can use to display translated country names in the drop down. These XML files contain more information than we need so simply remove all tags bar 'xml', 'languages' and 'language'.

Store these files in the root of your project, I have saved them in the folder 'data/localisation'

Step 2 Create the partial view

Take a look at the following partial view

@inherits UmbracoViewPage
@using System.Globalization
@using System.Web
@using System.Xml

@functions{
  public static string Country(string code, string culture)
  {
    // Get the Two Letter ISO Language Name from passed in culture
    var locale = new CultureInfo(culture).TwoLetterISOLanguageName.ToLower();
    // Create a path to the cultures resx xml file
    var strLocalXmlFile = HttpContext.Current.Server.MapPath("/data/localisation/" + locale + ".xml");
    // Create a new XmlDocument
    var xdoc = new XmlDocument();
    // Load the stored XML file
    xdoc.Load(strLocalXmlFile);
    // Create a path to the language node
    var node = "//language[@type='" + code + "']";
    // Get the node
    var xn = xdoc.SelectSingleNode(node);
    // Return the value from the node
    return xn?.InnerText ?? string.Empty;
  }
}

@helper CurrentCultureMarkup()
{
  <span class="flag-icon [email protected]().Substring(3, 2)"></span>
  @Country(Model.GetCultureFromDomains().Substring(0, 2), Model.GetCultureFromDomains())
  @(Model.GetCultureFromDomains().Contains("US") ? "(US)" : "")
  @(Model.GetCultureFromDomains().Contains("GB") ? "(GB)" : "")
}

<li class="nav-item dropdown move-to-top" id="language-dropdown">
  @if (Model.Cultures.Count == 1)
  {
    <span class="nav-link">
      @CurrentCultureMarkup()
    </span>
  }
  else
  {
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      @CurrentCultureMarkup()
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      @foreach (var (culture, infos) in Model.Cultures)
      {
        var currentCulture = Model.GetCultureFromDomains();
        if (currentCulture.ToLower() != culture)
        {
          <a class="dropdown-item" href="@Model.Url(culture)">
            <span class="flag-icon [email protected](3, 2)"></span>
            @Country(infos.Culture.Substring(0, 2), Model.GetCultureFromDomains())
            @(infos.Culture.Contains("us") ? "(US)" : "")
            @(infos.Culture.Contains("gb") ? "(GB)" : "")
          </a>
        }
      }
    </div>
  }
</li>

This should help you get started and I'm sure that there are areas that could be improved. For example, it would be cool to hook up into a service that provided translated country names so that you didn't have to maintain a collection of XML docs!

Let me know how you get on :)

is working on a reply...