Mehrsprachige Seite mit Typo3 10.4

In den aktuellen Typo3-Versionen ist es relativ einfach geworden, eine Website mehrsprachig zu gestalten. Die Aktivierung der Mehrsprachigkeit besteht aus folgenden Schritten:

• Bereitstellen der Sprache(n) in Typo3
• Übersetzen der vorhandenen Seiten
• Erweitern des Templates um ein Sprachwechselmenü

Hier nun die Schritte etwas ausführlicher:

Flaggen bereitstellen

Will man das Menü mit Flaggen gestalten, so müssen die entsprechenden Grafikdateien zur Verfügung gestellt werden. Im vorliegenden Beispiel legen wir die Flaggen in das Verzeichnis fileadmin/user_uload/lang/ .

Die Dateien sollten für dieses Beispiel eine Breite von mindestens 25px und nach dem Muster flags-<Länderkürzel>.png benannt sein, also z.B. flags-de.png und flags-gb.png

Geeignete Dateien findet man im Verzeichnis /typo3/sysext/core/Resources/Public/Icons/Flags/ und muss sie nur noch passend umbenennen.

mkdir fileadmin/user_upload/lang/
cp typo3/sysext/core/Resources/Public/Icons/Flags/DE.png   fileadmin/user_upload/lang/flags-de.png
cp typo3/sysext/core/Resources/Public/Icons/Flags/GB.png   fileadmin/user_upload/lang/flags-gb.png

Hat man keinen Shell-Zugriff, so geht das natürlich auch über die Backend-Funktion Dateiliste. Dazu muss man sich die Flaggen herunterladen z.B. über https://typo3.org/typo3/sysext/core/Resources/Public/Icons/Flags/DE.png, die heruntergeladene Datei benennt man lokal um und lädt sie dann im Backend unter Dateiliste wieder hoch.

Diese Flaggen sind recht beschnitten, es macht also eventuell Sinn nach schöneren Dateien Ausschau zu halten. (z.B. https://www.welt-flaggen.de/ )

Sprache hinzufügen

Die neuen Sprachen müssen in Typo3 hinzugefügt werden.

Sprache in Seitenverwaltung aufnehmen und konfigurieren

Seiten übersetzen

Partial Sprachwechsel.html erstellen

Nun erstellen wir neu die Datei Sprachwechsel.html im Ordner /fileadmin/nettemplate/Resources/Private/Partials/ mit folgendem Inhalt:

<div id="flaggen">

<f:if condition="{languagenavigation}">
   
   <f:for each="{languagenavigation}" as="item">
          
       <f:if condition="{item.active}">
         <f:then>
           <img src ="/fileadmin/user_upload/lang/{item.flag}.png"  title ="{item.navigationTitle}" style="width: 25px;" />
         </f:then>
         <f:else>
            <a href="{item.link}" hreflang="{item.hreflang}" title="{item.title}">
               <img src ="/fileadmin/user_upload/lang/{item.flag}.png" title ="{item.navigationTitle}" style="width: 25px;" />
            </a>
                      
         </f:else>
       </f:if>
       
    </f:for>
</f:if>
</div>

Templates erweitern

Damit das Partial auch ausgeführt wird müssen wir es in alle Templates aufnehmen. Die Position entscheidet darüber, wo die Flaggen auftauchen. Die Zeile zum Aufruf lautet:

<f:render partial="sprachwechsel" arguments="{languagenavigation: languagenavigation}" />

Wichtig ist hier die Übergabe der Daten languagenavigation bzw. _all Alternativ also:

<f:render partial="sprachwechsel" arguments="{_all}" />

Typoscript setup.txt erweitern

Im letzten Schritt erweitern wir die Datei setup.txt um die folgenden Zeilen: ca. Zeile 85 vor } # Ende Page einfügen

#Sprachwechsel    
 10.dataProcessing {
    40 = TYPO3\CMS\Frontend\DataProcessing\LanguageMenuProcessor
    40 {
      languages = auto
      as = languagenavigation
    }
  }

Der LanguageMenuProzessor stellt dann das Array languagenavigation zur Verfügung, das für jede der aktivierten Sprachen einen Eintrag mit folgenden Elementen zur Verfügung stellt:

languageId => 1 (integer)
locale => 'en_US.UTF-8' (11 chars)
title => 'Englisch' (8 chars)
navigationTitle => 'Englisch' (8 chars)
twoLetterIsoCode => 'en' (2 chars)
hreflang => 'en-US' (5 chars)
direction => '' (0 chars)
flag => 'flags-gb' (8 chars)
link => '/en/start-page.html' (19 chars)
active => 0 (integer)
current => 0 (integer)
available => 1 (integer)

Ein Teil der Werte stammt aus der zuvor erstellten Konfiguration der Sprache. Leider gibt es keinen direkten Verweis auf die Flaggen-Datei, den muss man sich aus den Feldern flag oder twoLetterIsoCode selber zusammen bauen (s.o.).

Das Ergebnis

Wenn alles geklappt hat, dann ergibt sich das folgende Bild: