Bootstrap-Carousel mit dynamischem Inhalt

Wenn der Inhalt eines Bootstrap Carousel's oft ändert, Bilder hinzugefügt und wieder entfernt werden sollen, kann es recht schnell mühsam werden, jedesmal den Quellcode der Webseite entsprechend zu bearbeiten. Es ist nicht allzu schwer, sich da Abhilfe zu schaffen.

 

Der Code eines Carousels sieht üblicherweise etwa wie folgt aus, in diesem Beispiel wurden einige lokal gespeicherte Bilder und ein paar Youtube-Videos in das Carousel gefüllt:

Diese statisch definierten Elemente können einfach mit einem PHP-Skript ersetzt werden, welches einen beliebigen Ordner nach bestimmten Bilddateien durchsucht, und diese dann automatisch in dieses Carousel lädt. Für die Videos wird je eine Textdatei in denselben Ordnet gelegt. Diese haben keinen Inhalt, aber der Dateiname entspricht der Video-ID (https://www.youtube.com/watch?v=mQVejhbtHJw), plus natürlich der Endung .txt.

 

Das folgende Skript öffnet den angegeben Ordner, schaut sich alle Dateien and und falls sie einem der gewünschten Dateitypen entsprechen, werden sie in eine Liste gefüllt. Anhand dieser Liste werden dann HTML-Codefragmente zusammengebaut, welche sich je nachdem ob es sich um ein Video oder Bild handelt unterscheiden. Diese Codestücke entsprechen schliesslich exakt der obigen Struktur, und somit ist das Resultat exakt dasselbe, aber mit dem Vorteil, dass nun nach Belieben weitere Bilder in den entsprechenden Ordner eingefügt werden können und diese dann automatisch ins Carousel eingefügt werden.