Sprachmenu TYPO3: TypoScript Language Selector

Sprache wechseln über Textlinks oder Länderflaggen

Was zeichnet ein gutes CMS (Content Management System) aus? Ein CMS verfügt über die Möglichkeit, zwischen mehreren Sprachen zu wechseln. Diese Umschaltung sollte einfach konfigurierbar sein, wozu die Einrichtung von Unterverzeichnissen gehört. Zudem sollte es Möglichkeiten geben, mit einfachen Mitteln zwischen Inhalten der gleichen Seite in unterschiedlichen Sprachen zu wechseln. All dies stellt TYPO3 bereit.

Zuvor sollte man die Sprachen einrichten. Erfahren Sie   in diesem Kapitel mehr über die Konfiguration der Sprachen in TYPO3.

Als Standard in TypoScript gibt es zwei Möglichkeiten, zwischen unterschiedlichen Sprachen umzuschalten:

  • Ein Sprachmenu mit frei definierbaren Texten
  • Ein Umschalter mit Länderflaggen als Schaltflächen.

Auf dieser Seite schildern wir Ihnen zwei Beispiele für solch einen Language Selector.

Language Selector als Special Menu

Beiden Varianten des Language Selectors ist gemein, dass es sich bei ihnen in TypoScript um ein special Menu handelt. Das besondere bei diesen Menus: Man legt zuallererst ein NO Menu an, das man nicht verlinkt. Dies klingt merkwürdig, erklärt sich aber im weiteren Verlauf. Denn in der Folge werden über die Zustände ACT, USERDEF1 und USERDEF2 die entsprechenden Zustände für aktuelle und verfügbare Sprachen zu einer Seite gesetzt. Der Standard als nicht verlinkter Text bzw. Flagge hingegen wird im Falle einer nicht vorhandenen Sprache nicht verlinkt.

Language Menu als Text Variante

Hier die Variante mit Text:

 lib.language_text = COA
lib.language_text {
    20 = HMENU
    20 {
        special = language
        special.value = 0,1
        special.normalWhenNoLanguage = 0
            
        1 = TMENU
        1 {
            noBlur = 1
            NO = 1
            NO {
                doNotLinkIt = 1
                stdWrap.override =  deutsch  ||  englisch
                stdWrap {
                    typolink {
                        parameter.data = page:uid
                        additionalParams = &L=0 || &L=1
                        ATagParams = hreflang="de-DE" || hreflang="en-GB"
                        ATagParams = class="bread_link_small"
                        addQueryString = 1
                        addQueryString.exclude = L,id
                        addQueryString.method = GET
                    }
                }
            }
            ACT < .NO
            ACT.linkWrap = |
            ACT.stdWrap.typolink.ATagParams = class="bread_link_small active"
            USERDEF1 < .NO
            USERDEF1 {
                linkWrap = |
                stdWrap.typolink >
            }
            USERDEF2 < .ACT
            USERDEF2 {
                linkWrap = |
                stdWrap.typolink >
            }
        }
    }
    wrap = |
}

Sprachmenu mit Länderflaggen

In dieser Variante findet die Umschaltung der Sprachen über Länderflaggen statt.

 lib.language_image = HMENU
lib.language_image {
    special = language
    special.value = 0,1
    special.normalWhenNoLanguage = 0
    1 = GMENU
    1 {
        NO {
            doNotLinkIt = 1
            XY = [5.w], [5.h]
            ATagParams = class="img-language link"
            5 = IMAGE
            5 {
                file = fileadmin/img/flags/DE.png || fileadmin/img/flags/GB.png
                file.width = 30c
                file.height = 25
                border = 0
                offset = 0
            }
        }
        ACT < .NO
        ACT = 1
        ACT.ATagParams = class="img-language active"
        USERDEF1 < .NO
        USERDEF1 = 1
        USERDEF1.noLink = 1
        
        USERDEF2 < .USERDEF1
    }
}

Gegenüber dem Beispiel aus der TYPO3 Dokumentation werden die Flaggen hier einfach nur als Bilder generiert. Die graphische Auszeichnung der Flaggen für die Zustände aktuelle Sprache, mögliche Sprache und nicht übersetzte Sprache geschieht über CSS Klassen.

CSS für Language Selector mit Flaggen

Über ein CSS lassen sich nun die drei verschiedenen Modi der Anzeige steuern. Hier ist der Language Selector in eine Bootstrap Col mit einer CSS Klasse nav-language eingebunden. Über Rahmen und Deckungskraft kann man nun die Anzeige steuern.

 .nav-language img {
    outline: 3px #ddd solid;
    margin-left: 10px;
    opacity: 0.5;
}
.img-language.active img {
    outline: 3px #C31DC4 solid;
    opacity: 1.0;        
}
.img-language.link img {
    outline: 3px #F9A6F9 solid;
    opacity: 0.7;        
}

Language Selection Menu mit Fluid Templates ab TYPO3 10.4

Ein Spachmenu in TYPO3 konnte man bislang nicht nur mit TypoScript programmieren, sondern auch mit dem VHS Viewhelper. Seit der Version 10.4 von TYPO3 ist es möglich, ein Language Selection Menu direkt aus dem TYPO3 Kernel zu erstellen und dabei die Vorteile der Templating Engine der Fluid Templates zu nutzen. Wir zeigen Ihnen an dieser Stelle einige Beispiele dazu.

TypoScript Setup für Language Selector in TYPO3 10.4

Um Fluid Templates für den Language Selector nutzen zu können, müssen wir das TypoScript unserer TYPO3 Webseite erweitern. Dazu nutzen wir den Data Processor:

 page {
   10.dataProcessing {
      40 = TYPO3\CMS\Frontend\DataProcessing\LanguageMenuProcessor
      40 {
          languages = 0, 1, 2, 3
          as = languagenavigation
      }
   }
}

Hier gehen wir von vier Sprachen aus, die wir in unserem TYPO3 Projekt konfiguriert haben. Das Objekt languagenavigation können wir im nächsten Schritt in unserem Fluid Template für einen Sprachumschalter aufnehmen.

Language Selector mit Fluid Template ab TYPO3 10.4

Auf Basis der oben gezeigten TypoScript Konfiguration können wir nun ein Sprachmenu mit Hilfe eines Fluid Templates aufbauen, ohne auf eine Extension zurückgreifen zu müssen. Hier ist der Source Code für einen grundlegenden Aufbau eines Language Selector mit Hilfe von Fluid Templates in TYPO3 ab 10.4:

 <f:for each="{languagenavigation}" as="item">
  <f:if condition="{item.available}">
    <f:then>
      <a href="{item.link}" hreflang="{item.hreflang}" title="{item.title}">
        {item.navigationTitle}
      </a>
    </f:then>
    <f:else>
      <span>{item.navigationTitle}</span>
    </f:else>
  </f:if>
</f:for>

IBK Wiki: Language Selector mit TypoScript und Fluid

TYPO3 bietet mehrere Möglichkeiten, einen Language Selector in eine Webseite einzubinden. Im Wiki der Agentur IBK finden Sie mehr Source Code für TypoScript und Fluid Templates, z. B. den automatischen Einbau von Länderflaggen für die Sprachauswahl.

 Sprache der Webseite umschalten - Language Selection Menu

 Language Selection Menu - Sprachumschalter mit Fluid