Schlagwort-Archiv Extension

TYPO3-Extension responsive_template

Eine sich anpassende Website mit TYPO3.

Bei WordPress schon fast normal, bei TYPO3 allerdings nicht: Websites, die Ihre Darstellung der entsprechenden Browserbreite anpassen, und zwar von einer angemessen Größe auf großen Monitoren, bis hin zu kleinen Handydisplays hochkant.. Die Extension „responsive_template“ soll das können. Als jemand, der die letzten Jahre mit „TemplaVoila“ und „Templates für Templavoila“ eine große Routine entwickelt hat, eine kleine Herausforderung.

Die erste Herausforderung war allerdings, ein leeres TYPO3 zu installieren, denn die derzeit aktuelle Version 4.7.14 läuft erstmal nicht. Erst mit manuellem Patch der localconf konnte man überhaupt das Backend aktivieren, aber das ist ein anderes Thema.

Die Extension „responsive_template“ lässt sich dann direkt über den Extension-manager installieren. Nach dem Aktivieren ist dann eine Rootpage anzulegen, ein Template zu erzeugen und wiederum über den Extension-Manager das Install-Script auszuführen.

Anschließend braucht man erstmal einige Seiten, vorzugsweise teilweise mit Unterseiten, und einen SYS-Folder für Footer und Slider. Die Slider kann man wiederum in einen SYS-Folder unterbringen, für den Footer brucht man eine Seite, damit man Zugriff auf die Spalten hat.

Über den Konstanten-Editor in den Template-Tools kann man dann recht einfach die Anpassungen vornehmen. Als wichtigstes sind hier zunächst die Seiten einzutragen, die Footer und Slider beherbergen, auch können hier Logo und (ganz wichtig:) eine eigene CSS-Datei verlinkt werden. Die beiden letztgenannten bringt man sinnvoller Weise im Fileadmin unter, damit diese beim Nächsten Update nicht verloren gehen.

Eine der Stärken dieser Extension sind die mitgelieferten Seitenvorlagen und das Page-Setup. Hier ist sonst bei „normaler“ Erstellung einer Seite relativ viel Zeit, Vorarbeit und Fachwissen notwendig, nun kann man direkt nach dem Konstanten-Editor im Seitenbaum Seiten anlegen und selbigen die verschiedenen Vorlagen zuweisen. Für diese „Basics“ musste man nicht eine Zeile TYPOSCRIPT tippen oder html-templates vorbereiten – ein unschätzbarer Vorteil auch für Einsteiger.

Wenn man dann ein paar Seiten angelegt und mit etwas Text befüllt hat (die Extension „Lorem Ipsum“ hift), kann man sich mal im Frontend umsehen. Die Seiten präsentieren sich schlicht, farblich fast neutral und sehr aufgeräumt – was ich persönlich besser finde, als die Farborgien von TTV, bei denen man ersteinmal 5 KB CSS produzieren muss, um es farbneutral zu bekommen.

Das Logo wird immer im Retina-Modus angezeigt, der Slider kann ungepatcht nur Bilder crossfaden, beides linkt immer auf die Startseite, falls zu einem Sliderimage keine andere Page-ID angegeben wurde. Die Dokumentation ist … sagen wir mal „sehr knapp“, aber ist ja auch nicht für Laien gemacht. Allerdings ist sie so knapp, das man vieles nur nur durch Ausprobieren herausbekommt.

Die Responsive-Funktion checkt den zur Verfügung stehenden Platz beim Aufruf. Eine Größenänderung während man sich auf einer Seite befindet, ist nur für den Slider Wirkungslos, aber der Rest der Seite skaliert wie erwartet, und auch das Menu blendet ab einer bestimmten Größe von Dropdown auf Select-Feld. Es werden ungepatcht im Dropdown-Menü 4 und im Selector 2 Ebenen Navigationstiefe unterstützt, wobei dich letztgenanntes auf die Einrückung bezieht, die Seiten sind verlinkt, als wären sie in der 2. Ebene.
Die Extension liefert aber „nur ein Leeres Blatt“ – jegliche gestalterischen Aktionen müssen auf die Fähigkeit der Anpassungen abgestimmt werden.

Die Extension „responsive_template“ unterstützt auch mehrsprachige Seiten (schon von Hause aus 3). Sie läuft unter den Versionen 2.7 und 6.1 von TYPO3 (Stand heute).

Insgesamt eine runde Sache, die eine gute Grundlage bildet, um Seiten aufzubauen. Der Autor selber hat die Grenzen dieser Lösung gut erkannt, die aber auch TYPO3 setzt.
Eine Extension, die man im Auge behalten sollte, wenn man gern eine TYPO3 Seite haben möchte, die auch direkt auf mobilen Endgeräten genutzt werden kann. Die Alternative sind sind nicht-skalierende Layouts, die durch Doppeltap auf die entsprechende zoomen, oder eine Erkennung des Gerätes mit jeweils eigenen CSS-Dateien für das Layout. Alles 3 Varianten, die in der Praxis üblich sind.

Gute Arbeit „klaus_ger“ 🙂 Wenn eine Website damit produktiv online geht, werd ich es auch explizit erwähnen.