Bootstrap3 Grid mit Grid Elements für TYPO3

Wenn man eine Webseite mit TYPO3 unter Verwendung von Bootstrap 3 erstellt, kommt man meistens nicht daran vorbei ein Grid zu erstellen, wo der Redakteur die Seite selber strukturieren kann. Mit diesem Element kann der Redakteur dann ein Element erstellen, was eine Zwei-, Drei- oder Vierspaltigkeit darstellt. Innerhalb dieser Spalten kann man dann wieder gewohnte Inhaltselemente wie „Text mit Bild“ platzieren.

Die TYPO3 Erweiterung Grid Elements bietet die Möglichkeit, solche Elemente mit reinem TypoScript und Flexforms zu erstellen. Wenn man sich die Arbeit einmal gemacht hat, kann man so den Code jederzeit in anderen Projekten verwenden.

Ich habe alle benötigten Dateien einmal einem Gist hinzugefügt.
Alle Dateien: Bootstrap 3 Grid mit Grid Elements für TYPO3

Installation

  • Erstelle den Ordner fileadmin/templates/gridelements/bootstrap3_grid
  • Füge alle Dateien aus dem Gist in diesen Ordner ein (bootstrap3_columns_[2, 3, 4]col.xml, page_ts.txt, setup.txt)
  • In TYPO3: Füg in das Template der Hauptseite folgenden Code ein
    <INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/templates/gridelements/bootstrap3_grid/setup.txt">
  • In TYPO3: Bearbeite die Hauptseite und füg in das Feld „Page TSConfig“ folgenden Code ein:
    <INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/templates/gridelements/bootstrap3_grid/page_ts.txt">

Wenn man nun ein neues Content Element anlegt, erscheinen unter dem Tab „Grid Elements“ die neuen Elemente zur Spaltenbildung:

BS3 Grid mit Grid Elements: Neu

Man kann folgende Einstellungen vornehmen:

  • Spaltenbreite auf üblichen Bildschirmgrößen (.col-md-[1-12])
  • Spaltenbreite auf sehr kleinen Bildschirmgrößen (.col-xs-[1-12])
  • Spaltenbreite auf kleinen Bildschirmgrößen (.col-sm-[1-12])
  • Spaltenbreite auf großen Bildschirmgrößen (.col-lg-[1-12])
  • Sichtbarkeit des Hauptelements (.row) auf den einzelnen größen
  • Sichtbarkeit der einzelnen Spalten bei verschiedenen Bildschirmgrößen
  • „Gleiche Höhe für alle Spalten“. Diese Option fügt die Klasse .equal-height dem Hauptelement (.row) hinzu. Die Verarbeitung via JavaScript ist nicht enthalten.

BS3 Grid mit Grid Elements: Einstellungen

Im Seitenmodul kann man nun in die einzelnen Spalten neue Inhalte einfügen:
BS3 Grid mit Grid Elements: Vorschau

Sicherlich könnte man auch noch mehr Spalten anbieten, allerdings habe ich selten erlebt, dass mehr wie Vierspaltigkeit gewünscht wird. Außerdem lassen sich die Elemente auch ineinander verschachteln, sodass man theoretisch auch noch mehr Spalten simulieren kann.

Bitte bedenkt, dass diese Methode (bzw. Grid Elements) nicht mit TemplaVoila funktioniert.

 

50 Comments

  1. Carsten Hager sagt:

    Hallo,

    ich bin geader auf deine Seite gestoßen und hab das gleich mal versucht.
    Hab es genauso gemacht wie du beschrieben hast.
    Leider wird aber immer ( bei allen 3 Elementen) die Meldung

    Erweiterungsoptionen
    Data Structure ERROR: Line 1: not well-formed (invalid token)

    ausgegeben.
    Hast du einen Tipp für mich?

    Gruß Carsten

  2. micha sagt:

    tolle sache! Danke!

  3. Thomas Steindl sagt:

    Hallo Stefan,

    hast du auch schon mal das Thema Tabs mittels Gridelements in Bootstrap versucht?
    Scheitere da leider vergeblich.

    Gruß Thomas

  4. Ljubi B. sagt:

    Hallo, irgend wie funzt bei mir nicht, in Fronted wird alle elemente angezeigt aber nicht nebeneinader sondern unteranander, schein so als .css fehlt oder sehe ich das falsch. Sonst tole Arbeit, respekt an Macher, dahinter steckt viel Zeit und wiesen und dann einfach so zu verfügung gestelt, Danke.

  5. bschauer sagt:

    Vielen Dank – Tolle Sache

  6. Viktor sagt:

    „About Stefan Schäfer“ Bist n geiler Typ Stefan, teilst dein großes Wissen mit mir/uns Leihen.
    Danke Danke danach habe ich gesucht!
    „Thumbsup“

  7. Problemuser sagt:

    Abend,

    bekommen im Backend unteranderem folgende Meldung bei den xml Layouts:

    Erweiterungsoptionen
    Data Structure ERROR: Line 262: Mismatched tag

    Folgende Zeile wird angesprochen:

    Auch Umlaute und Sonderzeichen werden nicht richtig dargestellt und mussten angepasst werden.

    Ich vermute es liegt an der utf-8 Konfiguration unter Typo3 6.1.5
    Kann die Einstellung auf die Schnelle nicht zu finden

    • Hallo!
      Du scheinst ein generelles Problem mit dem Charset (utf-8) zu haben. Prüfe ob dort alles richtig eingestellt ist (utf-8 filesystem, DB usw.). TYPO3 >= 4.5 benutzt standardmäßig überall UTF-8, das entfernen von allen Konfigurationseinstellungen bezüglich Charset sollte die einfachste Möglichkeit sein.
      Du solltest auch überprüfen ob die Dateien selber im richtigen Format abgespeichert sind. Das ist Einstellungssache des Editors.

  8. Omar sagt:

    Hallo Stefan,

    super Sache! Danke!

    Ist es auch möglich einen DIV mehrere CSS-Klassen zu zuweisen?
    Beispiel aus Bootstrap:

    .col-xs-6 .col-md-4
    .col-xs-6 .col-md-4
    .col-xs-6 .col-md-4

    Gruß Omar

    • Hallo Omar,

      ja die Möglichkeit gibt es. Auf dem zweiten Screenshot kann man sehen, dass es mehrere Tabs zum Konfigurieren gibt. „Normal“ entspricht dabei „col-md-X“, „sehr klein“ entspricht „col-xs-X“ usw. Die Klassen der Spalten werden dann jeweils um die Einstellung erweitert. Stellt man auf „normal“ 3 und auf „sehr klein“ 6 ein, resultiert das in „col-xs-6 col-md-3“.

  9. Daniel sagt:

    Hallo Stefan

    Tolle Sache, die du da anbietest. Soeben bin ich daran, dies auszuprobieren. Dabei benutze ich die TYPO3 Version 6.1.7 . Verstehe ich richtig. Als Basis muss die Extension gridelements installiert sein?

    Besten Dank und Gruss
    Daniel

  10. Rob De Vries sagt:

    Really lovely,

    i’m getting to appreciate gridelements and these kind of examples really show how powerfull they can be.

    i did some adjustment:
    sometime i need to wrap an element in a div with a container class.
    I’e added a checkbox so i can decide to wrap it in a container class or not
    gits is at: https://gist.github.com/rob-ot-dot-be/8237762

    tnx !

  11. jochen sagt:

    Hallo,

    bei mir greift leider das CSS nicht bei den Spalten. Diese werden statt nebeneinander untereinander angezeigt. Wo genau muss ich hier drehen.?

    Im Quelle_Code ist auch keine Splate zu sehen.
    Danke

  12. Lucas sagt:

    Danke für deine Arbeit und die veröffentlichung.
    Ich bin noch neu im Thema Typo3 und würde gerne wissen wie ich die Spalten die ich mit z.B. col-md-6 durch die Layout-Vorlage definiert habe einzeln wrappen kann.
    Der Spalte eine weitere Klasse mitzugeben würde mich auch interessieren.

  13. Henrik sagt:

    Hallo,
    erstmal besten Dank für die Anleitung. Habe leider ein Problem. Ich kann nur auf der Hauptseite (wo das TSConfig eingefügt wurde) die neuen Spaltenelemente hinzufügen. Bei den jeweils anderen Seiten erhalt ich im Feld „Rasterlayout“ die Fehlermeldung „Wert ist nicht erlaubt [uebb_bootstrap_2col]. Hast du eine Idee wo der Fehler liegen könnte?

  14. Micha sagt:

    Hallo,

    ersteinmal tolle Arbeit! Konnte Deine Vorlagen schon mehrmals gut einsetzen.

    Im Moment habe ich aber irgendwie ein paar Probleme, denn ich erhalte nach dem Einbinden des TS und PageTS leider keinen Reiter „Raster-Elemente“ mehr.

    Ich verwende TYPO3 6.1.7 und gridelements 2.0.2.
    Wenn ich die einzelnen CE Layouts als Datensatz anlege funktioniert alles prima.

    Hättest Du eventuell einen Tipp, woran das liegen könnte?

    Danke und Grüße
    Micha

  15. Micha sagt:

    Hallo nochmals,
    das Problem zu meinem vorherigen Beitrag ist gelöst. Fall jemand das selbe Problem hat:
    Ich habe eine weitere PageTS Datei (cleaner.txt) als erstes eingebunden und danach die PageTS Datei. In der cleaner.txt stand folgendes:

    RTE.default.proc {
    entryHTMLparser_db = 1
    entryHTMLparser_db {
    tags {
    # b und i Tags werden ersetzt (em / strong)
    b.remap = strong
    i.remap = em
    }
    }

    Wenn man die PageTS Datei für die gridelements als erstes einbindet, dann funktioniert es.

    Nachmals vielen Dank für Deine Arbeit!

  16. Frank sagt:

    Hat schon jemand die Lösung gefunden warum bei manchen die Splaten untereinander statt nebeneinander angezeigt werden?

  17. Frank sagt:

    Der Grund für die falsche Positionierung liegt darin, dass die class der Spalten „leer“ ist. Im Quelltext steht „. Habe in der setup.txt den stdWrap „hart“ gefixt,(stdWrap.noTrimWrap = | class=“|col-md-4″|) aber das kann ja nicht die Lösung sein. Hat nochmal jemand eine Idee dazu? 😯

  18. Tobias sagt:

    Hi,

    vorweg erstmal.. Super Arbeit.
    Ich hab allerdings ein Problem.
    Bei mir werden die Plugin-Optionen nicht angezeigt.
    Woran kann das liegen?

    • Tobias sagt:

      Ok habs gefunden…. Ich hatte die gis-Dateien unter einem anderem Pfad gespeichert und musste natürlich auch die XML anders einbinden.. Manchmal sieht man den Wald vor lauter Bäumen nicht. 😕

  19. Thomas sagt:

    Das ist eine super Lösung – danke!

    Ich versuche gerade für das Backend Symbole/Icons zuzuweisen – wie funktioniert das? Via TS nehme ich an, oder?

  20. Niclas sagt:

    Hallo Stefan,
    wollte mit deine Lösung einmal ausprobieren mit Typo3 6.2. Grid Elements 3.0.0 Das scheint nicht zu funktionieren. Ich bekomme immer die Meldung [ WERT IST NICHT ERLAUBT („uebb_bootstrap_2col“) ] Im Feld: Raster-Layout
    Oder habe ich irgendwas falsch gemacht?
    Viele Grüße
    Niclas

  21. Patrick sagt:

    Hallo Stefan,

    großes Lob, tolles Beispiel! Hochachtung!

    Ich schließe mich dem Vorredner an. Mit Typo3 6.1.7 läuft alles problemlos.

    Mit 6.2.1 klappt es auch, aber im Backend werden die Texte nicht mehr angezeigt sondern nur die Rahmen…

    Könnte es an der Gridelements 3 (dev) liegen oder an Typo3 6.2.1?

    Viele Grüße!

  22. Alex sagt:

    Hallo Stefan,
    deine Bootstrap3-Paket klingt vielversprechend. Toll, dass du dir die Mühe gemacht hast, es der Community zur Verfügung zu stellen und zu erklären.

    Verstehe ich es richtig: Man darf dein Paket nicht in kommerziellen Projekten nutzen (laut Link von „BY-NC-SA“)?

    Viele Grüße
    Alex

  23. Christoph sagt:

    Hallo Stefan,

    Vielen Dank für deine Tolle Arbeit – Das ist genau das was ich schon lange versucht habe selber zu bauen.. 🙂

    DANKE!

  24. Burk sagt:

    Hey Stefan,
    auch ich schliesse mich an: Super Arbeit und danke, dass du das teilst. Ich habe allerdings ein merkwürdiges Phänomen:
    Im BE ist alles da nur im FE wird nichts gerendert bzw. ausgegeben. Irgendeine Idee?

    Meine Installation: TYPO3 6.2.3, gridelements 3.0.0-dev

  25. Das kann einige Gründe haben. Die Lösung lässt sich allerdings ohne Einblick ins System nicht ermitteln. Typische Fehlerquellen sind, das „CSS Styled Content“ nicht im Haupttemplate eingebunden ist oder das andere Extensions dort fehlen.
    Wenn Ihr das Grid ein einer eigenen Extension einbaut, dann muss das Template von der Extension auch eingebunden werden.

  26. Burk sagt:

    Hallo Stefan,
    ich Depp hatte CSS Styled Content im Root- und Extension-Template eingebunden und dadurch wurde mein Setup aus dem Root logischerweise überschrieben…
    Jetzt geht alles wie es soll 🙂
    Nochmals vielen Dank für deine Inspiration.
    Burk

  27. Wim sagt:

    Herzlichen Dank aus der Niederlande,

    Gelesen, studiert, eingebunden in eigenes Ordner (page_ts.txt geändert) und funktioniert einwandfrei in Typo3 6.2.4

    Vielen Dank für diese Veröffentlichung
    Wim

  28. Andreas Becker sagt:

    Danke auch von mir, läuft richtig gut!
    Als Bonus noch hier das passende equalheight-Skript:
    http://pastebin.com/AxkQvWpw

    Beste Grüße
    Andreas Becker

  29. Klaas sagt:

    Vielen Dank, läuft soweit gut.
    Ich habe TYPO3 6.2.4, gridelements 3.0.0, Bootstrap 3 und tt_news 3.6.0 .

    Nun meine Frage, wenn ich bei tt_news LIST und SINGLE auf einer Seite anzeigen will muss ich per TS Content in die Spalten schieben.
    Wie Spreche ich die 3te Spalte des 4 Spalten Layouts an?

    Danke und Gruß Klaas

    • Ich denke nicht das dies möglich ist, da man keinen echten Zugriff auf die finalen Spalteninhalte eines Gridelement-Objects hat.

      Meine wissens ist es aber möglich, auf einer Seite einfach in jede Spalte das tt_news Plugin einzufügen. Eins mit der Listen- und eins mit der Einzelansicht. Die Einstellungen sollten dann allerdings per Template/Setup/Constants und nicht im Plugin selbst gemacht werden.

      • Klaas sagt:

        Danke für den Tip, so geht es.
        Nur habe ich nun ein weiteres problem. Ich hätte gerne, das der aktuellste Artikel, wenn kein Artikel gewählt ist, in der SINGLE Spalte angezeigt wird und das scheint ohne zugriff auf die Spalte nicht zu gehen.

  30. Wiechert sagt:

    Hallo,
    Ich probiere Jets mit Grid Elements etwas zu machen.
    Aber habe eine frage, soll man noch ins back-end immer ein grid-elements nue anmachen oder funktioniert es schon wann das Page TSConfig.tx inkludiert wurde?
    Ohne BE layout hat es nicht geklappt.

  31. Alexander sagt:

    Hallo Stefan,

    Ich finde Deine Idee und Umsetzung super, nur leider bekomme ich im FE nichts angezeigt (T3 6.2.12 und gridelements 3.2.0).
    Kann es sein, dass da noch einige Änderungen notwendig sind – oder hat jemand aus der Community einen Tipp für mich?

    Das BE wird korrekt mit Inhalt angezeigt, so bald ich aber auf einer Seite ein Gridelement (oder auch die Tabs) verwende, bleibt die Seite im FE leer…

    Danke für die Hilfe!

    Alexander

  32. Chris sagt:

    Vielen Dank!!
    Funktioniert wunderbar und hilft mir beim aktuellen Projekt erstklassig weiter.

    Beste Grüße
    Chris

  33. Hans sagt:

    Hi, ich habe ein Problem mit den Spalten. Ich bekomme eine Fehler beim Speichern und weiss nicht was falsch ist.

    „2: SQL error: ‚Incorrect integer value: “ for column ‚tx_gridelements_container‘ at row 1′“

    Am sonsten super Plugin, und danke für deine Arbeit.

Schreibe einen Kommentar

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

question razz sad evil exclaim smile redface biggrin surprised eek confused cool lol mad twisted rolleyes wink idea arrow neutral cry mrgreen

*

Sicherheitsfrage * Time limit is exhausted. Please reload the CAPTCHA.