1. Følg med
  2. Blog
  3. 2014
  • Publisert
  • 2 min

Adding flag icons for language branches in EPiServer 7

Flag icons are a nice visual aid for editors working on multilingual sites. Adding flags for new language branches in EPiServer 7 is easy.

Av Arild Henrichsen

Default language flags

Several places in the UI, language branches are represented by flag icons.
Out-of-the-box, EPiServer 7 supports over 370 languages, but only comes with a handful of flag icons:

Australian English (en-au), Danish (da), German (de), English (en), UK English (en-gb), New Zealand English (en-nz), US English (en-us), South African English (en-za), Spanish (es), Finnish (fi), French (fr), Hindi (in), Dutch (nl), Belgian Dutch (nl-be), Norwegian (no), Brazilian Portugese (pt-br), Saudi-Arabian (sa), and Swedish (se).

In a plain vanilla Alloy installation, most of these will be enabled by default.
EPiServer default flag icons


Flags for common languages


Add language branches the usual way:

Go into Admin > Config > Manage Website Languages, and pick e.g. "Nederlands" from the list.
Tick enabled to activate the language branch.
Add  ~/app_themes/default/images/flags/nl.gif  in the "template icon" field.
Note:
  • If the /flags folder contains a flag icon file that matches the language code you added, the flag should automatically appear in the System icon column
    (if it doesn't appear at first, try accessing the file URL directly in the browser to update the cache). 
  • If you specified a path in the "template icon" field for the language branch, the flag should also appear in the Template icon column.
Manage website languages and flags in EPiServer


The Languages gadget should now also show the correct flag:

Flags in Languages gadget

 

Adding new flags

If you add a language branch that EPiServer does not have a flag icon for, you can easily add your own icon.

The flag icons are located in your site's appdata folder, typically C:\mysite\appdata\Modules\CMS\App_Themes\Default\Images\Flags\
The flag URLs are by default /App_Themes/Default/Images/flags/(language-code).gif

Tip: Sites like www.softicons.com have lots of flag icons in the same style as those supplied by EPiServer - just make sure the ones you grab allow commercial usage.
Flag icons should be 16x16, with the actual flag occupying 16x11 (the rest is transparent space).

A note about the Languages gadget

 
The Languages gadget doesn't automatically retrieve the correct flag just by having the flag icon present in the /flags folder.
For some reason it gets the flag icon URL from the "template icon" field - so if you left it blank, the Languages gadget will show a "missing flag" icon.

Under the hood


In the database, language branches are found in tblLanguageBranch.
Each language branch added gets a row with the language code, language name, and icon url (which is called SystemIconPath).
Note that the SystemIconPath field is kind of misleading, since the value stored here actually comes from what you entered in the "Template icon" field for the language branch.