Un tutoriel complet sur le module ColorBox pour Drupal 9 (et comment l'étendre)
Publié: 2020-09-29Les images jouent un rôle important dans l'amélioration de l'expérience utilisateur d'un site Web. Une étude montre que 90 % des informations que nous transmettons à notre cerveau sont visuelles. De nombreux sites Web tournent autour de cette théorie et bombardent les utilisateurs de tonnes de médias riches comme des images et des fichiers vidéo. La plupart d'entre eux négligent l'aspect présentation de ces fichiers multimédias et se retrouvent avec une expérience utilisateur décevante. Ce dont ils ont besoin, c'est d'un outil comme ColorBox qui est un plugin jQuery extrêmement léger qui vous permet d'afficher des images de manière élégante et intuitive. Les styles et fonctionnalités sont hautement personnalisables via CSS et Javascript. Le module Drupal ColorBox est compatible avec Drupal 6, 7, 8, et maintenant Drupal 9 aussi ! Dans cet article, vous apprendrez comment configurer, implémenter et étendre davantage le module ColorBox pour Drupal 9.
ColorBox pour Drupal
Le module ColorBox s'intègre avec le plugin ColorBox jQuery dans Drupal. Le plugin est une lightbox personnalisable légère pour jQuery. Parmi les autres modules « box » concurrents utilisés à des fins similaires (Thickbox, Lightbox2, Shadowbox, Greybox, etc.), le module ColorBox est le plus populaire et a le plus grand nombre d'installations. L'utilisation de Drupal ColorBox ne se limite pas à l'affichage magnifique des images téléchargées. Il prend également en charge le style pour les vidéos similaires, les fichiers PDF, les nœuds, la taxonomie, les formulaires Web, le contenu iframe et plus encore. Le style peut être contrôlé via le CSS afin que l'apparence soit hautement personnalisable. La fonctionnalité est également facilement personnalisable via le fichier JS sans avoir besoin de toucher le HTML. Il prend également en charge le regroupement de photos et précharge les images à venir
Étapes pour installer le module ColorBox
1.Installez le module ColorBox avec composer.
composer require 'drupal/colorbox:^1.6'composer require 'drupal/colorbox:^1.6'
2. Téléchargez le plugin ColorBox 1.x.
1. Utilisation de la commande Drush
(Remarque : si vous utilisez la commande drush pour installer le plug-in ColorBox, vous devez activer le module, puis exécuter la commande ci-dessous)
drush colorbox-plugindrush colorbox-plugin
2. Téléchargez manuellement le plugin ColorBox
Téléchargez le plugin Colorbox et décompressez dans /libraries. Assurez-vous que le chemin d'accès au fichier du plugin ressemble à :
“/libraries/colorbox/jquery.colorbox-min.js”“/libraries/colorbox/jquery.colorbox-min.js”
3. Activez le module Drupal ColorBox.
drush en -y colorboxdrush en -y colorbox
Toutes nos félicitations! Vous êtes maintenant prêt à utiliser les fonctionnalités du module ColorBox.
Configuration du module ColorBox
Configurez le module Drupal ColorBox en accédant à Configuration -> Media -> Colorbox settings .
Comment créer une galerie d'images à l'aide de ColorBox
1. Pour créer une galerie d'images, nous devons d'abord ajouter un champ d'image pour l'un des types de contenu. Choisissez le nom de l'étiquette, puis cliquez sur le bouton Enregistrer et continuer.
2. L'étape suivante consiste à configurer les paramètres sur le terrain. Nous pouvons ajouter l'image par défaut lorsqu'il n'y a pas d'images téléchargées. Un texte alternatif à des fins d'accessibilité et un titre. Le nombre autorisé de paramètres de valeurs indique la limite de téléchargement maximale pour un champ. Sélectionnez l'option souhaitée, puis cliquez sur le bouton Enregistrer les paramètres du champ.
3. Ensuite, nous définirons les autres configurations pour les champs de cette image comme les extensions de fichiers autorisées, le répertoire de fichiers, la résolution d'image maximale et minimale, la taille de téléchargement maximale, l'alt et le titre de l'image, puis cliquez sur enregistrer les paramètres.
4. Maintenant, nous avons terminé la configuration du champ d'image. Définissons l'option de formatage pour le champ d'image créé pour ColorBox. Accédez à Gérer l'affichage du type de contenu, puis définissez l'option de format dans la liste déroulante comme ColorBox. Cliquer sur l'engrenage à côté de l'option de format nous permet de personnaliser l'image affichée. Une fois toutes les options mises à jour, cliquez sur le bouton de mise à jour, puis sur l'option d'enregistrement.
5. Ajoutons maintenant du contenu dans notre galerie d'images ColorBox en cliquant sur Ajouter du contenu. Nous pouvons modifier l'ordre des images téléchargées en fonction du poids des images. Et puis cliquez sur le bouton Enregistrer. L'affichage du contenu ressemblera à ci-dessous.
6. Enfin, cliquer sur l'une des images affiche l'image dans le modal ColorBox comme indiqué ci-dessous.
Vous pouvez également faire la même chose avec le champ vidéo intégré.
Comment s'intégrer avec le module en ligne ColorBox
Le module Colorbox Inline permet à l'utilisateur d'ouvrir le contenu qui se trouve déjà sur la page dans la ColorBox.
1. Installez le module en ligne colorbox
composer require 'drupal/colorbox_inline:^1.2'composer require 'drupal/colorbox_inline:^1.2'
2. Activer le module à l'aide de la commande drush/Activer manuellement via l'interface utilisateur Drupal
drush en -y colorbox_inlinedrush en -y colorbox_inline
3. Ouvrez l'image dans le modal ColorBox qui se trouve sur la page à l'aide d'un lien
4. Naviguez pour ajouter du contenu -> Tout type de contenu qui a un champ de corps
Changer le formateur de texte du html de base au html complet
6. Cliquez ensuite sur le bouton Enregistrer.
Ici, dans l'exemple ci-dessus, l'attribut data-colorbox-inline de la balise d'ancrage peut également contenir le nom de la classe au lieu de l'identifiant. voir l'image est un lien où il ouvre une image déjà existante dans une page (modifiez les modifications en fonction des exigences de votre projet). Nous pouvons utiliser ce module pour rendre n'importe quel contenu - vidéo, formulaire Web, etc., de la même manière.
En consultant cette page, vous pouvez voir un lien avec l'image. Et en cliquant sur le lien d'affichage de l'image, une fenêtre contextuelle ColorBox apparaîtra comme indiqué dans l'image ci-dessous.
Comment intégrer ColorBox avec le module de chargement ColorBox
Le module ColorBox Load permet aux utilisateurs de charger le contenu dans ColorBox en utilisant Ajax. Avec ce module, les utilisateurs peuvent spécifier une série de chemins qui, une fois rendus, ouvriront une ColorBox avec le contenu. Cela dépend du module NG Lightbox pour l'interface d'administration des chemins. Cette méthode peut être utilisée pour afficher des nœuds, des pages, des formulaires Web, etc.
Installer le module de chargement colorbox
composer require 'drupal/colorbox_load:^1.2'composer require 'drupal/colorbox_load:^1.2'
Activer le module à l'aide de la commande drush / Activer manuellement via l'interface utilisateur Drupal
drush en -y colorbox_loaddrush en -y colorbox_load
Implémentation d'une fenêtre contextuelle de connexion à l'aide du module ColorBox Load .
1. Configurez le module ColorBox Load en accédant à Configuration -> Ng Lightbox (Sous Media). Nous pouvons configurer les chemins pour lesquels nous voulons fournir l'affichage modal ColorBox, la largeur du modal ColorBox, la classe pour le modal lightbox et les options de rendu. (Choisissez votre option comme vous le souhaitez).
2. Nous pouvons maintenant voir le modal Drupal ColorBox implémenté pour la page de connexion en cliquant sur le bouton de connexion sur la page d'accueil.
Comment intégrer ColorBox avec Drupal Views
Pour certains sites Web, nous pourrions avoir besoin d'une fonctionnalité pouvant afficher un modal ColorBox pour une liste d'images. Cela peut être fait à l'aide du module Vues.
1. Allez dans structure -> vues -> ajouter une vue.
2. Ajoutez le champ d'image pour afficher et configurez le formateur sur ColorBox et d'autres paramètres en conséquence, puis enregistrez la vue.
3. Jetez maintenant un œil à la vue que vous venez de créer (dans mon cas, j'ai créé une vue en tant que page). Vous pouvez voir une liste d'images et lorsque vous cliquez sur l'une d'entre elles, l'image individuelle s'affiche dans la fenêtre contextuelle ColorBox.
