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;        
}

Thomas Berscheid, 08.01.2020 14:19
^