Um Fluid Powered TYPO3 Templates (auch Flux genannt) zu nutzen benötigt man ein paar Plugins und eine sogenannte Provider-Extension. Wie dies funktioniert, wird sehr ausführlich im YouTube-Video von Naderio erläutert:
Da es in dem Video etwas durcheinander ging und mit Startschwierigkeiten verbunden war, möchte ich hier kurz die Informationen nochmals sammeln.
Benötigte TYPO3-Plugins
- Dynamic Fluid FlexForms (Extensionkey: flux)
GitHub: https://github.com/FluidTYPO3/flux.git - Fluidpages
GitHub: https://github.com/FluidTYPO3/fluidpages.git - Builder: FluidTYPO3 Development Support (Extensionkey: builder)
GItHub: https://github.com/FluidTYPO3/builder.git - Fluid ViewHelpers (Extensionkey: vhs)
GitHub: https://github.com/FluidTYPO3/vhs.git - Fluid Content (Extensionkey: fluidcontent)
GitHub: https://github.com/FluidTYPO3/fluidcontent.git
Aktuell scheinen einige der verfügbaren Plugins über das TYPO3-Extension-Repository noch veraltet zu sein, sodass es zu Problemen kommen kann. Empfehlenswert ist es daher, die aktuelle Entwicklerversion der Extensions aus GitHub zu laden:
github.com/FluidTYPO3
Aus dem TYPO3-Verzeichnis typo3conf/ext führt ihr also folgende Befehle aus:
|
1 2 3 4 5 |
git clone https://github.com/FluidTYPO3/vhs.git git clone https://github.com/FluidTYPO3/fluidcontent.git git clone https://github.com/FluidTYPO3/fluidpages.git git clone https://github.com/FluidTYPO3/flux.git git clone https://github.com/FluidTYPO3/builder.git |
Im Anschluss könnt ihr dann die Extension über das TYPO3-Backend installieren. Dort erscheinen dann die o.g. Extensions grau hinterlegt, sodass ihr nur noch auf „aktivieren“ klicken müsst.
Nicht wundern: Bei „fluidcontent“ content steht „obsolete“ im Status. Bei mir hat aber das automatische Auflösen der Abhängigkeiten die fluidcontent Version aus dem TER geladen. Hier gab es dann noch die Fehlermeldung:
Class "FluidTYPO3\Flux\View\TemplatePaths" not found
Das Problem taucht im Video von Naderio dann später auch nochmal auf. Ich habe das gleich umschifft, indem direkt die Entwicklerversion aus GitHub mithinzugefügt wurde.
Cache löschen, Backend neu laden. Und schon kann dir Arbeit weitergehen. Ab dieser Stelle beschreibt Naderio in seinen Tipps & Tricks dann wie es weitergeht.
Zum Direkteinstieg im Video bei 26:20 hier entlang
Providerextension erstellen
Nun müsst ihr zunächst die Providerextension erstellen Dafür den Builder starten im Abschnitt „Adminwerkzeuge“.
Anschließend müsst ihr im Builder die Option „build provider“ aufrufen.
Im Builder sehr ihr nun die Optionen für eure Providerextension. Die meisten Optionen erklären sich von alleine. Beim Feld Extension key gebe ich den Namen in der Form „Vendor.VendorProvider“ ein. Damit entsteht der Extensionordner „VendorProvider“.
Unter „Author name and email“ könnt ihr Namen und Email in der Form „Vorname Nachname <mailadresse@provider.com>“ angeben.
Ansonsten sollten die Optionen „include page templates“ und „include content templates“ aktiviert sein. Ebenso kann man „set the VHS extension as dependency“ aktiviert lassen.
Wichtig: Im Abschnitt „build behavior“ muss „Dry run“ deaktiviert werden, sonst wird keine Extension produziert. Hier nochmal im Überblick:
Nach einem Klick auf „Create provider extension“ erhaltet ihr eine Zusammenfassung. Anschließend müsst ihr eure Provider-Extension noch unter den Erweiterungen aktivieren. Et voila! Fertig. Dann kann es an die Umsetzung von eigenen Content Elementen gehen.
Ausführliche Tutorien einschließlich einer vollständingen Website-Umsetzung findet ihr in Naderios Kanal:
- Naderio’s Tipps & Tricks: TYPO3 8.7 – Komplette Webseite mit FluidTYPO3
- Naderio’s Tipps & Tricks: Flux – FluidTYPO3 Tutorials
Problem: Drag & Drop von Inhaltselementen führen zu einem Verschwinden
Nach einigen Tests mit den o.g. Extensions (jeweils development branch) ist mir ein Bug aufgefallen:
Sobald man Inhaltselemente innheralb eines Grid-Elements verschiebt, verschwindet dieses. Das liegt an einer fehlerhaften Zuordnung in der tt_content-Tabelle (tx_flux_column, tx_flux_parent).
zu den Issues auf GitHub:
- https://github.com/FluidTYPO3/flux/issues/1514
- https://github.com/FluidTYPO3/fluidcontent/issues/418
Ich habe dazu ein Video gemacht, wo ich den Fehler reproduziere:
Bisher ist meine Lösung nur für die Extension „fluidpages“ die GitHub development Version zu nutzen. Ob dann auch der Builder noch funktioniert habe ich nicht getestet.
Für den Fall dass er nicht funkioniert wäre mein Workflow der folgende:
1. Möglichkeit „extra“ Typo3-Installation mit den dev-Branches aller Extensions zum Kickstarten der Provider-Extension. Anschließend Installation der Provider-Extensions in der Typo3-Zielinstallation (dort dann alle Extensions aus dem TER bis auf Fluidpages)
2. Möglichkeit: Direkt alles in einer Installation vornehmen, in dem dann zunächst die dev-Branches zum Erstellen genutzt werden. Dann anschließend alles entfernen und die Extensions flux, vhs, fluidcontent löschen und aus dem TER neu hinzufügen. Fluidpages bleibt in der dev-Version.
Klingt so geschrieben komplizierter als es ist 🙂