Bootstrap3 Carousel mit Grid Elements für TYPO3

Nach einer etwas längeren Pause, möchte ich meine kleine Reihe von Bootstrap-Gridelements-Elementen fortsetzen. Heute habe ich das Carousel-Element fertig gestellt. Damit ist es möglich, ohne große Aufwände einen Slider an jeder Stelle einer Website zu platzieren. Auch hier muss man einen „Carousel-Container“ erstellen und in diesem kann man dann mehrere „Carousel-Elemente“ einfügen. Das Carousel-Element ist in zwei Spalten aufgeteilt, eine für das Bild und eine für den Text, der auf dem Carousel angezeigt werden soll (auch Caption genannt).

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

Installation

  • Erstelle den Ordner fileadmin/templates/gridelements/bootstrap3_carousel
  • Füge alle Dateien aus dem Gist in diesen Ordner ein (bootstrap3_carousel_container.xml, bootstrap3_carousel_container_template.html, page_ts.txt, setup.txt)
  • In TYPO3: Füge in dasTemplate der Hauptseite folgenden Code ein:
    <INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/templates/gridelements/bootstrap3_carousel/setup.txt">
  • In TYPO3: Bearbeite die Hauptseite und füge in das Feld “Page TSConfig” folgenden Code ein:
    <INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/templates/gridelements/bootstrap3_carousel/page_ts.txt">

Wenn man nun ein neues Inhaltselement in TYPO3 erstellt, sieht man unter dem Reiter „Grid Elements“ zwei neue Elemente:

bootstra3_carousel_elements
Bootstrap3 Carousel: Neues Element

Im „Carousel Element“ gibt es drei Einstellungsmöglichkeiten:

  • Automatischer Durchlauf: Automatischer wechsel der Bilder nach einer bestimmen Zeit.
  • Geschwindigkeit (in Sekunden): Die Zeit, die ein Bild angezeigt werden soll. Nur wenn Automatischer Durchlauf aktiviert ist, in Sekunden.
  • Endlosschleife: Wenn man beim letzten Bild angekommen ist, wird als nächstes wieder das erste Bild angezeigt.

Wenn man ein „Carousel Element“ in einen „Carousel Container“ einfügt, sieht man zwei neue Spalten: „Bild (max. 1)“ und „Inhalt“.

Bootstrap3 Carousel: Neues Carousel Element
Bootstrap3 Carousel: Neues Carousel Element

In die Spalte „Inhalt“ können mehrere Überschriften oder Texte hinzugefügt werden, in die Spalte „Bild“ sollte aber nur ein Bild eingetragen werden. Die üblichen Einstellungen für tt_content-Element werden ignoriert. Es werden nur die Felder „image“, „header“ und „bodytext“ für die Carousel-Elemente verwendet. Der Text wird vom RTE gerendert.

Ich denke nun haben wir alle dynamischen Elemente von Bootstrap als Gridelements-Element dargestellt. Falls hier noch jemand eine Idee für eine weitere Umsetzung hat, einfach an mich senden!

11 Kommentare zu „Bootstrap3 Carousel mit Grid Elements für TYPO3

  1. Bin heute durch Zufall auf Deine Seite gestoßen … mehr als Super und ich möchte Dir für die Arbeit danken, die Du Dir gemacht hast! Es funktioniert alles prima!

    Was ich mega finden würde, wäre eine Hilfestellung zum Thema „Bootstrap Megamenü und Typo3“ das würde irgendwie noch fehlen! Wäre klasse wenn da was kommen würde!

    Gruß Andy

  2. Hi Stefan,

    super Arbeit! Ich habe nur festgestellt, dass die Indicators nicht
    funktionieren zur Auswahl der einzelnen Slides.

    Daher mein Verbesserungsvorschlag in der bootstrap3_carousel_container_template.html:

    1. bei data-target vorne das #-Zeichen für die Ansprache der ID ergänzen
    2. bei data-slide-to „.index“ verwenden, beginnt bei 0 zu zählen

    alt:

    neu:

    Danke und vg Tobi

  3. Hallo Tobias, Danke für den Tip oben. Hat wunderbar funktioniert.

    Hallo Andreas,
    ein Megamenu mit Bootstrap kann man relativ einfach mit YAMM Bootstrap 3 realisieren!
    1. YAMM css einbinden
    2. Mit TS die Struktur nachbauen
    VG Max

  4. Hallo Stefan,

    die Anleitung ist super.

    Hast Du eine Idee wie man die Lightbox für die Bilder in dem Carousel aktiviert?

    Lightbox ist aktiv auf der Seite und im Backend ist der Haken bei Vergrößerung gesetzt.

    Gruß Marco

  5. Hallo Zusammen,

    vielleicht interessiert das den einen oder anderen.
    Habe mit Typo3 7.6 von „CSS styled content“ auf „Fluid Styled Content“ umgestellt. Damit wurde das image Content Element entfernt und damit muss diese Lösung hier angepasst werden.

    1. in der page_ts.txt Datei die Zeile „allowed = textmedia“ statt „allowed = image“ eintragen
    2. in der setup.txt Datei die Zeile „fieldName = assets“ statt „fieldName = image“ eintragen

    Dann kann man im Backend Text&Media in Carousel Elemente einfügen, wie gewohnt Bilder, die richtig geränderd werden sollten. Vielleicht gibt es noch eine besser oder andere Lösung.

    VG MAX

  6. Hallo Stefan,
    vielen Dank auch von meiner Seite.
    Zwei Dinge musste ich in

    bootstrap3_carousel_container_template.html
    zeile 4

    korrigieren, damit es bei mir mit bootstrap lief :

    zunächst das „#“ bei „data-target“ und dann noch bei „data-slide-to“ statt „tab_iteration.cycle“ „tab_iteration.index“, damit das ganze bei 0 und nicht bei 1 anfängt.
    Vg, Uwe

  7. Hallo Stefan, ich würde gerne das Bootstrap Carousel verwenden um mir einen Newsslider (mit der Erweiterung tx_news von georg ringer) auf der Startseite (News Listenansicht) aufzubauen, geht das und wenn ja wie? Schaffe es irgendwie nicht dass die News gerendert werden und um jede News ein item gelegt wird.. wäre super wenn du mir einen Tipp geben könntest. Danke dir. lg

    1. Hallo Bettina,
      da gibt es natürlich mehrere Wege. Man kann die Templates der tx_news Extension anpassen und direkt x News in ein Bootstrap Carousel rendern, dafür bräuchte man diese Implementierung über GridElements nicht. Wenn man diese GridElements-Lösung allerdings verwenden möchte, hat man nur die Möglichkeit, in jedem Carousel-Element das News-Plugin einzubinden und die maximale Anzahl an News auf eins zu stellen. Ich meine, dass es auch eine Einstellungsmöglichkeit gab, die ein „beginnend bei“ wiederspiegelt. Im zweiten Carousel-Element beginnt man dann bei der zweiten News usw.

      Gruß Stefan

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.