3.5.5.1. Inclure jQuery OwlCarousel dans les Views de Drupal

Dans l'article précédent, nous avons créé un diaporama en utilisant Views Slideshow. Mais nous avons toujours un pagineur non stylisé avec de petites images.

Dans cet article, nous allons voir comment ajouter OwlCarousel et ajouter du CSS via une bibliothèque supplémentaire.

Dans cet article, nous utilisons un module personnalisé pour connecter OwlCarousel, mais la prochaine fois nous styliserons le diaporama dans les fichiers du thème.

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

Vous pouvez lire comment créer un diaporama dans un article précédent :

3.5.5. Views slideshow - Affichage de diaporamas et carrousels jQuery via Views.

À la suite de l'ajout d'un module personnalisé, nous obtenons le diaporama suivant :

Tout d'abord, il faut créer le dossier de notre module dans le dossier de tous les modules :

/modules/custom

Ensuite, créez un fichier d'information du module :

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

Pour Drupal 8.8 et versions inférieures :

name: Drupalbook OwlCarousel
description: Ajoute des styles au pagineur Views
type: module
core: 8.x
package: Drupalbook

Pour Drupal 8.8 et versions supérieures :

name: Drupalbook OwlCarousel
description: Ajoute des styles au pagineur Views
type: module
core_version_requirement: ^8 || ^9
package: Drupalbook

Nous parlerons plus tard du développement de modules sur Drupal ; pour l'instant, analysons simplement comment ajouter une bibliothèque à un module personnalisé.

name – un nom arbitraire pour notre module

description – une description arbitraire de notre module

type – ici nous indiquons le type : module ou thème selon ce que nous créons

core – indique pour quelle version de Drupal ce module est destiné

package – groupe les modules fonctionnels

Maintenant, nous pouvons activer notre module. Mais d'abord, ajoutons la bibliothèque OwlCarousel, site du plugin jQuery OwlCarousel :

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

J'ai placé la bibliothèque OwlCarousel ici :

\modules\custom\drupalbook_owlcarousel\js\owlcarousel

J'ai également ajouté un fichier JavaScript personnalisé dans lequel nous initialiserons la bibliothèque 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 se connecte à une balise générale qui englobe nos images individuelles. J'ai aussi ajouté la classe owl-carousel pour ce div général, ce qui est nécessaire pour appliquer les styles standards d'OwlCarousel. Notez aussi que dans le tableau additionnel d'options responsive, nous pouvons spécifier un nombre différent d'éléments par diapositive selon la résolution d'écran : de 0 à 600 pixels, 3 éléments ; de 600 à 1000 pixels, 4 éléments ; à partir de 1000 pixels, 5 éléments. Les tailles d'images seront automatiquement ajustées par le plugin OwlCarousel lui-même.

J'ai également inclus un fichier CSS additionnel, dans lequel nous écrirons les styles pour le diaporama :

\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;
  text-decoration: none;
  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;
  text-decoration: none;
  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;
  text-decoration: none;
  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;
  text-decoration: none;
  border: 0;
}

Et maintenant, nous devons tout connecter comme une bibliothèque Drupal :

Création de bibliothèques pour Drupal :

https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-module

Pour cela, j'ai créé un fichier 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

Dans dependencies, il faut spécifier jQuery, au cas où cette bibliothèque est la seule à en avoir besoin. Nous devons aussi inclure les bibliothèques CSS/JS OwlCarousel : owl.carousel.css, owl.theme.default.min.css, owl.carousel.min.js.

Nous connectons notre CSS/JS drupalbook_owlcarousel.css, drupalbook_owlcarousel.js après les fichiers OwlCarousel pour pouvoir utiliser la bibliothèque en JavaScript et redéfinir les styles CSS si besoin.

Maintenant, pour que notre bibliothèque se connecte, il faut activer le module drupalbook_owlcarousel. Et aussi ajouter un autre fichier pour la connexion de la bibliothèque :

modules\custom\drupalbook_owlcarousel\drupalbook_owlcarousel.module

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

Nous spécifions le nom de la vue dans la condition if, et dans le nom de la bibliothèque, nous indiquons d'abord le nom du module où la bibliothèque drupalbook_owlcarousel est située, puis, séparé par un slash, le nom de la bibliothèque depuis le fichier drupalbook_owlcarousel.libraries.yml. Pour la commodité, j'ai donné à la bibliothèque le même nom que notre module, mais un module peut contenir plusieurs bibliothèques et leur nom ne coïncide pas toujours avec le nom du module.

Maintenant, il faut vider le cache et nos styles et JavaScript devraient s'appliquer. Peut-être que vous avez des noms différents pour les sélecteurs et vous devrez modifier les fichiers CSS / JS. Si quelque chose ne fonctionne pas, écrivez dans les commentaires, nous réglerons cela.