Bootstrap-Karussell für Bilder in TYPO3-Contentelementen

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.

Kommentare

Hallo,

sehr schönes Snippet, allerdings funktioniert unter TYPO3 6.2.x der Part tt_content.image.20 = CASE nicht mehr. Denn dann werden bei tt_content Elementen vom Typ Text with Images der Text nicht mehr dargestellt. Any Ideas?

Sehr schönes Snippet :)
Aber es wird in der aktuellen TYPO3 Version 6.2.x bei Inhaltselementen vom Typ "Text with Image" der Text nicht mehr ausgegeben. Dies liegt wohl daran, das im TypoScript tt_content.textpic.20 < tt_content.image.20 zugewiesen wird, so dass dieses ebenfalls ein CASE-Objekt wird. Allerdings führt ein anschliessendes tt_content.textpic.20 =< lib.imagerendering nicht zum Erfolg. Any ideas?

Bild des Benutzers alexander

Hallo Patrick,

vielen Dank für das Feedback und den Kommentar. Das hier ist eine Möglichkeit: Statt nur den Slider dem 101-case zuzuweisen, kann das Ganze auch ein COA werden

101= COA
101.10 < lib.slider
101.20 < tt_content.text.20

Jetzt steht der Text von "Text mit Bild" unter dem Slider.

Danke für das Feedback, aber das der Text noch zusätzlich unter dem Slider angezeigt wird, war nicht gemeint ;)

Ich habe unter einer aktuellen 6.2.4 Version das Problem, dass mit dem o.g. Snippet der Slider zwar wunderbar funktioniert (unter section_frame "Slider" ausgewählt), aber allen Inhaltselementen vom Typ "Text with Image" fehlt der Text.

Bild des Benutzers alexander

die Referenzierung:

tt_content.textpic.20  =< lib.imagerendering

funktioniert bei mir sowohl vor als auch nach der CASE-Deklaration. Ich kann dann normale "Text mit Bild"-Elemente wie gewohnt ausgeben.

Allerdings kann das Element, was zum Slider werden soll, dann nur vom Typ "Bilder" sein und nicht "Text mit Bild". 

Funktioniert das bei Dir nicht?

bei mir funktioniert das ganze leider nicht bei mehrsprechigkeit, es wird dann immer die default sprache genommen.

Schöne Idee und Anleitung!

Allerdings wäre es sinnvoll, noch unter

lib.slider.20.renderObj.10

das Layout des IMAGE Objekts zu definieren, indem man folgende Zeilen einfügt:

layoutKey = carousel
layout {
carousel {
element = <img src="###SRC###" ###PARAMS### ###ALTPARAMS### ###SELFCLOSINGTAGSLASH###>
source = |*|###SRC### ,|*|###SRC###
}
}

... dann klappt's auch mit dem responsive Layout. Denn der vorher im Haupttemplate eingestellte Wert samt den Layoutdefinitionen wird nicht mit übernommen, wir haben hier ein "nacktes" IMAGE Objekt. Und dann kann man auch das Layout gleich selbst anpassen. Gilt natürlich nur für die Carousel-Bilder.

Und wenn man die passenden Parameter über Konstanten "füttert", ist eine Anpassung an Bootstrap basierte Frameworks wie z.B. Flat-UI von designmodo sehr einfach durchzuführen.

Im Hinblick auf Code-Wiederverwertung ist dies ein Paradebeispiel, da ja nur eine Konfiguration stattfindet und kein echtes Coding. Das benutzte CE wird einfach angepasst - besseres Recycling gibt's nicht. Ok, wer z.B. die spezifischen CSS-Klassen unbedingt per Flexform o.ä. eintragen will, kann ja mal überlegen, DCE einzusetzen. Mehr ist wirklich nicht nötig.

Näheres ist hier zu finden: http://bit.ly/1ExR06z (T3 Ref Doku)

Bild des Benutzers alexander

Hallo Manfred,

vielen Dank für den Tip und sorry für die späte Antwort. Ich will demnächst eine neue Version bauen, in der ich diese Anleitung gerne (mit diesem Kommentar als Quellenanagabe) miteinbauen würde.

Viele Grüße

Alexander

 

 

Hallo,

ich setzte quer- und hochformatige Bilder ein und würde gerne z.B. die Höhe festlegen, da die hochformatigen Bilder sonst sehr hoch werden.
Setze ich im Reiter Erscheinungsbild einen Wert bei der Bildhöhe so wird dieser geflissentlich ignoriert :)
Hättest Du eine Idee was ich machen muss damit die Höhe angepasst wird?

Danke!

Emil

Bild des Benutzers alexander

Hallo Emil,

sorry für die späte Rückmeldung. Wenn ein Contentelement zum Slider werden soll, können die Bildinformationen auch um Breite und Höhe aus den Feldern erweitert werden. Die entsprechende Passage habe ich hier mal reinkopiert:

lib.slider.20.renderObj.10 {
    file.import.data = file:current:originalUid
##### 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
    file.width.field = imagewidth
    file.height.field = imageheight
  }

Viele Grüße

Alexander

Hi Alexander,
danke für den ausführlichen Code - nach genau so etwas habe ich gesucht. Allerdings habe ich eine Anforderung von einem Kunden, die so aussieht, dass zwei Bilder nebeneinander geslided werden sollen, etwa so:
Bild 0 - Bild 1
Bild 1 - Bild 2
Bild 2 - Bild 3
Bild 3 - Bild 0
Kannst Du sagen, wo ich ansetzen muss, um das kin zu bekommen?
Das wäre super!
Schöne Grüße & Danke schon mal:
Peter

Hallo, ein ähnliches Problem hatte ich auch,
die Bildgröße lässt sich mit folgenden Zeilen steuern:

lib.slider.20.renderObj.10.file.width.field = imagewidth
lib.slider.20.renderObj.10.file.height.field = imageheight

Also am besten direkt nach
###
lib.slider.20.renderObj.10 {
file.import.data = file:current:publicUrl
/* hierhin! */
###

VG, M

Hervorragende Anleitung! Hat mir gerade ne Stunde Arbeit erspart.

Danke!

Jan

Hallo,

vielen Dank für die super Anleitung und Code-Snippets. Das Einbinden hat wunderbar funktioniert.

Wie kann ich aber den Teil

##### 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
}

so ersetzen, dass ich die Bilder aus den Ressourcen einer beliebigen anderen Seite lesen kann?

Vielen Dank!

Bild des Benutzers alexander

Hallo!

Wenn Du aus einer beliebigen Seite die Ressources für den Slider auslesen möchtest, versuch bitte mal das hier:

lib.slidercontent.10 = FILES
lib.slidercontent.10.references {
table = pages
uid = UID der Seite
fieldName = media
}

Hallo,

bei mir klappt die Integration im Grunde, nur werden keine Bilder angezeigt und die Navigationspunkte nicht aktiv gesetzt.

Das liegt wohl daran, dass optionSplit übergangen wird. Es wird in beiden Fällen jeweils nicht der erste Wert benutzt, sondern der mittlere oder letzte verwendet. Daraus folgt, dass die Klasse "active" weder bei items noch bei den Punkten gesetzt wird.

Ich benutze Typo 3 v.7.6.4. Ist das ein Phänomen der 7er Version oder habe ich etwas falsch gemacht?

Vielen Dank schon mal für mögliche Lösungsvorschläge und Hinweise.

Würde mich auch interessieren. Ich hatte eben die alte Slider-Version am Wickel. Die ging gut. Doch leider ist die statische Angabe der uid keine Option für mich.
Wo es aber genau hakt, kann ich im Moment leider selbst nicht wirklich rausfinden. Bin noch zu frisch im TypoScript.

Vielen Dank für die Anleitung!
Ich suche noch nach der Lösung für Thumbnails anstelle von Indicators angezeigt werden.
Wie kann man es erweitern?
Vielen Dank!

Hallo,

dein Snippet hat mit Typo3 6.2 super funktioniert.
Leider funktioniert der Code mit Typo3 7.6 nicht mehr. Meine Vermutung liegt an "section_frame", da das bei 7.6 nicht mehr gibt.

Könntest du hier bitte bitte weiterhelfen? Wäre dir sehr dankbar.

Vielen Dank im Voraus.

Hallo,

versuche es mit einem CE des Type "Text & Media".
Dann musst du noch im Code den Wert von "fieldName=image" auf "fieldName=assets" ändern, siehe Codebeispiel unten.

lib.slider.10 = FILES
lib.slider.10.references {
table = tt_content
### UID from the "Content-Element" where the pictures are loaded from
uid = 2
#uid.data = field:uid
fieldName = assets
select.languageField = sys_language_uid
}

Den Teil mit #Code2 und #Code3 des Tutorials hier kannst du ganz weg lassen.

Hier mein Code, läuft bei mir unter v8.3.1 (Content Element Type = Text & Media)
###

lib.slider = COA

##### start variable
lib.slider.5 = LOAD_REGISTER
lib.slider.5.counter = 0

##### get the images
lib.slider.10 = FILES
lib.slider.10.references {
table = tt_content
### UID from the "Content-Element" where the pictures are loaded from
uid = 2
#uid.data = field:uid
fieldName = assets
select.languageField = sys_language_uid
}

##### english content
#[globalVar = GP:L=1]
#lib.slider.10.references {
# table = tt_content
# uid = 16
# fieldName = assets
#}
#[global]

###### frensh content
#[globalVar = GP:L=2]
#lib.slider.10.references {
# table = tt_content
# uid = 16
# fieldName = assets
#}
#[global]

##### buttons (slider navigation)
lib.slider.10.renderObj = COA
##### counter variable
lib.slider.10.renderObj.10 = LOAD_REGISTER
lib.slider.10.renderObj.10 {
### start variable -> counter variable
divCounter.data = register:counter
### start variable gets +1 for each run
counter.data = register:counter
counter.stdWrap.wrap = |+1
counter.prioriCalc = 1
}
##### output the counter variable as text, wrapped by a list-element
lib.slider.10.renderObj.15 = TEXT
lib.slider.10.renderObj.15.data = register:divCounter
lib.slider.10.renderObj.15.wrap = <li data-target="#cet3slider" data-slide-to="|" class="active"></li>|*|<li data-target="#cet3slider" data-slide-to="|" class=""></li>|*|<li data-target="#cet3slider" data-slide-to="|" class=""></li>
##### wrap the whole lib.slider.10 in a ordered-list
lib.slider.10.stdWrap.wrap3 = <ol class="carousel-indicators">|</ol>

##### image output as a copie of the "FILES-Object"
lib.slider.20 < lib.slider.10
lib.slider.20.renderObj = COA

##### load the image
lib.slider.20.renderObj.10 = IMAGE
lib.slider.20.renderObj.10 {
file.import.data = file:current:publicUrl
### "alt-text" and "titel" for the image
altText.data = file:current:alternative
altText.htmlSpecialChars = 1
titleText.data = file:current:title
titleText.htmlSpecialChars = 1
}

lib.slider.20.renderObj.15 >

##### the "Description" field will be the "Caption-text" with a link from the link-field
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
### wrap the Caption
wrap = <div class="carousel-caption active">|</div>|*|<div class="carousel-caption">|</div>|*|<div class="carousel-caption">|</div>
}
##### wrap the images and the captions (the first Element gets the "active" class)
lib.slider.20.renderObj.wrap = <div class="item active">|</div>|*|<div class="item">|</div>|*|<div class="item">|</div>

##### wrap the whole lib.slider.20
lib.slider.20.stdWrap.wrap3 = <div class="carousel-inner">|</div>

##### wrap the whole slider
lib.slider.stdWrap.wrap3 (
<div id="cet3slider" class="carousel slide" data-ride="carousel">
|
<a class="left carousel-control" href="#cet3slider" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#cet3slider" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
)

Neuen Kommentar schreiben