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.

 

18 Comments

  1. Mario sagt:

    Klasse! Für mich als Einsteiger schön zu verwenden bzw. zum Lernen und Verstehen.
    Danke dir dafür!

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

  3. Marc Finnern sagt:

    Top Arbeit. Wollte ich auch machen, aber so… Arbeit gespart 😉 danke

  4. Axel sagt:

    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

  5. Michael Wichel sagt:

    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

  6. Alexander Grein sagt:

    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?

    • 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

  7. Alexander Grein sagt:

    Hallo Stefan du bist mein Held!!!

    Da wäre ich sicherlich so schnell nicht draufgekommen.

    Vielen herzlichen Dank für den Tipp, jetzt klapp’s 🙂

  8. alex sagt:

    wo muss man das template bootstrap 3 herunterladen(fileadmin) , und wie kann ich die seiten (baumseite ) in typo3 anzeigen lassen , kann mir jm helfen bitte , ich brauche ein tipp

  9. Roland Hentschel sagt:

    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 ? 😳

  10. wini sagt:

    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?

  11. Max sagt:

    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?

  12. Hallo alle,

    ich werde mir die Problematik in den nächsten Tagen angucken und den Beitrag aktualisieren. Ich vermute, dass die Probleme mit einer neuen Version von Gridelements oder TYPO3 7.6 zusammenhängen.

  13. Max sagt:

    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

  14. Marco sagt:

    Hallo zusammen,

    wie kann ich es anpassen, dass der erste Collapse schon geöffnet ist?

    Gruß

  15. Jochen Graf sagt:

    Hallo Stefan,

    ich habe Bootstrap3 Collapse mit Grid Elements für TYPO3 unter 8.7 am laufen.

    Wirklich klasse, ganz grosses Lob. 😉

    gruss jochen

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.