​Language switching for translated pages

​Navigation elements are included with the function fx_page.translations. 

Parameters for fx_page.translations

  1. The actual page. This could be either the pixolino page object (available in the variable page) or a page slug (represented by a string).
  2. A boolean flag to indicate, whether the languages should be represented by an icon/flag (true) or by the ISO language code (false).
  3. The application context (available in the variable _context). This context is required and should not be changed.

Example of a language switcher call inside a template (with activated flag option)

{{ fx_page.translations(page, true, _context) }}

​Generated HTML

The language switcher component renders an unsorted list <ul>. Each translation is represented as a list element <li>. Each <li> contains a class fx_translation_ISOCODE and—if it represents the active page—class fx_act.

Inside the <li> the navigational link <a> is placed. If the <li> represents the active page, the <a> is replaced by a <span>.

If the component is configured to render icons (second parameter == true), the icon is represented by a <span class=fx_flag fx_flag_ISOCODE></span>. Otherwise (second parameter == false) the translation is represented by the ISOCODE string (uppercase).

Be aware that the language switcher component does not render a <nav> tag. You should place the navigation function always inside a <nav> tag within your template's code!

Example of generated HTML code (with activated flag option)

<ul class="fx_translations">
    <li class="fx_translation_DE fx_act"><span><span class="fx_flag fx_flag_DE"></span></span></li>
    <li class="fx_translation_EN"><a hreflang="EN" href="/english"><span class="fx_flag fx_flag_EN"></span></a></li>
    <li class="fx_translation_FR"><a hreflang="FR" href="/francais"><span class="fx_flag fx_flag_FR"></span></a></li>