How to add a Language Switcher to a website

1. From the Content perspective, insert the Composite.Navigation.LanguageSwitcher function ( Insert > Function) on a page, or from the Layout perspective, add the following code to a template:
   Expand code

   <f:function name="Composite.Navigation.LanguageSwitcher" xmlns:f="http://www.composite.net/ns/function/1.0"> 
     <f:param name="Mode" value="HomePages" /> 
     <f:param name="ShowCurrent" value="True" /> 
     <f:param name="NavigationId" value="LanguageSwitcher" /> 
     <f:param name="Description" value="Switch to: " /> 
     <f:param name="Format" value="TwoLetterISOLanguageName" /> 
     <f:param name="IncludeQuery" value="True" /> 
   </f:function>

   
   
2. In the Mode parameter, select one of the menu modes for switching languages:
   • HomePages: always displays links to the home pages of all localized websites
   • TranslatedPages: only displays links to the current pages in other languages if translated; otherwise, shows no links
   • TranslatedOrHomePages: displays links to the current pages in other languages if translated; otherwise, shows links to the home pages.
3. Set up other optional parameters:
   • Show Current: Shows the link to the page in the currently selected language ("True", by default). Uncheck the option if you want otherwise.
   • NavigationId: The Id attribute of the <div> element used in the menu's HTML. By this ID, the menu can be accessed or referred to from style sheets and JavaScripts ("LanguageSwitcher", by default). For example,  if NavigationId = "LanguageSwitcher", the element will look like  <div id="LanguageSwitcher"> … </div>)
   • Description: The text will be displayed next to the menu links (blank, by default)
   • IncludeQuery: When 'True', the query parameters (e.g. "MyPage.aspx?Id=a3522d3c-45be-42df-b31f-ea508bc137ba") in the URL will be kept when switched to another language; otherwise ('False'), the query parameters will not be included in the URL (e.g. "MyPage.aspx"). 'True' by default.
4. Optionally, you can change the way the language switching menu is presented by setting the Formatparameter to one of the following values:
   • DisplayName: Gets the culture name in the format "<languagefull>" in the language of the localized version of .NET Framework.
   • EnglishName: Gets the culture name in the format "<languagefull>" in English.
   • Name: Gets the culture name in the format "<languagecode2>- <country/regioncode2>".
   • NativeName: Gets the culture name, consisting of the language.
   • ThreeLetterISOLanguageName: Gets the ISO 639-2 three-letter code for the language
   • ThreeLetterWindowsLanguageName: Gets the three-letter code for the language as defined in the WindowsPI.
   • TwoLetterISOLanguageName: Gets the ISO 639-1 two-letter code for the language of the current CultureInfo.
   • Image: Gets images representing the languages (flags) - see the Important note below
   • Empty: Empty

The default value is "TwoLetterISOLanguageName".

Important: To show images (flags) for languages, you also need to install the Composite.Navigation.LanguageSwitcher.Flags package.

Setting the Format parameter to "Empty" makes sense if you want to use your own means to present the languages, for example, your own images. This will require editing the stylesheet and using your own NavigationId.

For illustration, set the Format value to "Empty" and NavigationId to " LanguageSwitcherImage".
Expand code

<f:function name="Composite.Navigation.LanguageSwitcher" xmlns:f="http://www.composite.net/ns/function/1.0"> 
  <f:param name="Mode" value="HomePages" /> 
  <f:param name="NavigationId" value="LanguageSwitcherImage" /> 
  <f:param name="Format" value="Empty" /> 
</f:function>

This will produce the graphical menu (like the one made with the Format parameter set to "Image").

Customization

You can customize the layout by editing the style sheet (/Frontend/Composite/Navigation/LanguageSwitcher/Styles.css).