11.12.2019 | TYPO3, TYPO3 Schnipsel
Typo3 8.x – Carousel aus Ressourcen einer Seite mit Bootstrap-4.3.1

Gerade hatte ich überlegt, wie ich ohne eine weitere Mini Extension ein Carousel mit Bootstrap auf einfach Art und Weise realisieren kann. Hierfür bieten sich die Seitenressourcen in Typo3 an. An dieser Stelle können Fotos hinterlegt werden und mit dem entsprechenden Typoscript dann als Carousel ausgegeben werden. Unter den Fotos selbst soll der jeweilige Titel des Bildes zu sehen sein. Um das zu erreichen habe ich zwei Platzhalter carouselInit und carousel, die die Ressourcen abfragen und ausgeben. carouselInit dient hierbei nur einem einzigen Bild mit der Klasse „active“, wie weiter unten im HTML Schnipsel zu sehen ist. Eine elegantere Variante habe ich auf die Schnelle nicht gefunden. Es tut dem ganzen jedoch auch keinen Abbruch. Wer sich fragt, warum ich die Ausgabe nicht bei 0 sondern 1 starte – ganz einfach. 0 ist bei mir bereits die Resources für das Header Bild der Seite selbst. Kommt soetwas nicht zum Einsatz kann die Reihenfolge der Abfrage und die Ausgabe entsprechend angepasst werden. Neben dem Bild und dem Titel soll das Foto auch „verlinkbar“ über die Eigenschaft der Datei sein.

Zunächst der Typoscript Schnipsel:

carouselInit = FILES
carouselInit {
	references {
		table = pages
		uid.data = tsfe:id
		fieldName = media
	}

	begin = 1
	maxItems = 1

	renderObj = IMAGE
	renderObj {
		file.import.dataWrap = {file:current:storage}:{file:current:identifier}
		altText.data = file:current:title
		titleText.data = file:current:title
		params = class="d-block w-100" 
		linkWrap = <a href="http://{file:current:link}">|</a> <small>{file:current:title}</small>
		linkWrap.insertData = 1
	}         
	// stdWrap.wrap = <div>|</div>
}            


carousel = FILES
carousel {
	references {
		table = pages
		uid.data = tsfe:id
		fieldName = media
	}

	begin = 2
	// maxItems = N.N.

	renderObj = IMAGE
	renderObj {
		file.import.dataWrap = {file:current:storage}:{file:current:identifier}
		altText.data = file:current:title
		titleText.data = file:current:title
		params = class="d-block w-100" 
		linkWrap = <div class="carousel-item"><a href="http://{file:current:link}">|</a> <small>{file:current:title}</small></div>
		linkWrap.insertData = 1
	}
	// stdWrap.wrap = <div>|</div>
}

Dann noch ein wenig HTML:

<!-- CAROUSEL -->

	<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

			<div class="carousel-inner">
				<div class="carousel-item active">
					<f:format.raw>{carouselInit}</f:format.raw>
				</div>

				<f:format.raw>{carousel}</f:format.raw>

			</div> <!-- ./carousel-inner -->

		  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		  </a>
		  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		  </a>

	 </div>  <!-- ./carousel --> 
 
 <!-- ./ CAROUSEL -->

Den Quellcode kannst du dir auch hier als Textdokument herunterladen.