Quantcast
Channel: ambranet GmbH - Bootstrap
Viewing all articles
Browse latest Browse all 6

Bootstrap-Karussell für Bilder in TYPO3-Contentelementen

0
0
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 Bilderlib.slider.10 = FILESlib.slider.10.references {
  table =tt_content
  #####UID der Bilder
  uid.data=field:uid
  fieldName = image} 
##### 2. Ausgabeiteration der Buttons steuernlib.slider.10.renderObj =TEXTlib.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.10lib.slider.10.stdWrap.wrap3 =<ol class="carousel-indicators">|</ol>lib.slider.20 <lib.slider.10lib.slider.20.renderObj =COA
##### 4 Das Bild wird geladenlib.slider.20.renderObj.10 =IMAGElib.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 =TEXTlib.slider.20.renderObj.20 {stdWrap.data =file:current:descriptionstdWrap.removeBadHTML =1stdWrap.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.20lib.slider.20.stdWrap.wrap3 =<div class="carousel-inner">|</div> 
##### 5. Container um des gesamte Elementlib.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 =CASEtt_content.image.20  {
    key.field = section_frame100<lib.slider
    default <lib.imagerendering}# Stellt bei "Text mit Bild"  die Textausgabe wieder her. tt_content.textpic.20  =<lib.imagerendering

Viewing all articles
Browse latest Browse all 6

Latest Images

Trending Articles





Latest Images