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“.
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.
Klasse! Für mich als Einsteiger schön zu verwenden bzw. zum Lernen und Verstehen.
Danke dir dafür!
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
Top Arbeit. Wollte ich auch machen, aber so… Arbeit gespart 😉 danke
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
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
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
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 🙂
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
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 ? 😳
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?
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?
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.
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
Hallo zusammen,
wie kann ich es anpassen, dass der erste Collapse schon geöffnet ist?
Gruß
Hallo Stefan,
ich habe Bootstrap3 Collapse mit Grid Elements für TYPO3 unter 8.7 am laufen.
Wirklich klasse, ganz grosses Lob. 😉
gruss jochen
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
ein kleiner Screenshot von den Codezeilen würde schon helfen.
DANKE =)
Hat das jemand unter TYPO3 8.6 laufen und könnte verraten, wie man es hin bekommt? 🙂