Bootstrap-Karussell für Bilder in TYPO3-Contentelementen

29.07.2014
Karussell

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: 
# 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
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.