6.9 Thématisation de Views Drupal. Créer un diaporama Owl Carousel avec miniatures.

Très souvent, le template Views ne nous convient pas, donc nous pouvons surcharger les templates pour Views. Malheureusement, il n’existe pas d’interface pour rechercher facilement le template voulu dans Views, mais on peut utiliser des motifs (patterns) pour redéfinir les templates.

Plus d’informations sur les patterns dans cet article :

6.6. Travailler avec les templates dans Drupal. Qu’est-ce que les templates dans le cœur de Drupal.

En particulier, nous nous intéressons à ceci :

Voici les noms possibles de templates à surcharger.

Nom de la vue – foobar (nom machine)
Format d’affichage – unformatted (liste non formatée, ajouter les options possibles)
Style d’affichage – fields
Nom de l’affichage – page

Exemples de noms de templates :

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

Le plugin Owl Carousel 1.x ne supporte pas l’affichage des miniatures pour la galerie. Nous utiliserons donc Owl Carousel version 2.x, qui supporte les miniatures. Si vous ne souhaitez pas gérer la surcharge des templates, écrire du CSS et du Javascript, vous pouvez simplement installer le module Views Slideshow :

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

Ou le module Flex Slider :

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

Vous pouvez configurer rapidement des diaporamas avec ces modules sans connaissance CSS ni jQuery.

Nous allons pratiquer la surcharge des templates Views et la connexion des bibliothèques jQuery.

Pour commencer, téléchargez et incluez la bibliothèque Owl Carousel 2.x :

https://github.com/OwlCarousel2/OwlCarousel2

Peut-être avez-vous trouvé Owl Carousel 1.x :

https://github.com/OwlFonk/OwlCarousel

Cette version ne nous convient pas, elle ne supporte pas les miniatures, il faudrait écrire du code additionnel.

Copiez le dossier owl-carousel (contenant le fichier owl.carousel.min.js) dans le dossier de votre thème, puis incluez les fichiers CSS et JS du carousel. Ajoutez les lignes suivantes dans le fichier *.libraries.yml du thème :

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

Je n’ai pas déplacé les fichiers JS dans le dossier /js ni les CSS dans /css, mais vous pouvez le faire. N’oubliez pas alors de corriger les chemins des images dans les fichiers CSS, en supposant que vous les ayez mis dans un dossier images.

Pour appliquer les modifications, il faut vider le cache.

Créez maintenant un type de contenu « galerie » et ajoutez-lui un champ image.

Créez une nouvelle vue affichant un champ image unique issu de ce type de contenu.