07.04.2022 | TYPO3, TYPO3 Schnipsel, Webentwicklung
TYPO3 – Grid Elemente anlegen mit gridelements

Hin und wieder ist es notwendig, eigene Grid-Elemente für eine TYPO3 Seite zu bauen. In diesem kleinen Beitrag zeige ich dir, wie du ein 3-spaltiges Grid Element erstellen kannst und im Backend & TypoScript einbindest bzw. definierst. Die CSS Klassen, die in meinem Beispiel zur Anwendung kommen, stammen aus dem Bootstrap Framework in der Version 4.6.x.

Im TypoScript

Zunächst kannst du im TypoScript dein neues Grid Element registrieren. Hier werden unter anderem der Alias „3colgrid“ und die drei Spalten (0,1 und 2) definiert. Jedes Element hat eine eigene CSS Klasse, damit sie später nebeneinander ausgegeben werden können. Der Alias, sowie die Spaltennamen kommen auch im weiteren Verlauf im Backend zum tragen.

######################
#### Grid Elemente ###
######################

tt_content {
    gridelements_pi1.20.10.setup {
     3colgrid < lib.gridelements.defaultGridSetup
     3colgrid {
       columns {
         0 < .default
         0.wrap = <div class="col-12 col-md-4">|</div>
         1 < .default
         1.wrap = <div class="col-12 col-md-4">|</div>
         2 < .default
         2.wrap = <div class="col-12 col-md-4">|</div>
       }
       wrap = <div class="container"><div class="row grid-element mt-4">|</div></div>
     }
    }
}

Im Backend

 

Schritt 1

Hast du im TypoScript das Grid Element definiert, erstellst du als nächstes das entsprechende Element im Backend. In diesem Fall gehe ich über das Listenmodul und erstelle ein neues Element innerhalb eines zuvor erstellten Ordners.

Schritt 2

Zunächst wirst du dann nach einem Namen für das Grid Element gefragt, dieser wird die Später bei den Raster Element angezeigt und zur Auswahl gestellt. Im Reiter „Allgemein“ kann du zusätzlich noch die Rahmenfarbe für die Darstellung im Backend definieren. Um gewöhnliche Inhalts-Elemente von Grid Elementen zu unterscheiden, kann es sinnvoll sein eine Farbe festzulegen.

Schritt 3

Im Reiter Konfiguration legst du den Alias und die Spaltendefinition fest. Der Alias ist wichtig und muss gleichlautend dem deines TypoScripts sein. Innerhalb der Rasterkonfiguration musst du die Spaltennummern, die zugelassenen Inhalts-Elemente (Text, Text & Medien, Bild, usw.) und die Namen der Spalten vergeben. Auch die Spaltennummern müssen gleichlautend denen im TypoScript sein, damit die Inhalte später im Frontend korrekt ausgegeben werden.

Schritt 4

Jetzt steht dir und deinen Redakteuren über die Inhalts-Elementen dein neues Raster-Element zur Verfügung und es kann ausgewählt und befüllt werden.

Schritt 5

Wie zuvor definiert besteht das Raster-Element aus insg. drei Spalten. Eine Einschränkung wurde nicht vorgenommen, also kannst du nun in jeder Spalte ein beliebiges Inhalts-Element unterbringen. Übrigens kann hier eine interessante Ergänzung der Einsatz von Layouts und/oder Header Layouts sein um die in den Spalten befindlichen Inhalte zusätzlich zu stylen.

Im Frontend

Mit etwas CSS in Form gebracht kann dein befülltes Raster-Element im Frontend dann wie nebenstehend aussehen.

geschrieben von Jens (keine Kommentare), , ,

Du kannst diese Seite via PayPal unterstützen: paypal.me/jensbh

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Mit und gemacht in Kassel / Nordhessen. 2022