"Dafür gibt's aber 'ne Extension"

Bilderslider mit Bootstrap und TYPO3

Warum weniger Extensions besser sind: Beispiel für ein Bootstrap-Karussell in TYPO3

Wer ein Content-Management-System für seine Website aussucht , sollte sich auch die Kernfunktionen ansehen. Ein System, das möglichst viele gewünschte Features schon "an Bord" hat, macht die Pflege deutlich einfacher. Extensions, Module, Plugins, je nach Terminologie des CMS, bringen nicht nur Vorteile. Wir zeigen am Beispiel TYPO3 6.1/6.2 mit einem einfachen Bilderslider aus dem Framework Bootstrap, wie man sich eine Extension sparen kann.

Extensions erweitern Funktionen und die Arbeit

Warum sollte man überhaupt möglichst wenige Extensions verwenden? Weil sie in mehrerer Hinsicht einen Unsicherheitsfaktor darstellen können:

  1. Extensions müssen ständig weiterentwickelt werden, weil sich immer wieder die Rahmenbedingungen ändern, neue Funktionen implementiert oder Sicherheitslücken geschlossen werden müssen. Wenn der Entwickler keine Zeit oder Lust mehr hat, die Erweiterung auf dem neuesten Stand zu halten, können Sicherheitslücken entstehen, die der Benutzer erst merkt, wenn ein Schaden entstanden ist. Neben dem damit verbundenen Ärger muss er sich einen Ersatz für die Extension suchen und die Website zuweilen mit großem Aufwand anpassen.
  2. Die Wartung der Website wird einfacher und nimmt weniger Zeit in Anspruch, wenn keine Updates für Extensions eingespielt werden müssen. Außerdem besteht bei weniger Erweiterungen seltener die Gefahr, dass eine Extension mit der neuen Version des Kernsystems nicht mehr kompatibel ist. Hier sind nicht die Major Releases wie das neue TYPO3 6.2, Joomla! 3 oder Drupal 8 gemeint, sondern die kleinen regelmäßigen Modifikationen, die in jedem Open-Source-System vorkommen.
  3. Jede Extension muss vom System "verkraftet" werden: Sie bringt oft mehr Daten mit, als für die gewünschte Funktion eigentlich benötigt würden und wird an verschiedenen Stellen im System registriert. All dies kostet Sprecherplatz und Performance.
  4. Eine neue Extension sorgt möglicherweise dafür, dass bereits vorhandene Erweiterungen nicht mehr richtig funktionieren.

Ein Basis-Bilderkarussell mit Bootstrap und dem FILES-Objekt von TYPO3

Das CSS-Framework bietet einen großen Werkzeugkasten für moderne Websites. Es basiert auf einem zwölfspaltigen responsiven Gridsystem und enthält zusätzlich Extras wie kleine Icons, ein Dropdown-Menü, eine Breadcrumb-Navigation und einen Bilderkarussell. Dazu müssen den entsprechenden HTML-Elementen einfach die im Bootstrap-CSS definierten Klassen zugewiesen werden. Zusammen mit der FILES-Objekt entsteht ein Slider mit vielen Funktionen:

  1. Neben der Datei bootstrap.css müssen bootstrap.js und jQuery eingebunden werden. JQuery ist oft schon durch TYPO3 oder eine andere Extension vorhanden. Die Javascript-Dateien sollten in den Footer gesetzt werden.
  2. In TYPO3 wird ein Datensatz des Content-Objekt des Typs "Images" angelegt und entweder per Upload oder aus dem Fileadmin mit Bildern befüllt. Jedes Bild hat Felder für Titel, Alt-Text, Linkziel und Beschreibung. Auf alle vier Felder kann der Slider später zugreifen, es sind aber alle Felder optional.
  3. Ein Typoscript-Content-Objekt wird einem bereits vorhandenen oder neu angelegten TypoScript-Template definiert.
  4. Das TypoScript-Objekt wird über den Viewhelper < f:cObject typoscriptObjectPath="lib.slider"/>  ins HTML-Template eingebunden.
  5. Fertig! Der Slider ist durch Bootstrap flexibel und verkleinert die Bilder, sobald der Bildschirm schmäler wird. Durch den Zugriff auf ein Verzeichnis können beliebig viele Bilder in den Slider geladen werden
  6. Der Slider tut im Einsatz Folgendes:
  • Jedes Bild wird geladen, dazu Titel und Alt-Text.
  • Als zweiter Schritt wird zu jedem Bild der Beschreibungstext auf das Bild gelegt und mit dem im "Links"-Feld angegebenen Seite verlinkt. Dadurch hat der Slider bei Bedarf eine eingebaute Navigation.
  • Außerdem lädt der Slider dynamisch für jedes Bild einen kleinen Navigator, den man direkt zum Bild gelangt.

Foto: © gigi200043 - Fotolia.com

Code: 
#####  1. Zugriff auf die Bildersammlung
lib.slider = COA
 
##### 1.  eine Startvariable festlegen
lib.slider.5 = LOAD_REGISTER
lib.slider.5.counter = 0
 
#####  2. Zugriff auf die Bilder
lib.slider.10 = FILES
lib.slider.10.references {
  table = tt_content
  #####UID des "Images"-Content-Elements, in das die Bilder geladen werden 
  uid = 123
  fieldName = image
}
 
#####  3. Ausgabeiteration der Buttons steuern
lib.slider.10.renderObj = COA
#####  3.1. Zählervariable festlegen
lib.slider.10.renderObj.10 = LOAD_REGISTER
lib.slider.10.renderObj.10  {
    ### Die Startvariable wird der Zählervariablen zugewiesen
    divCounter.data = register:counter
    ### Die Startvariable wird wird bei jedem Durchlauf um eins erhöht
    counter.data = register:counter
    counter.stdWrap.wrap = |+1
    counter.prioriCalc=1
  }
#####  3.2 Die Zählervariable wird als Text ausgegeben und mit Optionsplit als Listenelemente gewrappt
lib.slider.10.renderObj.15 = TEXT
lib.slider.10.renderObj.15.data = register:divCounter
lib.slider.10.renderObj.15.wrap = <li data-target="#carousel-example-generic" data-slide-to="|" class="active"></li>|*|<li data-target="#carousel-example-generic" data-slide-to="|" class="">
</li>|*|<li data-target="#carousel-example-generic" data-slide-to="|" class=""></li>
##### 3.3 Container um den gesamten lib.slider.10
lib.slider.10.stdWrap.wrap3 =  <ol class="carousel-indicators">|</ol>
 
#####  4. Ausgabeiteration der Bilder steuern
#####  4. 1 Kopie des FILES-Objekts 
lib.slider.20 < lib.slider.10
lib.slider.20.renderObj = COA
 
 
##### 4.2 Das Bild wird geladen
lib.slider.20.renderObj.10 = IMAGE
lib.slider.20.renderObj.10 {
    file.import.data = file:current:publicUrl 
##### 4.3 Das Bild erhält Alt-Text und Titel aus den Bildeigenschaften
    altText.data = file:current:alternative
    altText.htmlSpecialChars = 1
    titleText.data = file:current:title
    titleText.htmlSpecialChars = 1
  }
 
lib.slider.20.renderObj.15 >
 
##### 4.4 Aus dem Feld "Description" wird ein Caption-Text erzeugt, der einen Link mit der im Linkfeld eingetragenen Adresse erhält
lib.slider.20.renderObj.20 = TEXT
lib.slider.20.renderObj.20 {
    stdWrap.data = file:current:description
    stdWrap.removeBadHTML = 1
    stdWrap.typolink.parameter.data = file:current:link    
##### 4.5 Container um die Caption    
    wrap = <div class="carousel-caption active">|</div>|*|<div class="carousel-caption">|</div>|*|<div class="carousel-caption">|</div>
  }
##### 4.4 Container um die Bilder und Captions, das erste Element erhält eine andere Klasse als die anderen
lib.slider.20.renderObj.wrap = <div class="item active">|</div>|*|<div class="item">|</div>|*|<div class="item">|</div>
 
##### 4.5 Container um den gesamten lib.slider.20
lib.slider.20.stdWrap.wrap3 =  <div class="carousel-inner">|</div> 
 
##### 5. Container um des gesamte Element
lib.slider.stdWrap.wrap3 (
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
|
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
  </div>        
)
Bild des Benutzers alexander

Alexander Künzl

Alexander Künzl ist seit 2012 im Unternehmen und kümmert sich um Projektmanagement, Suchmaschinenoptmierung und Webmarketing. Das Content Management System seiner Wahl ist TYPO3.

Kommentare

hört hört...
sprach von Leistung, Sicherheit und Nachhaltiger Pflege.
Dann baute er sich ein Typoscript...

pfundig ^^

Bei Deiner Lösung muss die ID des Content-Elements fest angegeben sein. Wie könnte man sie denn so erweitern, dass der Redakteur bei einem beliebigen Image-Element mit mehreren Bildern einen Slider auswählen kann?

Bild des Benutzers alexander

Hallo Nicolai,

vielen Dank für deinen Kommentar. Wir haben dazu einen kurzen neuen Artikel geschrieben (aktualisiert für TYPO3 6.2):

http://www.ambranet.de/blogpost/cms/bootstrap-karussell-bilderslider-aus...

Hallo,
nachdem unsere Slider Extension nun lange ohne große öffentliche Info rumgedümpelt ist, haben wir es geschafft endlich eine Plattform dafür einzurichten. Würde mich freuen wenn diese neue Extension erwähnt werden könnte :-)

http://www.typo3-layerslider.de/

Danke & Liebe Grüße

Ich bin erst heute auf diese Seite und die Möglichkeit eines Bootstrap-Sliders in die Seite ohne extension zu integrieren gelandet.
Meine Frage (vielleicht habe ich es auch überlesen): Wo füge ich den ganzen Code ein?

Im extension-Template? Im Setup des Haupttemplate? Oder wo?

Und wie kann ich die UID der Bilder festlegen?

Bild des Benutzers alexander

Hallo Maddin,

das Typoscript kann an eine beliebige Stelle ins Typoscript-Setup gesetzt werden. Wir teilen das Typoscript auf mehrere Templates auf, so dass bei uns der Slider ein eigenes Extensiontemplate bekommt.   

"Uid der Bilder" steht für die UID des Images-Content-Elements, in das die Bilder geladen werden. Das kann beispielsweise in einem Ordner im Seitenbaum angelegt werden. Danke für das Feedback, ich habe die Stelle etwas klarer umbenannt.

Hi,

lässt sich über diese Variante auch ein Fullscreen-Slider bauen? Wie bspw. hier auf der Startseite zu sehen: http://www.cemguenes.com/#1

Danke und Gruß, Manuel

Bild des Benutzers alexander

Hallo Manuel,

ich hab das jetzt nicht getestet, aber das Auslesen der Bilder funnktioniert unabhängig von den Navigationselementen unten und an den Seiten, so dass diese Teile aus dem Slider entfernt werden könnten.

Grüße

Alexander 

 

Hallo Alexander hab mir auch das Bootstrap Carousel in Typoscript zusammengebaut, da hat mir dein Artikel sehr geholfen, danke erstmal dafür. Jetzt hätte ich eine Frage, hab mir nämlich auch zusätzlich eine kleine Thumbnailslider-Navigation eingebaut, die wenn ich auf das jeweilige Thumbnailbild klicke, das jeweilige große Bild im Carousel herholt so wie hier http://www.bootply.com/79859 Hab das data-slide-number und carousel-selector auch mit einem Zähler hochgezählt, leider ordnet er mir sobald der Zähler bei 10 ist wieder das erste Bild (data-slide-number = 0) zu, warum ist das so, warum erkennt mir der Zähler die Zahlen 10, 11, 12 usw. bzw. zweistellige Zahlen nicht? Wäre echt super wenn du mir helfen könntest, würd dir auch den Code per Email schicken...! Falls es zu aufwendig ist, auch gerne gegen Bezahlung wenn du mir sagst wieviel! Wäre echt super, häng da jetzt schon ewig dran und niemand kann mir helfen! Danke schonmal. Lg

Hallo Alexander hab mir auch das Bootstrap Carousel in Typoscript zusammengebaut, da hat mir dein Artikel sehr geholfen, danke erstmal dafür. Jetzt hätte ich eine Frage, hab mir nämlich auch zusätzlich eine kleine Thumbnailslider-Navigation eingebaut, die wenn ich auf das jeweilige Thumbnailbild klicke, das jeweilige große Bild im Carousel herholt so wie hier http://www.bootply.com/79859 Hab das data-slide-number und carousel-selector auch mit einem Zähler hochgezählt, leider ordnet er mir sobald der Zähler bei 10 ist wieder das erste Bild (data-slide-number = 0) zu, warum ist das so, warum erkennt mir der Zähler die Zahlen 10, 11, 12 usw. bzw. zweistellige Zahlen nicht? Wäre echt super wenn du mir helfen könntest, würd dir auch den Code per Email schicken...! Falls es zu aufwendig ist, auch gerne gegen Bezahlung wenn du mir sagst wieviel! Wäre echt super, häng da jetzt schon ewig dran und niemand kann mir helfen! Danke schonmal. Lg

Bild des Benutzers alexander

Hallo Bettina,

bitte schick uns mal den Code an service@ambranet.de

Ich will sowieso demnächst eine neue Version bauen 

Viele Grüße,

Alexander

Neuen Kommentar schreiben