Weshalb das neue Typo3 mit Fluid rockt


jeipack

Erfahrenes Mitglied
Ich muss für einen Kunden sehr individuell designte Submenus kreieren. Dieses besteht aus einem Grunddesign, die Platzierung der Elemente (oder auch die Elemente selbst) kann aber je nach Sprache und Land unterschiedlich sein.

Um das ganze möglichst übersichtlich und editierbar zu halten habe ich mich dazu entschlossen für jedes Submenu eine Seite im Pagetree zu erstellen, welches jeweils ein Submenu präsentiert:
upload_2015-3-6_22-21-27.png

Jedes Submenu bekommt ein eigenes Pagetemplate, um eine gute Darstellung im Backend zu haben benutze ich flux:grid:
HTML:
        <flux:grid>

            <flux:grid.row>
                <flux:grid.column colPos="1" colspan="2"  name="Title big section" />
                <flux:grid.column colPos="5" rowspan="2" name="List 4 (top right)" />
            </flux:grid.row>
           
            <flux:grid.row>
                <flux:grid.column colPos="2" rowspan="2"  name="List 1 (big section - left)" />
                <flux:grid.column colPos="3"  name="List 2 (big section - right top)" />
            </flux:grid.row>
           
            <flux:grid.row>
                <flux:grid.column colPos="4"  name="List 3 (big section - right bottom)" />
                <flux:grid.column colPos="6"  name="List 5 (middle right)" />
            </flux:grid.row>
           
            <flux:grid.row>
                <flux:grid.column colPos="7" colspan="2"  name="List 6 (bottom left)" />
                <flux:grid.column colPos="8"  name="List 7 (bottom right)" />
            </flux:grid.row>
               
        </flux:grid>
was im Backend dann so aussieht:
upload_2015-3-6_22-28-47.png
Diese Darstellung hat nichts mit der Frontend Ausgabe zu tun und hilft nur dem Backend User sich zu orientieren.
Die eigentliche Ausgabe erfolgt dann wieder im fluidtemplate:
HTML:
    <div class="submenu">
        <v:content.render column="1" />
        <v:content.render column="2" />
        <v:content.render column="3" />
        <v:content.render column="4" />
        <v:content.render column="5" />
        <v:content.render column="6" />
        <v:content.render column="7" />
        <v:content.render column="8" />
    </div>
(daran arbeite ich noch ;) aber wie man sieht repräsentiert jede dieser Linien eine column aus dem obigen flux:grid.

Als nächstes erstelle ich verschiedene Content Elemente die dann im obigen Grid beliebig platziert werden können. (Diese Elemente können einfache Listen sein, oder formatierter Text bis zum Slider der wiederum beliebige Elemente beinhalten kann).

Schlussendlich wird dann genau diese Page im Layout (dass alle Seitem umfasst) gerendert und als Submenu benutzt.

Wird die Seite nun übersetzt, hat diese das gleiche Page Template, hat also auch das Grid von oben und somit das gleiche Grundgerüst, kann darin aber völlig andere Elemente speichern.

Wenn nun für Englisch zum Beispiel Englisch USA die Hauptspache ist, und man für sagen wir Englisch Australien nur ein Element austauschen will, muss in der Englisch Austalischen Übersetzung auch nur dieses eine Feld abgefüllt werden, der rest wird durch einen Fallback automatisch von der Hauptsprache genommen.

Das schöne daran ist, steht das erstmal können beliebig viele Sprachen hinzugefügt werden und die Submenus können im gewollten Ramen völlig frei individualisiert werden, ohne das von programmiertechnischer- oder designtechnischer-Sicht noch etwas gemacht werden muss.