6.9. Tematizzazione di Views in Drupal. Creare uno slideshow con miniature usando Owl Carousel.

Molto spesso il template predefinito di Views non è adatto alle nostre esigenze, quindi possiamo sovrascrivere i template di Views. Sfortunatamente, Views non fornisce un’interfaccia grafica per cercare il template desiderato, ma possiamo usare i pattern per ridefinire i template.

Puoi leggere di più sui pattern in questo articolo:

6.6. Lavorare con i template in Drupal. Cosa sono i template nel core di Drupal.

In particolare, ci interessa questa sezione:

Di seguito sono riportati i possibili nomi di template da sovrascrivere.

Nome della vista — foobar (nome macchina)
Formato di visualizzazione — unformatted (elenco non formattato, aggiungere eventuali varianti)
Stile di visualizzazione — fields
Nome della visualizzazione — page

views-view--foobar--page.html.twig
views-view--page.html.twig
views-view--foobar.html.twig
views-view.html.twig

views-view-unformatted--foobar--page.html.twig
views-view-unformatted--page.html.twig
views-view-unformatted--foobar.html.twig
views-view-unformatted.html.twig

views-view-fields--foobar--page.html.twig
views-view-fields--page.html.twig
views-view-fields--foobar.html.twig
views-view-fields.html.twig

Il plugin Owl Carousel 1.x non ha la possibilità di mostrare miniature nella galleria. Per questo motivo useremo Owl Carousel versione 2.x, che invece supporta le miniature. Se non vuoi approfondire la ridefinizione dei template o scrivere codice CSS e JavaScript, puoi semplicemente installare il modulo Views Slideshow:

https://www.drupal.org/project/views_slideshow

Oppure il modulo Flex Slider:

https://www.drupal.org/project/flexslider

Con questi moduli puoi configurare rapidamente slideshow senza dover conoscere CSS o jQuery.

Noi invece faremo pratica nel ridefinire i template di Views e nel collegare librerie jQuery manualmente.

Per iniziare, scarichiamo e includiamo la libreria Owl Carousel 2.x:

https://github.com/OwlCarousel2/OwlCarousel2

Forse troverai anche Owl Carousel 1.x:

https://github.com/OwlFonk/OwlCarousel

Questa versione però non ci serve, perché non supporta le miniature e richiede codice aggiuntivo per implementarle.

Copia la cartella owl-carousel (dove si trova il file owl.carousel.min.js) nella cartella del tuo tema, poi includi i file CSS e JS del carousel. Aggiungi le seguenti righe al file .libraries.yml del tema:

global-styling:
  version: 1.x
  css:
    theme:
      owl-carousel/owl.carousel.css: {}
      owl-carousel/owl.theme.css: {}    
      owl-carousel/owl.transitions.css: {}
      css/style.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
    owl-carousel/owl.carousel.min.js: {}
  dependencies:
    - core/jquery

Io non ho spostato i file js e css nelle rispettive cartelle del tema, ma puoi farlo. In tal caso, ricordati di aggiornare i percorsi delle immagini nei file CSS (presumibilmente nella cartella images).

Per applicare le modifiche, è necessario svuotare la cache.

Ora creiamo un tipo di contenuto “Galleria” e aggiungiamo un campo immagine.

Infine, creiamo una nuova View in cui visualizziamo il campo immagine del nuovo tipo di contenuto.