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!

9 Comments

  1. Kuchenbuch sagt:

    Hallo Stefan,

    vielen Dank für diese gute Unterstützung. Ich habe nur das Problem, dass der Slider nicht slidet…:-) Im Moment habe ich da keine Idee – ev. kannst Du einen Tipp geben.

    VG Jens

  2. Andreas sagt:

    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

  3. Tobias sagt:

    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

  4. Max sagt:

    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

  5. Marco sagt:

    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

  6. MAX sagt:

    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

  7. Uwe sagt:

    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

  8. Bettina sagt:

    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

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

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.