share

TYPO3: Fluid und Grid Elements gemeinsam verwenden

Wie man Partials und ViewHelper für Gridelements nutzen kann: Alternativ zur normalen TypoScript-Konfiguration ist es möglich, die Darstellung eines Grid-Elements in einem einfachen HTML-Template zu definieren und dabei auf die Fähigkeiten von Fluid zurückzugreifen.

Die folgende Anleitung beschreibt die Verwendung von Fluid für die Frontendausgabe von Raster-Elementen. Sie wurde mit gridelements 2.0.2 unter TYPO3 6.1 getestet. Es wird vorausgesetzt, dass die gridelements-Extension bereits installiert ist und das statische TypoScript der Extension im Template eingebunden wurde.

Als Beispiel legen wir ein neues Gridelement (CE Backend Layout) mit zwei Zeilen und drei Spalten an, hierbei werden die beiden linken Elemente zu einer Sidebar und die beiden rechten oberen Spalten zu einer Spalte zusammengefasst. Dies kann entweder über die Raster-Konfiguration oder den Assistenten erfolgen.

Folgende Raster-Konfiguration liefert das gewünschte Ergebnis:

backend_layout {
    colCount = 3
    rowCount = 2
    rows {
        1 {
            columns {
                1 {
                    name = Left
                    rowspan = 2
                    colPos = 11
                }
                2 {
                    name = Top
                    colspan = 2
                    colPos = 12
                }
            }
        }
        2 {
            columns {
                1 {
                    name = BottomLeft
                    colPos = 22
                }
                2 {
                    name = BottomRight
                    colPos = 23
                }
            }
        }
    }
}

Anschließend geht es an die TypoScript-Konfiguration für das Gridelement im Template-Setup.

tt_content.gridelements_pi1.20.10.setup {
    # ID des Gridelements
    1 < lib.gridelements.defaultGridSetup
    1 {
        # FLUIDTEMPLATE konfigurieren
        cObject = FLUIDTEMPLATE
        cObject {
            file = fileadmin/template/gridelements/layout.html
        }
    }
}

Zum Schluss noch das Fluid-Template. Zum Einbinden des Spalteninhalts des Raster-Elements wird auf die entsprechende Spalte im data-Objeḱt zugegriffen.

<div class="row">
    <div class="column small-4">
        <f:format.raw>
            {data.tx_gridelements_view_column_11}
        </f:format.raw>
    </div>
    <div class="column small-8">
        <div class="row">
            <div class="column small-12">
                <f:format.raw>
                    {data.tx_gridelements_view_column_12}
                </f:format.raw>
            </div>
        </div>
        <div class="row">
            <div class="column small-6">
                <f:format.raw>
                    {data.tx_gridelements_view_column_22}
                </f:format.raw>
            </div>
            <div class="column small-6">
                <f:format.raw>
                    {data.tx_gridelements_view_column_23}
                </f:format.raw>
            </div>
        </div>
    </div>
</div>

Wenn das Gridelement auf einer Seite hinzugefügt und mit Inhalt gefüllt wurde, sollte man im Frontend folgendes Ergebnis erhalten:

layout

7 Kommentare zu:

TYPO3: Fluid und Grid Elements gemeinsam verwenden

  • Seb

    Hallo
    Ich bin genau danach vorgegangen und es funktioniert leider nicht. Ich bekomme eine leere Seite angezeigt. Ich hatte noch nie Probleme mit GridElements aber in verbindung mit Fluidtemplate bekomme ich es nicht hin. Wie kann man denn debuggen?

  • Sebastian

    Ich habs dann doch hinbekommen aber doch ohne FLUIDTEMPLATE. Ich hatte im Main Template zu zwei layouts verwiesen in denen die content elemente als parameter überreicht wurden. Das war wohl der Fehler warum die obige Version nicht ging.
    Das FLUIDTEMPLATE debugging ist schon klar aber es hilft weder bei weissen Bildschirm noch beim Ooops Error oder irre ich mich? Ich bastel mal weiter… werde es schon hinbekommen. Danke für die Antwort.
    s.

  • Torben Hansen

    Vielen Dank für dieses hilfreiche Tutorial. Das macht die Arbeit mit komplexen/verschachtelten GridElements deutlich einfacher.

  • Christian

    In der neuen Version wir anstatt der UID des CE Backend Layouts der Alias verwendet (sofern man ihn setzt).
    Also anstatt

    1 < lib.gridelements.defaultGridSetup

    MY_ALIAS < lib.gridelements.defaultGridSetup

    usw.

  • Sven

    Interessant wäre nun noch, wie man die Überschrift aus dem gridelement-CE über das Fluid Template ausgeben kann.

  • Johannes

    Sollte vllt. so gehen (ungetestet):

    # Überschriften der Gridelemente einblenden
    tt_content.gridelements_pi1.10=<lib.stdheader

  • Hinterlasse einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert