Bootstrap3 Collapse mit Grid Elements für TYPO3

Nun da ich gerade dabei war, hab ich auch noch das Collapse Element von Bootstrap in eine Grid Elements Version übertragen. Die Umsetzung kommt ohne Fluid-Template aus und Umfasst nur drei Dateien.
Der Aufbau ähnelt dem Tabs-Element. Man erstellt einen „Collapsible Container“ und fügt diesem einzelne „Collapsible Elemente“ hinzu. In diese Elemente können dann wieder übliche Inhaltselemente erstellt werden.

Wie immer ist alles zusammengefasst in einem Gist.
Alle Dateien: Bootstrap3 Collapse mit Grid Elements für TYPO3

Installation

  • Erstelle den Ordner fileadmin/templates/gridelements/bootstrap3_collapse
  • Füge alle Dateien aus dem Gist in diesen Ordner ein (bootstrap3_collapsible_element.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_collapse/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_collapse/page_ts.txt">

Erstellt man nun ein neues Inhaltselement, findet man im Reiter „Grid Elements“ die zwei neuen Einträge „Collapsible Container“ und „Collapsible Element“.

Bootstrap3 Collapse: Neues Element
Bootstrap3 Collapse: Neues Element

Es gibt im „Collapsible Element“ folgende Einstellungen:

  • Aktiv: Das Element ist standardmäßig ausgeklappt.
  • Aussehen: Standard, Wichtig (primary), Erfolgreich (success), Information (info), Warnung (warning), Vorsicht (danger): Definiert das Aussehen des Elements, abgeleitet von den verfügbaren Klassen eines Panels in Bootstrap3. Siehe Bootstrap Dokumentation zu Panels.

Das „Collapsible Element“ verwendet den Header zum aufklappen des Elements, dieser muss also gesetzt werden.

Viel Spaß mit dem Collapsible Element. Das nächste Projekt wird das Bootstrap3 Carousel werden.

 

19 Kommentare zu „Bootstrap3 Collapse mit Grid Elements für TYPO3

  1. Hallo Stefan,
    absolut Top!
    Habe gerade ein Bootsrap Template mit ein paar Standardgridelemnts zusammengebaut und war auf der Suche was da sonst noch geht. Mit den Gridelements kann man sich so manche Extensionprogrammierung sparen.
    Vielen Dank und Gruß
    Andreas Kempf

  2. Im Backend wird alles richtig angezeigt. Ich habe einen Rahmen angelegt, darin zwei Akkordeon-Elemente und in diesen wiederum je ein Inhaltselement. Diese werden aber nicht angezeigt. Im HTML stehen zwei leere DIV-Container.

    Geändert habe ich eigentlich nur, dass ich die ID des CD-Backend-Layouts angebe:
    tt_content.gridelements_pi1.20.10.setup {
    # ID of the gridelement
    3 {

    und die Flexform-Einstellungen rausgenommen habe. Meine Columns haben auch colPos=0.

    Den Inhalt in das Akk-Element müsste ja die Zeile renderObj = < tt_content reinpacken…

    Hast Du einen Tipp?
    Danke
    Axel

  3. Hallo Stefan,

    vielen vielen Dank für deine Arbeit hier.
    Hab damit schon ein sehr schöne Bootstrap Template aufbauen können.

    Kannst du abschätzen wann das Bootstrap3 Carousel fertig werden wird?

    P.s hast du den Amazongeschenkliste??
    Man könnte sich ja mal mit ner Kleinigkeit für deine Arbeit bedanken!!! 🙂

    Gruß Michael

  4. Hallo Stefan,

    auch von mir erst mal Danke für deine Arbeit.

    Ich habe allerdings das seltsame Phänomen, das die Containerelemente im Frontend immer wieder verschwinden!
    Es ist dann nur noch der Rahmen ausgegeben:

    Wenn ich dann den Cache lösche ist erst wieder alles da, beim nächsten reload aber wieder weg.

    Hattest du das Problem auch schon mal oder irgendeine Idee was das sein kann?

    1. Hallo Alexander,

      das ist interessant denn dieses Problem hat mich letzte Woche knapp 2 Stunden gekostet, allerdings mit einem anderen selbst gebautem Element.

      Ich vermute, dass du das page-Typoscript (page-ts) innerhalb einer eigenen Extension eingebunden hast. Stelle bitte sicher, dass dieses in der Datei „ext_localconf.php“ und nicht in „ext_tables.php“ eingebunden wird. Anonsten funktionieren die Elemente nämlich nur, wenn man im Backend eingeloggt ist (caching und so).

      Gruß Stefan

  5. Hallo!

    HAbe versucht, die Anleitung umzusetzen, aber ganz ohne Erfolg :

    page = PAGE
    page.includeCSS {
    bootstrap = fileadmin/BOOTSTRAP/css/bootstrap.min.css
    }
    page.includeJSFooter {
    jquery = fileadmin/JQUERY/jquery-1.11.1.min.js
    bootstrap = fileadmin/BOOTSTRAP/js/bootstrap.min.js
    }

    page.10 = TEXT
    page.10<styles.content.get

    Was mache ich falsch ? 😳

  6. Hallo,

    die Bootstrap-Tutorials sind echt klasse.

    Ich würde gerne den Zustand des Panels im Panel-Headers noch mit einem Icon versehen. Damit das richtig funktioniert, müsste der wrap aber auf das Feld flexform_active reagieren.

    Ich habe schon alle möglichen Varianten mit

    if.isTrue.data = field:flexform_active
    wrap.if.isTrue = |

    probiert, aber leider klappt keine so richtig.

    Wenn ich mir den Inhalt des Feldes mit wrap = | {field:uid} {field:flexform_active} anzeigen lasse, erhalte ich auch 0 bzw. 1.

    Wo liegt mein [Denk-]Fehler?

  7. Hallo,

    echt super die Tutorials.

    Das Collapse Element jedoch generiert keinen Link, d.h. der Code:

    10
    parameter = #collapse-{field: uid}
    parameter.insertData = 1
    ATagParams = class=“accordion-toggle“ data-toggle=“collapse“ data-parent=“#collapsible-{field: parentgrid_uid}“
    ATagParams.insertData = 1
    }

    generiert:

    ###############hier müsste ein Link stehen
    Collapse Element 1

    Ich benutze Typo3 7.6 mit Gridelements 7.0.1.
    Hätte jemand einen Tip für mich woran das liegt?

  8. Hallo zusammen,

    habe das Collapse Element jetzt etwas umgeschrieben und es funktioniert jetzt, wenn es auch noch bessere Lösungen gibt.
    Man könnte die Größe der Header Überschrift der Collapse Elemente z.B im Backend über das Layout bestimmen.

    Hier der Code:
    innerWrap.cObject = COA
    innerWrap.cObject {
    wrap = <div class=“panel-heading“ role=“tab“><h4 class=“panel-title“>|</h4>></div>
    10 = TEXT
    10 {
    value.field = header
    typolink {
    parameter = #collapse-{field: uid}
    parameter.insertData = 1
    ATagParams = class=“accordion-toggle“ data-toggle=“collapse“ data-parent=“#collapsible-{field: parentgrid_uid}“
    ATagParams.insertData = 1
    }
    }
    }

    VG

    1. Hallo Jochen, kann ich dich kurz fragen, wie du dass geschafft hast. Ich habe auch Typo3 8.7 und bei mir tut sich nichts.
      Dateien sind hochgeladen. Jedoch bin ich bei den Code Zeilen nicht sicher.
      Ich wäre um Hilfe dankbar

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.