Eine 3D-Slideshow für deine Drupal 8 Webseite

Unser Ziel ist es einen mit Views einen Block zu kreieren der einen 3D-Effekt darstellt, damit wir per Views leicht einstellen können, auf welche Bilder sich der Effekt beziehen soll. Für den 3D-Effekt habe ich cloud9carousel ausgewählt, weil es dem Stil entspricht den ich benötige.

Im ersten Schritt erstelle ich eine View mit dem Namen carousel3d. Die Einstellungen können später angepasst werden. Im Moment ist es nur wichtig die Fields anzupassen. Ich entferne alle und füge 'Image' als einziges Feld hinzu. In den Feld-Settings wähle ich 'medium' als image-style, aber auch das ist optional und kann später beliebig verändert werden. Nun füge ich einen Block hinzu mit 'add block' und gebe ihm den machine-name 'block3d'.

So, damit bin ich fertig. Der Block kann überall auf der Webseite plaziert werden, wo ich eine 3D-Slideshow brauche. Nun verwende ich Features um die View carousel3d zu exportieren.

Jetzt erstelle ich ein custom module. Ich nenne es slideshow und es enthält die folgenden Dateien: slideshow.module, slideshow.libraries.yml, slideshow.info.yml und die beiden Ordner 'js' und 'config'. Der config-Ordner muss einen Ordner 'install' enthalten. Dort füge ich die mit Features exportierte views.view.carousel3d.yml ein. Wenn das Modul installiert wird scanned Drupal für diesen install-Ordner und installiert automatisch alle Komponenten die man dort hinterlegt.

Nun muss ich die js-Resourcen in den js-Ordner kopieren. Er enthält die jquery.cloud9carousel.js vom cloud9carousel und eine weitere, noch leere, Datei slideshow.js.

slideshow.libraries.yml muss die js-Dateien definieren, die in diesem Modul hinzugefügt wurden. (Zusätzlich habe ich die Datei reflection.js verwendet. weil dadurch Reflektionen zur slideshow hinzugefügt werden. Das ist komplett optional und wird erklärt auf cloud9carousel.)

slideshow:
  version: VERSION
  js:
    js/slideshow.js: {}
    js/jquery.cloud9carousel.js: {}
    js/reflection.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once
    - core/drupal

slideshow.module muss die definierten js-Bibliotheken nun zur Webseite hinzufügen. Dafür verwende ich den Hook page_attachments_alter. Der Pfad ist 'Modulename/Bibliothekname', Welche in diesem Fall identisch sind.

function slideshow_page_attachments_alter(array &$attachments){

            $attachments['#attached']['library'][] = 'slideshow/slideshow';

}

Ich habe die View erstellt, die js-Bibliotheken deklariert und zur Webseite hinzugefügt. Nun muss ich die beiden miteinander verbinden. Das passiert in der slideshow.js. Mit JQuery suche ich nach dem erstellten Block den Drupal kreiert sobald man auf der Seite einen Block mit einer 3D-Slideshow hinzufügt. Die ID vom Block beginnt mit block-views-block-VIEWNAME-BLOCKNAME. Dann füge ich noch einige cloud9carousel-Optionen hinzu, die ich brauche, inklusive der itemClass. Hier muss ich 'field-content>img' verwenden um alle Bilder zu verwenden, unabhängig von der Auflösung die später möglicherweise in der carousel3d-View eingestellt wird. (Das Schlüsselwort 'mirror' wird benötigt wenn man reflection.js verwenden möchte und ist optional.)

jQuery(document).ready(function ($) {
    var height = 150;
    var width = 600;
    var $block = $("[id^=block-views-block-carousel3d-block3d]");
    $block.css('visibility', 'hidden').Cloud9Carousel({
        autoPlay: 1,
        // bringToFront: true,
        itemClass: "field-content>img",
        farScale: 0.5,
        xRadius: width,
        yRadius: height,
        mirror: {
            gap: 12, /* 12 pixel gap between item and reflection */
            height: 0.2, /* 20% of item height */
            opacity: 0.4 /* 40% opacity at the top */
        },
        onLoaded: function () {
            // Show carousel
            $block.css('visibility', 'visible');
            $block.height(3 * height);
            $block.width(2 * width);
        }

    });
});

Fertig. Nach der Modulinstallation kann ich zu Block-Layout gehen und meinen Block carousel3d überall auf der Seite plazieren.

Programmierer
Janis Bullert

Neuen Kommentar schreiben