menu websitewerker kassel

11/12/2019
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:

Dann noch ein wenig HTML:

Den Quellcode kannst du dir auch hier als Textdokument herunterladen.


Du willst diese Seite unterstützen?

Wenn dir dieser Beitrag geholfen hat, würde ich mich über ein kleines Dankeschön freuen.



Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Vielen Dank an Wordpress für diese hammermäßige Software!

Cookies (~ Keks oder Plätzchen / Datenpaket) erleichtern die Bereitstellung der Inhalte dieser Website. - Sie helfen auch dabei die Seite funktionaler und schöner zu machen. Mit der weiteren Nutzung dieser Website erklärst Du Dich damit einverstanden, dass die Seite einige wenige Cookies verwendet. Datenschutzerklärung | Fenster schließen