RockSolid Themes

/ /

RockSolid Slider Dokumentation

Der RockSolid Slider ist eine Slider Extension für Contao, die als Free und Premium Variante verfügbar ist. Der Contao Slider erlaubt es Slides mit Bildern, Videos und Inhaltselementen zu verwalten und responsive in Ihre Website einbinden zu können. Alle Informationen zum Funktionsumfang finden Sie auf der Seite des Responsive Sliders für Contao.

Zuerst: RockSolid Slider installieren

Navigieren Sie im Contao-Backend zur Erweiterungsverwaltung und klicken Sie rechts oben auf Erweiterung installieren. Geben Sie dort rocksolid-slider in das Feld Erweiterung ein und klicken Sie auf weiter. Wählen Sie die aktuellste Version und folgen Sie dem Installations-Assistenten, bis die Erweiterung erfolgreich installiert wurde. Den Lizenzschlüssel für die Premium Erweiterung finden Sie in Ihrem Kundenbereich unter Downloads.

Dann: Slider anlegen

Navigieren Sie zu Inhalte › RockSolid Slider, klicken dort auf Neuer Slider und vergeben einen Namen. Falls Sie einen Slider erstellen möchten, der nur aus Bildern besteht, verwenden Sie den Typ Bild-Slider und wählen die gewünschten Bilder direkt in den Slider-Einstellungen aus. Wie Sie einen Slider aus einer Kombination von Inhaltselementen, Bildern und Videos anlegen, erfahren Sie im nächsten Punkt.

Slides anlegen und Inhalte einfügen

Ein Slide ist ein einzelnes Element des Sliders der ein Bild, ein Video oder mehrere Inhaltselemente enthalten kann. Um einen Slide anzulegen bearbeiten Sie den soeben angelegten Slider, klicken dort auf Neuen Slide, vergeben einen Titel, wählen den gewüschten Typ aus und aktivieren den Punkt Slide veröffentlichen.

Bild-Slide

Ein Bild-Slide wird erzeugt indem Sie ein Bild aus dem Dateimanager auswählen und speichern. Die Bildgröße wird später in den Moduleinstellungen festgelegt. Das hat den Vorteil, dass Sie Ihre Inhalte bei Bedarf jederzeit in verschiedenen Größen auf Ihrer Website anzeigen können.

Video-Slide

Um einen Video-Slide zu erstellen füllen Sie das Feld Video oder Video-URL aus und wählen ein Vorschaubild. Derzeit werden YouTube- und Vimeo-Videos unterstützt die im Format http://www.youtube.com/watch?v=XXXX bzw. http://vimeo.com/XXXX angegeben werden. Ersetzen Sie XXXX durch die ID Ihres Videos. Alternativ können Sie unter Video lokale Video-Dateien auswählen um ein HTML5-Video einzubinden, dafür sollten Sie das Video in den Formaten mp4 und webm zur Verfügung haben.

Slide aus Inhaltselementen

Wählen Sie als Typ Inhaltselemente und klicken auf Speichern und bearbeiten um einen Slide mit Inhaltselementen zu erstellen. Nun können Sie über den Punkt Neues Element beliebig viele Inhaltselemente in den Slide einfügen.

Modul einfügen und einstellen

Navigieren Sie zu Layout › Themes › Frontend-Module, klicken dort auf Neues Modul, stellen RockSolid Slider als Modultyp ein und wähen unter Slider den soeben angelegten Slider aus. Speichern Sie das Modul und fügen Sie es an der gewünschten Position in Ihre Website ein.

Der RockSolid Slider basiert auf jQuery, deshalb sollten Sie darauf achten, dass im jeweiligen Seitenlayout der Punkt jQuery laden aktiv ist.

Folgende Slider-Einstellungen können definiert werden:

Slider-Inhaltstyp

Allgemeine Konfiguration

Navigations-Einstellungen

Thumbnails-Einstellungen

Autoplay-Einstellungen

Karussell-Einstellungen (Premium-Erweiterung)

Sie können folgende Einstellungen in der Karussell-Modus Demo betrachten.

Template- und Experten-Einstellungen

Breite und Höhe einstellen

Um den Anforderungen von Responsive Webdesign gerecht zu werden bietet der RockSolid Slider eine Vielzahl von Einstellungsmöglichkeiten für die Größe an. Folgende Werte können in den Moduleinstellungen bei Breite und Höhe angegeben werden:

Geben Sie css ein um die Größe direkt aus dem CSS der Website zu verwenden. Diese Einstellung eignet sich am besten für responsive Websites, da sie es ermöglicht die Größe des Sliders in Media-Queries zu verändern. Im CSS der Website ist nicht mehr nötig als die Eigenschaften width und height zu setzen. Beispiel:

#mein-slider {
    width: 50%;
    height: 200px;
}
@media only screen and (max-width: 699px) {
    #mein-slider {
        width: 100%;
        height: auto;
    }
}
#mein-slider {
    width: 50%;
    height: 200px;
    @media only screen and (max-width: 699px) {
        width: 100%;
        height: auto;
    }
}

Wenn Sie auto eingeben wird die Größe des Sliders an die Inhalte der Slides angepasst. Dadurch verändert sich die Größe während man von einem Slide zum nächsten slidet. Diese Einstellung wird derzeit nur für die Höhe unterstützt und ist am besten für Text-Inhalte geeignet.

Der Wert normalize verhält sich ähnlich wie auto, mit der Außnahme dass die Höhe des größten Slides für alle übernommen wird. Somit passt sich die Höhe zwar automatisch an den Inhalt an, aber beim vor- und zurücknavigieren verändert sich die Höhe des Sliders nicht.

Sie können auch eine Proportion angeben um sicherzustellen dass die Slides immer im selben Seitenverhältnis angezeigt wird. Diese Einstellung eignet sich am Besten für einen Slider der nur aus Bildern mit den selben Proportionen besteht. Wenn Sie z.B. Bilder im vier-zu-drei-Format verwenden stellen Sie als Breite 100% und als Höhe die Proportion 4x3 ein.

Screenshot: Contao-Backend

Beispiel für eine proportionale Größeneinstellung

Außerdem kann auch eine beliebige CSS-Längen-Angabe als Breite oder Höhe eingestellt werden. Beispiele: 100%, 200px, 15em...

Optional: Eigenen Skin erstellen (für Fortgeschrittene)

Die Skins für den RockSolid Slider werden rein über CSS gesteuert. Jeder Slider erhält je nach ausgewähltem Skin die entsprechende CSS-Klasse die sich aus dem CSS-Prefix, skin- und dem Namen des Skins zusammensetzt. Die Klasse des Standard-Skins lautet rsts-skin-default.

Um einen eigenen Skin zu erstellen wählen Sie am besten aus den Standard-Skins default, light, dark und liquid einen aus der am besten zum Aussehen Ihres eigenen Skins passt. Kopieren Sie sich die CSS-Datei des ausgewählten Skins, zu finden unter /system/modules/rocksolid-slider/assets/css/SKINNAME-skin.css. Dort ersetzen Sie alle Skin-Klassen durch Ihre eigene. Wenn Ihr Skin z.B. fancy heißen soll, lautet die CSS-Klasse rsts-skin-fancy. Binden Sie nun Ihre Skin-CSS-Datei in Ihre Website ein, wählen in den Moduleinstellungen Ihren Skin aus und verändern Sie das CSS nach Ihren Wünschen.

HTML-Aufbau

Das HTML-Markup des Slider sieht vereinfacht dargestellt folgendermaßen aus:

<div class="rsts-main">
    <div class="rsts-header" style="">
        Header-Inhalt
    </div>
    <div class="rsts-view">
        <div class="rsts-crop">
            <div class="rsts-slides">
                <div class="rsts-slide">
                    <a class="rsts-video-play">play</a>
                    <a class="rsts-video-stop">stop</a>
                    <iframe class="rsts-video-iframe"></iframe>
                    <div class="rsts-caption">Titel</div>
                    Slide-Inhalt
                </div>
                ...
            </div>
        </div>
        <div class="rsts-progress"><div></div></div>
        <a href="" class="rsts-prev">prev</a>
        <a href="" class="rsts-next">next</a>
    </div>
    <div class="rsts-nav">
        <ul>
            <li><a href="" class="rsts-nav-prev">prev</a></li>
            <li><a>1</a></li>
            ...
            <li><a href="" class="rsts-nav-next">next</a></li>
        </ul>
    </div>
    <div class="rsts-footer">
        Footer-Inhalt
    </div>
</div>

CSS-Selektoren

Folgende Elemente können abhängig von verschiedenen Zeitpunkten und Ereignissen bzw. Einstellungen noch zusätzliche CSS-Klassen erhalten, die Sie nutzen können:

Das Slider-Hauptelement .rsts-main

Der Autoplay-Fortschrittsbalken .rsts-progress

Ein Slide-Element .rsts-slide

Die Navigation .rsts-nav

Ein Navigationslink .rsts-nav a

Gab es Unklarheiten oder haben Sie einen Fehler in diesem Artikel entdeckt? Geben Sie uns Bescheid und hinterlassen Sie Ihr Feedback.