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.

 

52 Kommentare zu „Bootstrap3 Grid mit Grid Elements für TYPO3

  1. 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

    1. Hallo Carsten,

      danke für die Meldung!
      Ich habe einen kleinen Fehler in der „pageTS.txt“ Datei gefunden. Es fehlte das „FILE:“ bei „flexformDS“, wodurch die Flexform-Definition nicht geladen wurde.
      Den Beitrag habe ich um eine kleine Installationsanleitung erweitert und die Gist-Dateien habe ich aktualisiert.

      Gruß Stefan

  2. 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.

  3. 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

    1. 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.

    1. 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“.

  4. 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

  5. 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.

  6. 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?

  7. 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

  8. 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!

  9. 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? 😯

    1. 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. 😕

  10. 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

  11. 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!

  12. 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

  13. 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

  14. 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.

  15. 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

  16. 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

  17. 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

    1. 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.

      1. 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.

  18. 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.

  19. 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

  20. 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.

  21. Hallo,

    ich hatte dein Bootstrap-3 Grid in ein paar älteren Projekten damals verwendet – es funktionierte WUNDERBAR :-). Danke!

    Habe auch ein paar Dinge noch erweitert und dokumentiert zu Verfügung gestellt -> typo3.andreas-huber.at

    Nun bräuchte ich es wieder für ein neues Projekt – allerdings unter Bootstrap 4. Hast du das auch mal benötigt und gibt es hier eine neue Version?

    Vielen Dank,
    schöne Grüße,
    Andi Huber

Schreibe einen Kommentar

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

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

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