Schein’s Bootstrap Carousel

 von Tiare Feuchtner Wie ihr vielleicht bemerkt habt, haben wir Anfang dieses Jahres die Schein Website überarbeitet. Das große Ziel war es, die klobige Homepage mit den vielen Seiten und unnötig viel Inhalt, mit einer schnittigen, einseitigen Produktseite zu ersetzen. Um ein möglich sauberes und flexibles Design zu erreichen, beschloss ich mir ein eigenes WordPress-Template zu basteln, in dem ich den Entwurf unseres Grafikers nachbauen konnte. Ich verwendete dafür das…

von Tiare Feuchtner

Wie ihr vielleicht bemerkt habt, haben wir Anfang dieses Jahres die Schein Website überarbeitet. Das große Ziel war es, die klobige Homepage mit den vielen Seiten und unnötig viel Inhalt, mit einer schnittigen, einseitigen Produktseite zu ersetzen. Um ein möglich sauberes und flexibles Design zu erreichen, beschloss ich mir ein eigenes WordPress-Template zu basteln, in dem ich den Entwurf unseres Grafikers nachbauen konnte. Ich verwendete dafür das Twitter Bootstrap Framework, weil man damit sogenannte “responsive layouts“ machen kann, die sich sehr gut an verschiedene Bildschirmgrößen anpassen können. Es gefiel mir auch die Möglichkeit zu haben, mir meine eigenen Komponenten auszusuchen, wodurch man sein Framework sehr übersichtlich halten kann. So zur Theorie… in Wirklichkeit hab ich jede Menge Zeug mit rein gepackt, das im Moment gar nicht verwendet wird. Aber man weiß ja nie 😉

Da ich zum ersten Mal eine Website gebaut habe, hatte ich wirklich keine Ahnung wie ich überhaupt anfangen sollte. Bootstrap herunter zu laden ist ja nun wirklich einfach, aber was dann? Schlussendliche hat mir dieses Tutorial von Zac Gordon das Leben wesentlich erleichtert.

Die meiste Zeit habe ich wohl mit dem Bilder-Karussell verbracht, denn ich hatte natürlich Sonderwünsche und konnte online nicht so richtig finden was ich suchte. Die Carousel Komponente ist praktischerweise bereits in Bootstrap mit dabei und mit diesem Beispielcode bekommt man es auch recht schnell zum Laufen.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="active item">
            <img src=".../image1.jpg" alt="...">
            <div class="carousel-caption">First image</div>
        </div>
        <div class="item">
            <img src=".../image2.jpg" alt="...">
            <div class="carousel-caption">Second image</div>
        </div>
        <div class="item">
            <img src=".../image3.jpg" alt="...">
            <div class="carousel-caption">Third image</div>
        </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

Bootstrap carousel

Das ist auch schon perfekt, wenn man nur wenige Bilder im Karussell haben möchte. Wir aber brauchten etwas dynamischeres, bei dem eine variierende Anzahl von Bildern hinzugefügt und ausgetauscht werden können, ohne dafür dutzende Codezeilen anpassen zu müssen. Ich suchte also einen Weg um dynamisch den Inhalt eines Ordners in das Karussell zu laden. (In der Hoffnung, dass es irgendwem hilfreich sein möge, gehe ich hier etwas ins Detail.) Ich verwende nun das php Kommando file_get_contents($dir), um eine Liste aller Dateien in dem Ordner zu bekommen.
Damit das funktioniert, muss der Ordner indiziert und der Lese-Zugriff darauf erlaubt sein. Philipp hat für mich am Server die notwendigen Einstellungen vorgenommen.

<?php $dir = get_template_directory_uri() . "/images/carousel/"; #directory containing the pictures
$content = file_get_contents($dir);
$n=0;
preg_match_all("/(a href=")([^?"]*)(")/i", $content, $files);
$images_all = $files[2];
$images = array_slice($images_all,1,count($images_all)-1); #list of filenames
?>
<div id="myCar" class="carousel slide carousel-border" data-wrap=true>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <?php for ($x=0; $x<count($images); $x++) {
            $name = $images[$x];?>
            <div id="<?php echo $x?>" class="item <?php if($x==0) echo 'active' ?>">
                <?php if (preg_match('/(.jpg|.gif|.png)/', $name, $matches)) { $path = $dir . $name; ?>
                    <img src="<?php echo $path ?>" alt="<?php echo $name ?>" />
                <?php }?>
                <div class="carousel-caption"></div>
            </div>
	<?php } ?>
    </div>
...
</div>

Eine weitere wichtige Änderung, die ich gemacht hab, ist die standard Indikatoren des Bootstrap Carousel mit Thumbnails der Bilder zu ersetzen. Dafür fülle ich die vorhandenen Indikatoren einfach mit kleineren Versionen der Bilder im Karussell. Dafür waren natürlich ein paar zusätzliche Zeilen CSS im Stylesheet notwendig, aber die sind zu hässlich um sie hier zu posten.

Schein carousel

Schließlich musste ich mich noch um die Scroll-Leiste kümmern, damit man durch die Thumbnails navigieren konnte. Ich verwende hauptsächlich Firefox und die integrierten Scroll-Leisten sehen einfach grauenhaft aus. Ich versuchte ihr Aussehen Stylesheet anzupassen, was für Internet Explorer und Chrome sogar klappte, aber auf Firefox leider keinen Effekt hatte. Auf der Suche nach einem passenden WordPress-Plugin verzweifelte ich fast, und verwendete schließlich jscrollpane, wofür man einfach die entsprechenden javascript Dateien und das Stylesheet einbinden muss. Nun kann man das Aussehen der Scroll-Leiste ganz einfach mittels CSS anpassen. Mit der ausführlichen Dokumentation auf der Seite, konnte ich das Scroll-Verhalten soweit anpassen, dass es nur dann scrollt, wenn notwendig und das aktive Thumbnail immer sichtbar ist.

Ich möchte zum Schluss dieses Blogeintrags noch betonen: Es ist sehr wichtig darauf zu achten, wann und wo man jquery einbindet. Was ich erst spät gelernt habe, ist dass man es auf jeden Fall nur ein Mal einbinden sollte, und das am Besten im header. Dann wird alles javascript wunderbar funktionieren.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Ein letzter Rat noch: Debuggen ist das aller Einfachste, und man sollte es gleich von Anfang an auch machen. Ich hatte Anfangs keine Ahnung davon und hab mit php Textausgaben oder mit javascript Alerts gebastelt. Dann hab ich Firefox Plugin Firebug ausprobiert, und nie wieder eine Textausgabe verwendet. Und inzwischen hat eigentlich jeder Browser einen recht brauchbaren eingebauten “page-inspector“, mit dem man nicht nur seinen eigenen Code debuggen kann, sondern sich auch ansehen kann wie andere Seiten gemacht sind. 😉 Das ist äußerst inspirierend, ich sag’s euch!

Dieser Blogeintrag ist nun leider etwas technischer ausgefallen als sonst, und ich entschuldige mich bei allen die ich damit gelangweilt hab. Aber ich hoffe euch damit mehr einen Einblick in unsere tatsächliche Arbeit zu geben, und vielleicht findet es jemand mit ähnlichen Problemen ja sogar hilfreich.