Slideshow mit Driven Listings Extension

Dieses Tutorial soll sich vor allem an Anfänger richten, weil eben doch der eine oder andere Anfänger am Anfang eventuell viele Fragen hat und wie ich zum Beispiel mit der Extension Slideshow, im Marketplace verfügbar, nicht so zufrieden ist.

Vor allem die Skalierung auf den mobilen Geräten hat mir bei der oben erwähnten Erweiterung definitiv missfallen. Wie dem auch sei lange Rede kurzer Sinn, falls jemand

Als erstes sollte man wie gewohnt die Slideshow Komponente in dem verwendeten Template aktivieren.

Wir bearbeiten dazu die template.php Datei im Ordner Views und erweitern die folgende Zeile um 'uikit-slideshow' wie im folgendem Beispiel gezeigt:

$view->script('theme', 'theme:js/theme.js', ['uikit-sticky',  'uikit-lightbox',  'uikit-parallax', 'uikit-datepicker', 'uikit-scrollspy', 'uikit-slideshow'])

Als erstes sollte man wie gewohnt die Slideshow Komponente in dem verwendeten Template aktivieren. Nachdem die Datei wieder auf dem Webserver sich befindet sollte man die Erweiterung driven Listings, sowie quasi die Standard Extension von Roman Namens: „Assets“ installieren. Die zweite Erweiterung ist quasi eh ein must have, wenn man optische Anpassungen machen möchte und dabei „Template Update Sicher" bleiben will.

Nun denn als erstes erstellen wir ein neues Asset mit einem aussagekräftigen Namen in meinen Fall: "slidenav-mod". Dieses CSS Asset sollte folgenden Code enthalten:

@media (max-width:768px) {
    .uk-slidenav-position .uk-slidenav-next {
        right: 5pt;
    }
    .uk-slidenav-position .uk-slidenav-previous {
        left: 5pt;
    }

    .uk-slidenav-next::before {
        content: "\f138";
        font-family: FontAwesome;
        font-size: 20pt;
    }

    .uk-slidenav-previous::before {
        content: "\f137";
        font-family: FontAwesome;
        font-size: 20pt;
    }
}
@media (min-width:1024px) {
    .uk-slidenav-position .uk-slidenav-next {
        right: 40pt;
    }
    .uk-slidenav-position .uk-slidenav-previous {
        left: 30pt;
    }

    .uk-slidenav-next::before {
        content: "\f138";
        font-family: FontAwesome;
        font-size: 40pt;
    }

    .uk-slidenav-previous::before {
        content: "\f137";
        font-family: FontAwesome;
        font-size: 40pt;
    }
}

Ein zweites Asset vom Typ: CSS mit folgendem Inhalt und ich habe es auf meiner Seite "slideshow-title" genannt:

.fade-in-animation {
    animation-delay: 0.5s;
    -webkit-animation-name:uk-fade;
    animation-name:uk-fade;
    -webkit-animation-duration:2s;
    animation-duration:2s;
    -webkit-animation-timing-function:ease-in !important;
    animation-timing-function:ease-in !important;
}
.fade-out-animation {
    animation-duration:8s;
    -webkit-animation-direction:reverse;
    animation-direction:reverse;
    -webkit-animation-timing-function:ease-out !important;
    animation-timing-function:ease-out !important;
}
@media (min-width:320px) and (max-width:640px) {
    .slideshow-title-panel {
        margin-bottom: 5pt;
        margin-right: 5pt;
    }
    .slideshow-title {
        color: #fff;
        font-size: 12pt;
        background: #ec483b;
        border: 2px solid white;
        padding-right: 5px;
        padding-left: 5px;
        text-align: center;
        line-height: 18pt;
    }
}
@media (min-width:665px) and (max-width:765px) {
    .slideshow-title-panel {
        margin-bottom: 10pt;
        margin-right: 10pt;
    }
    .slideshow-title {
        color: #fff;
        font-size: 20pt;
        background: #ec483b;
        border: 2px solid white;
        padding-right: 10px;
        padding-left: 10px;
        text-align: center;
        line-height: 26pt;
    }
}
@media (min-width:768px) and (max-width:1024px) {
    .slideshow-title-panel {
        margin-bottom: 10pt;
        margin-right: 10pt;
    }
    .slideshow-title {
        color: #fff;
        font-size: 20pt;
        background: #ec483b;
        border: 2px solid white;
        padding-right: 10px;
        padding-left: 10px;
        text-align: center;
        line-height: 26pt;
    }
}
@media (min-width:1024px) {
    .slideshow-title-panel {
        margin-bottom: 40pt;
        margin-right: 40pt;
    }
    .slideshow-title {
        color: #fff;
        font-size: 40pt;
        background: #ec483b;
        border: 2px solid white;
        padding-right: 10px;
        padding-left: 10px;
        text-align: center;
        line-height: 46pt;
        text-transform: uppercase;
    }
}

Damit wäre man mit dem „Styling“ schon mal fertig und nun braucht man nur noch ein „custom template“ in der Erweiterung Listings von driven. Dazu ruft ihr das Menü dieser Erweiterung auf und legt unter Templates, das ist der zweite Reiter ein neues Template an. Ich hab mein "custom template" passender Weise "Slideshow" genannt:

‹div class="uk-slidenav-position" data-uk-slideshow="{kenburns:'10s', autoplay:true, autoplayInterval:8000, duration:2000}"›
‹ul class="uk-slideshow" v-for="category in list.categories" data-uk-margin=""›
    ‹li v-for="item in category.items"›
        ‹img class="uk-width-1-1" width="1150" height="500" :src="$url(item.image)" :alt="item.title"/›
        ‹div class="slideshow-title-panel uk-overlay-panel uk-overlay-right uk-flex uk-flex-bottom uk-flex-right uk-text-right uk-animation-fade fade-in-animation"›
            ‹h2 class="slideshow-title uk-animation-reverse uk-text-right uk-animation-fade fade-out-animation"›{{ item.title }}‹/h2›
        ‹/div›
    ‹/li›
‹/ul›
‹a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous" style="color: rgba(236,72,59,0.9)"›‹/a›
‹a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next" style="color: rgba(236,72,59,0.9)"›‹/a›
‹/div›

Sobald dies ebenfalls erledigt ist kann man nun die „Slideshow“ angelegen. Dazu einfach unter Lists eine neue Liste angelegt mit den Namen „Slideshow“, Kategorie habe ich ebenfalls Slideshow benannt und das Template ebenfalls „Slideshow“ ausgewählt, das hatten wir im Schritt zuvor angelegt.

Die Kategorie Slideshow wie man sieht hat vier Einträge, es sind einfach vier ausgewählte Bilder mit einem Titel versehen.

Nun kann man überall mit dem Plugin Code auf einer gewünschten Stelle. Eine Seite oder ein Widget die Slideshow aktivieren:

(listings){"id":"1"}

Ich hoffe dieses Tutorial ist dem einen oder anderen Pagekit Anfänger nützlich und wünsche damit viel Spaß. Denkt natürlich dran dir Breite und Höhen Werte, sowie die Farben ebenfalls auf eure Bedürfnisse anzupassen, damit die Slideshow auch schick mit dem Template was ihr benutzt ausschaut.