3.5.5.1. Includere jQuery OwlCarousel in Drupal Views

Nell’articolo precedente abbiamo creato una presentazione (slideshow) utilizzando Views Slideshow. Tuttavia, abbiamo ancora un paginatore non stilizzato con immagini di piccole dimensioni.

In questo articolo vedremo come aggiungere OwlCarousel e applicare gli stili CSS tramite una libreria aggiuntiva.

In questo esempio useremo un modulo personalizzato per collegare OwlCarousel, ma nella prossima lezione vedremo come stilizzare la presentazione direttamente nei file del tema.

https://drupalbook.org/sites/default/files/inline-images/drupalbook_owlcarousel.zip

Puoi leggere come creare una presentazione nell’articolo precedente:

3.5.5. Views Slideshow - Visualizzare slideshow e caroselli jQuery tramite Views.

Dopo aver aggiunto il modulo personalizzato, otterremo il seguente slideshow:

Creazione del modulo personalizzato

Per prima cosa, creiamo la cartella del nostro modulo all’interno della cartella dei moduli personalizzati:

/modules/custom

Poi creiamo il file con le informazioni del modulo:

/modules/custom/drupalbook_owlcarousel/drupalbook_owlcarousel.info.yml

Per Drupal 8.8 e versioni precedenti:

name: Drupalbook OwlCarousel
description: Adds styles to Views pager
type: module
core: 8.x
package: Drupalbook

Per Drupal 8.8+:

name: Drupalbook OwlCarousel
description: Adds styles to Views pager
type: module
core_version_requirement: ^8 || ^9
package: Drupalbook

Parleremo più avanti dello sviluppo dei moduli Drupal; per ora analizziamo come aggiungere una libreria a un modulo personalizzato.

• name – Nome del nostro modulo
• description – Descrizione del modulo
• type – Indica se è un modulo o un tema
• core – Specifica per quale versione del core è compatibile
• package – Raggruppa i moduli per funzionalità

Aggiungere la libreria OwlCarousel

Ora possiamo abilitare il nostro modulo. Ma prima aggiungiamo la libreria OwlCarousel, che si trova nel sito ufficiale:

https://owlcarousel2.github.io/OwlCarousel2/

Posizioniamo la libreria in:

/modules/custom/drupalbook_owlcarousel/js/owlcarousel

Aggiungiamo anche un file JavaScript personalizzato per inizializzare la libreria OwlCarousel:

/modules/custom/drupalbook_owlcarousel/js/drupalbook_owlcarousel.js

(function ($) {
  Drupal.behaviors.drupalBookOwlCarousel = {
    attach: function (context, settings) {
      $('.view-slideshow #widget_pager_bottom_slideshow-block_1').owlCarousel({
        items: 5,
        margin: 5,
        nav: true,
        responsiveClass: true,
        responsive: {
          0: {
            items: 3
          },
          600: {
            items: 4
          },
          1000: {
            items: 5
          }
        }
      });
      $('.view-slideshow #widget_pager_bottom_slideshow-block_1').addClass('owl-carousel');
    }
  };
})(jQuery);

OwlCarousel si collega a un contenitore che racchiude tutte le immagini individuali. Abbiamo aggiunto anche la classe owl-carousel al div principale, necessaria per applicare gli stili di default della libreria. Inoltre, grazie alle opzioni responsive, possiamo definire un numero diverso di elementi per ciascuna risoluzione (ad esempio 3 elementi fino a 600px, 4 fino a 1000px e 5 oltre i 1000px). Le dimensioni delle immagini verranno ridimensionate automaticamente da OwlCarousel.

Aggiungere il file CSS personalizzato

Creiamo anche un file CSS in cui scriveremo gli stili per lo slideshow:

/modules/custom/drupalbook_owlcarousel/css/drupalbook_owlcarousel.css

.view-slideshow #widget_pager_bottom_slideshow-block_1 {
  max-width: 480px;
  position: relative;
}

.view-slideshow #widget_pager_bottom_slideshow-block_1 .owl-prev {
  position: absolute;
  left: 5px;
  top: 30px;
  opacity: 0.7;
  background: url(../images/little-left.png) center center no-repeat;
  width: 32px;
  padding-top: 32px;
  height: 0;
  overflow: hidden;
  display: block;
  border: 0;
}

.view-slideshow #widget_pager_bottom_slideshow-block_1 .owl-prev:hover {
  opacity: 1;
}

.view-slideshow #widget_pager_bottom_slideshow-block_1 .owl-next {
  position: absolute;
  right: 5px;
  top: 30px;
  opacity: 0.7;
  background: url(../images/little-right.png) center center no-repeat;
  width: 32px;
  padding-top: 32px;
  height: 0;
  overflow: hidden;
  display: block;
  border: 0;
}

.view-slideshow #widget_pager_bottom_slideshow-block_1 .owl-next:hover {
  opacity: 1;
}

.view-slideshow .views-slideshow-controls-bottom {
  max-width: 480px;
}

.views_slideshow_pager_field_item.active img {
  border: 1px solid #0000ff;
}

.views_slideshow_controls_text_pause {
  display: none;
}

.view-slideshow .view-content {
  position: relative;
  max-width: 480px;
}

#views_slideshow_controls_text_previous_slideshow-block_1 {
  position: absolute;
  top: 155px;
  left: 10px;
  z-index: 99;
}

#views_slideshow_controls_text_previous_slideshow-block_1 a {
  background: url(../images/left.png) center center no-repeat;
  width: 42px;
  padding-top: 42px;
  height: 0;
  overflow: hidden;
  display: block;
  border: 0;
}

#views_slideshow_controls_text_next_slideshow-block_1 {
  position: absolute;
  top: 155px;
  right: 10px;
  z-index: 99;
}

#views_slideshow_controls_text_next_slideshow-block_1 a {
  background: url(../images/right.png) center center no-repeat;
  width: 42px;
  padding-top: 42px;
  height: 0;
  overflow: hidden;
  display: block;
  border: 0;
}

Creare la libreria Drupal

Ora dobbiamo collegare tutto questo come una libreria Drupal. Creiamo il file drupalbook_owlcarousel.libraries.yml:

/modules/custom/drupalbook_owlcarousel/drupalbook_owlcarousel.libraries.yml

drupalbook_owlcarousel:
  css:
    theme:
      js/owlcarousel/assets/owl.carousel.css: {}
      js/owlcarousel/assets/owl.theme.default.min.css: {}
      css/drupalbook_owlcarousel.css: {}
  js:
    js/owlcarousel/owl.carousel.min.js: {}
    js/drupalbook_owlcarousel.js: {}
  dependencies:
    - core/jquery

Nel blocco dependencies specifichiamo jQuery poiché la libreria OwlCarousel ne fa uso. Includiamo anche i file CSS/JS della libreria (owl.carousel.css, owl.theme.default.min.css, owl.carousel.min.js) e i nostri file personalizzati (drupalbook_owlcarousel.css e drupalbook_owlcarousel.js), così da poter sovrascrivere gli stili se necessario.

Includere la libreria nella View

Per collegare la nostra libreria alla View, creiamo il file drupalbook_owlcarousel.module:

/modules/custom/drupalbook_owlcarousel/drupalbook_owlcarousel.module

/**
 * Implements hook_preprocess_views_view().
 */
function drupalbook_owlcarousel_preprocess_views_view(&$variables) {
  if ($variables['view']->storage->id() == 'slideshow') {
    $variables['#attached']['library'][] = 'drupalbook_owlcarousel/drupalbook_owlcarousel';
  }
}

Nel codice sopra, specifichiamo l’ID della View (slideshow) e includiamo la libreria indicando prima il nome del modulo (drupalbook_owlcarousel) e poi il nome della libreria dal file drupalbook_owlcarousel.libraries.yml. Per comodità, abbiamo chiamato la libreria come il modulo, ma uno stesso modulo può contenere più librerie con nomi diversi.

Ora pulisci la cache di Drupal. I nuovi stili e script dovrebbero essere applicati. Se i tuoi selettori CSS o JS differiscono, potresti dover modificare i file di conseguenza. Se qualcosa non funziona, scrivilo nei commenti: analizzeremo insieme il problema.