TYPO3: Sprachmenü auf Basis von Fluid

Mit Hilfe der VHS ViewHelper lassen sich in den eigenen Fluid-Templates einfache, aber auch komplexe Sprachmenüs erzeugen.

Dafür muss zunächst die Extension VHS: Fluid ViewHelpers installiert und aktiviert werden. Zusätzlich muss beim Einsatz der ViewHelper darauf geachtet werden, dass der entsprechende Namespace am Anfang der Datei deklariert wurde: {namespace v=FluidTYPO3\Vhs\ViewHelpers}

Ein einfaches Sprachmenü lässt sich dann mit folgendem Code erzeugen.

<v:page.languageMenu />

Dabei entsteht dieses einfache Listen-Konstrukt inklusive Länderflagge.

<ul>
	<li class="current first">
		<a href="/"><img src="typo3/sysext/core/Resources/Public/Icons/Flags/SVG/GB.svg" width="1200" height="600" alt="English" title="English">&nbsp;English</a>
	</li> 
	<li class="last">
		<a href="de/"><img src="typo3/sysext/core/Resources/Public/Icons/Flags/SVG/DE.svg" width="1000" height="600" alt="Deutsch" title="Deutsch">&nbsp;Deutsch</a>
	</li>
</ul>

Anpassungsmöglichkeiten

Es gibt zahlreiche Argumente, die man angeben kann, um das Sprachmenü anzupassen.

Diese sind zum Beispiel:

  • layout: Darstellung und Position von Flagge und Sprach-Label anpassen
    Mit layout="flag" wird nur die Flagge dargestellt, mit layout="name" entsprechend nur das Sprach-Label. Die Reihenfolge der Ausgabe kann man über layout="flag,name" bzw. layout="name,flag" steuern.
  • flagImageType und flagPath: Eigene Bilder für die Flaggen nutzen
  • labelOverwrite: Sprach-Labels anpassen, also z. B. labelOverwrite="de,en"
  • order: Zum Umsortieren der Sprachen
  • linkCurrent="false": Verhindert das Verlinken der aktuell ausgewählten Sprache.
  • tagName und tagNameChildren: Zum Anpassen der Tags für das Elternelement und die Kindelemente. In diesen Argumenten einen leeren String anzugeben klappt momentan nicht. Möchte man also kein Markup um die Links haben, muss man das Sprachmenü manuell zusammenbauen, was ich weiter unten im Artikel zeige.
  • hideNotTranslated: Übergibt man hier true, werden nur Sprachen aufgelistet, für die eine Übersetzung auf der aktuellen Seite existiert.

Die vollständige Liste der Argumente gibt es hier:
VHS LanguageMenuViewHelper

Eigenes Markup

Reichen die vorhandenen Optionen zum Anpassen nicht aus, kann man das Sprachmenü auch komplett selbst zusammenbauen.

<v:page.languageMenu hideNotTranslated="true" flagImageType="svg" flagPath="/fileadmin/templates/assets/img/flags/">
	<ul class="menu menu--language">
		<f:for each="{languageMenu}" as="language">
			<li class="menu__item">
				<a href="{language.url}" class="menu__link{f:if(condition:'{language.current} == 1',then:' menu__link--current')}">
					<span class="menu__label">{language.label}</span>
					<span class="menu__image"><img src="{language.flagSrc}" alt="{language.label}"></span>
				</a>
			</li>
		</f:for>
	</ul>
</v:page.languageMenu>

Sebastian Schrama

Sebastian fühlt sich als Frontend-Entwickler in großen Systemen Zuhause. Wohldosiert packt er zur rechten Zeit den Perfektionismus-Hammer aus.