Bootstrap-Karussell für Bilder in TYPO3-Contentelementen

Unser Bilderslider-Artikel enthält die Anleitung für einen Slider aus einem an einer Stelle hinterlegten Content-Element. Angeregt durch einen Kommentar von nicolai unter dem Artikel zeigt dieser Beitrag jetzt, wie Redakteure ein beliebiges Element vom Typ Bilder oder Text mit Bild zu einem Slider machen können. Vielen Dank für das Feedback zu unserem Artikel!
1. Der Slider wird definiert.
Im Gegensatz zum vorigen Slider liest dieser die Bilder aus dem bestehenden Content-Element aus. Durch die Ergänzung von {cObj:parentRecordNumber} bleiben die Ids innerhalb des HTML auch bei mehreren Sliderelementen auf einer Seite eindeutig. Bedingung hierfür ist, dass sie sich innerhalb derselben TYPO3-Spalte befinden. Sollten Sliderelemente für mehrere Spalten benötigt werden, sollte ein eigener Slider für jede Spalte definiert und über Section Frame angewählt werden (Code 1). Außerdem hat die in TYPO3 6.2 eingeführte Registervariable FILE_NUM_CURRENT die für TYPO3 6.1 noch verwendete Zählervariable ersetzt.
2. Der Auswahlliste im Feld Section Frame des Content-Elements wird eine neue Option Slider hinzugefügt.
Hierfür kommt ein Codeschnipsel in die Page-Tsconfig der root-Seite (Code 2).
3. Anpassen der Bildverarbeitung bei Content-Elementen (Code 3).
Das Imagerendering wird zum CASE-Objekt. Wenn im Feld Section Frame die Option "Slider" angewählt wird, werden die Bilder als Slider ausgelesen. Für alle anderen Fälle wird das Imagerendering in den Standardzustand zurückversetzt.
Nachtrag: Wir haben auf einen Kommentar hin die Ausgabe noch einmal angepasst. In dieser Konfiguration kann der Slider nur für die Elemente "Bilder" verwendet werden. Dafür bleiben Elemente vom Typ "Text mit Bild" intakt. Vielen Dank für das Feedback!
Foto: © gigi200043 - Fotolia.com
# Code 1 ################# lib.slider = COA ##### 1. Zugriff auf die Bilder lib.slider.10 = FILES lib.slider.10.references { table = tt_content #####UID der Bilder uid.data=field:uid fieldName = image } ##### 2. Ausgabeiteration der Buttons steuern lib.slider.10.renderObj = TEXT lib.slider.10.renderObj { value = {register:FILE_NUM_CURRENT} insertData = 1 dataWrap = <li data-target="#carousel-example-generic{cObj:parentRecordNumber}" data-slide-to="|" class="active"></li>|*|<li data-target="#carousel-example-generic{cObj:parentRecordNumber}" data-slide-to="|" class=""> </li>|*|<li data-target="#carousel-example-generic{cObj:parentRecordNumber}" data-slide-to="|" class=""></li> } ##### 3. Container um den gesamten lib.slider.10 lib.slider.10.stdWrap.wrap3 = <ol class="carousel-indicators">|</ol> lib.slider.20 < lib.slider.10 lib.slider.20.renderObj = COA ##### 4 Das Bild wird geladen lib.slider.20.renderObj.10 = IMAGE lib.slider.20.renderObj.10 { file.import.data = file:current:publicUrl ##### 4.1 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.2 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.3 Container um die Caption dataWrap = <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.dataWrap ( <div id="carousel-example-generic{cObj:parentRecordNumber}" class="carousel slide" data-ride="carousel"> | <a class="left carousel-control" href="#carousel-example-generic{cObj:parentRecordNumber}" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic{cObj:parentRecordNumber}" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> )
# Code 2 ##################### TCEFORM.tt_content.section_frame { addItems.100 = Slider }
# Code 3 ##################### # Das Standard-Imagerenderung wird in einer Variablen gespeichert. lib.imagerendering < tt_content.image.20 #Das Imagerendering wird zum CASE-Objekt. Wenn im Feld Section Frame die Option #Slider angewählt wird, werden die Bilder als Slider ausgelesen. Ansonsten wird #das Imagerendering in den Standardzustand zurückversetzt. tt_content.image.20 = CASE tt_content.image.20 { key.field = section_frame 100 < lib.slider default < lib.imagerendering } # Stellt bei "Text mit Bild" die Textausgabe wieder her. tt_content.textpic.20 =< lib.imagerendering