La galerie d'images est actuellement l'un des éléments les plus fréquemment intégrés sur les sites web. J'entends par là les diaporamas, carrousels, galeries de vignettes et bannières. Les galeries sont particulièrement importantes et largement utilisées dans l'industrie du commerce électronique, où la visualisation des produits vendus doit être au meilleur niveau possible. Jetons un coup d'œil aux possibilités offertes par Drupal à cet égard.
Recette pour une galerie d'images Drupal
Il existe de nombreuses approches pour créer des galeries d'images dans Drupal, mais elles se résument toutes aux éléments essentiels suivants que vous devez créer :
- formateur pour les champs d'image,
- nouveau type de contenu ou vue sous forme de bloc, basé sur des champs d'image,
- modèle personnalisé/stylisation/gestion des actions en JS.
Sur le site drupal.org, vous pouvez trouver de nombreux modules qui effectueront une partie du travail mentionné ci-dessus pour vous, laissant un certain espace pour des réglages individuels, par exemple Views Slideshow, Slick Carousel, Owl Carousel ou jCarousel. Cependant, une intervention dans le code, dans une plus ou moins grande mesure, sera nécessaire. Analysons certains types populaires de galeries et comparons les processus de leur création dans Drupal et les possibilités de modification de Droopler – une distribution de Drupal. Tous les types de galeries discutés dans cet article peuvent être ajoutés dans Droopler en tant que type de paragraphe prêt à l'emploi. Ci-dessous, j'ai marqué ceux que j'ai utilisés pour cet article.
Bannière
Dans Drupal, vous pouvez facilement créer une bannière statique sur votre page d'accueil. Par conception, une bannière est une photo ou une image placée en haut de la page, sur toute sa largeur. Elle peut également être utilisée comme arrière-plan pour d'autres contenus (par ex. un titre, un slogan publicitaire), créant ainsi un en-tête pour une sous-page donnée. Pour obtenir cet effet en utilisant la version par défaut de Drupal, non étendue avec des modules supplémentaires, vous pouvez créer un nouveau type de contenu, dans lequel – en plus du texte – vous insérerez un champ field_image. Vous pouvez également créer un bloc personnalisé que vous mettrez dans la zone d'en-tête. Ici, cependant, votre image d'arrière-plan doit être définie à partir du niveau CSS/SCSS de votre thème, en utilisant la propriété background-image de votre élément. Des composants supplémentaires, tels que du texte ou des boutons d'action, peuvent être ajoutés dans le cadre du modèle twig. La version brute ressemble à ceci :
Il est également judicieux d' utiliser le module externe Views Slideshow et d'activer le module Responsive Image, qui se trouve dans le noyau de Drupal. Grâce à ces modules, vous pouvez créer une vue sous forme de bloc, en utilisant le champ field_image du type de contenu précédemment préparé. En ajoutant un nouveau style au champ d'image (Configuration -> Styles d'image -> Ajouter un style d'image), vous définissez les dimensions de la bannière et les effets supplémentaires, tels que le comportement de la bannière lors d'un changement de résolution.
Cet exemple nécessite encore beaucoup de travail en termes de stylisation et de garantie que la bannière soit belle à n'importe quelle résolution d'écran. Dans Droopler, vous avez un paragraphe nommé d_p_banner, préparé spécialement pour ce type de besoins. Cependant, rappelez-vous qu'il n'offre pas de support de diaporama, ce qui est possible avec le module Views Slideshow. Cette fonctionnalité, sous une forme légèrement différente, est gérée par le paragraphe d_p_carousel, dont je parlerai plus tard dans cet article.
L'élément "Image d'arrière-plan" est un champ obligatoire lors de la création d'un d_p_banner. Ici, vous téléchargez le média sélectionné. Pourquoi des médias et pas seulement des graphiques ? Contrairement aux exemples présentés ci-dessus, Droopler vous donne la possibilité d'utiliser une vidéo comme arrière-plan ici. Les propriétés supplémentaires qui vous permettent de modifier la bannière sont :
- ajout d'un titre et d'un sous-titre qui sera dans la partie centrale de la bannière,
- possibilité d'ajouter une icône qui apparaîtra en haut de la bannière,
- ajout de paragraphes de texte (section Texte long),
- ajout d'un bouton d'action avec la possibilité de configurer tous les attributs,
- division de la bannière en deux parties, dont la gauche couvrira en plus les graphiques d'arrière-plan avec un filtre semi-transparent (ici je recommande d'utiliser l'option de couleurs inversées),
- utilisation d'une version claire ou sombre de la stylisation du paragraphe en fonction de la clarté du graphique choisi (cela garantit une bonne lisibilité),
- stylisation initiale - possibilité de modifier les marges internes et externes,
- capacité à définir des classes supplémentaires pour un bloc si vous souhaitez effectuer des modifications individuelles dans l'apparence ou le comportement de la bannière.
Ci-dessous, vous pouvez voir les possibilités d'ajout de médias - graphiques et vidéos, et le résultat final d'une telle action sous sa forme naturelle et après avoir utilisé l'option de division de la bannière en deux parties, où l'une d'elles est recouverte d'un filtre semi-transparent.
L'art de la mosaïque
Dans Drupal, les galeries "Carreau" ou "Masonry" se composent de nombreuses images qui se touchent (ou non), créant une mosaïque plus ou moins régulière. En utilisant un type de contenu précédemment créé et en ajoutant plusieurs versions de celui-ci, nous pouvons réintégrer une vue sous forme de bloc avec une disposition en grille où les champs d'image seront affichés. Vous pouvez choisir le type de formateur parmi ceux existants ou créer un nouveau style. Le résultat de ces actions sera similaire à ceci :
Comme vous pouvez le voir, les images de tailles initiales différentes ne s'assemblent pas. En outre, les images adjacentes dans une rangée se touchent, et un espace vide les sépare de la rangée suivante. Cela peut être corrigé en quelques étapes.
- Ajoutez au type de contenu créé un champ de texte contenant la liste des styles disponibles.
- Ajoutez les styles listés dans la configuration (ils traiteront chacune des images individuellement).
- Préparez un modèle pour pouvoir attribuer dynamiquement des styles aux images.
- Créez des classes supplémentaires pour styliser l'ensemble de sorte que tout forme une grille soignée.
Après avoir effectué ces étapes, vous pouvez obtenir un effet similaire à celui ci-dessous. Cependant, l'ensemble du processus est extrêmement chronophage.
Dans Droopler, vous trouverez plusieurs types de galeries faites de carreaux. Vous avez à votre disposition :
- Galerie (d_p_gallery),
- Galerie de carreaux (d_p_tiles),
- Tuiles de la barre latérale (d_p_side_tiles).
Galerie Droopler
C’est une galerie standard en disposition de grille, où les éléments individuels ne se touchent pas et les images sont présentées sous forme de vignettes. Après avoir cliqué sur l'une d'elles, un curseur avec une version en grand format du graphique s'ouvre. Il y a quatre éléments multimédias dans une rangée par défaut. La disposition change en fonction de la résolution de l'écran, et par exemple sur une tablette, trois éléments seront placés dans une rangée, tandis que dans la vue horizontale pour la version mobile, il y aura deux éléments. L'ordre des éléments dans la galerie peut être librement manipulé en utilisant la méthode de glisser-déposer. Pour ce type de paragraphe, il est possible d'ajouter une icône, un titre et une description. Tout apparaîtra sous forme d'en-tête au-dessus de la galerie.
Galerie de carreaux Droopler
C'est une galerie de type "masonry" où les images remplissent entièrement le volume du bloc. Comme dans le cas de d_gallery, la règle des 12 carreaux a été appliquée – quatre dans une rangée pour la version de bureau, trois pour la version tablette, et deux pour la version mobile. Malgré les différences de dimensions des images, elles sont uniformément réparties. Ici, il est également possible d'ajouter une icône et un titre.
Il convient de mentionner que vous pouvez facilement utiliser la classe "d-tiles-item-2x2" préparée pour les éléments de la galerie, qui rend le graphique sélectionné occuper deux positions dans une rangée. Vous devez simplement aller dans l'onglet "Paramètres" dans les options d'édition de votre paragraphe et indiquer dans le champ "Images à la une" lesquels des médias sélectionnés doivent être dimensionnés en double dans les deux dimensions. Vous obtiendrez alors un effet similaire à la version étendue de la galerie précédemment présentée dans Drupal. De plus, comme avec d'autres paragraphes, vous pouvez manipuler les marges du bloc.
Tuiles de la barre latérale Droopler
Dans le cas de cette galerie, les carreaux se trouvent uniquement d'un côté du paragraphe que vous pouvez sélectionner. Dans la deuxième partie, il y a des éléments supplémentaires tels que le titre, la description et le bouton d'action avec des attributs éditables.
Carrousel
Le dernier type de galerie couramment utilisé est le carrousel - un diaporama en boucle contrôlé par l'utilisateur. Pour obtenir un tel effet dans Drupal, j'utiliserai le module Views Slideshow mentionné précédemment. J'utilise un style de bannière prédéfini pour créer une vue de bloc qui affichera les champs d'image de notre type de contenu. Cette fois, cependant, dans la section "Format" de la vue, je configure la manière dont le contenu est affiché en ajoutant un compteur et des boutons de contrôle. Comme vous pouvez le voir ci-dessous, là aussi vous devrez intervenir dans le code source pour que tous les boutons aient une belle apparence.
Dans Droopler, la solution est beaucoup plus simple, car vous disposez d'un autre type de paragraphe préparé - d_p_carousel. Comme avec les autres types, vous pouvez ajouter une icône, un titre et une description à votre bloc. De plus, il est également nécessaire de définir le nombre de colonnes (combien d'images doivent être affichées à la fois). Dans l'onglet "Éléments" de la fenêtre d'édition, nous ajoutons plus d'éléments au carrousel. Chacun d'eux peut être en outre pourvu d'un titre, d'une description et d'un lien qui sera une action après avoir cliqué sur l'élément. Dans la version de base, notre carrousel pourrait ressembler à ceci :
Dans la version étendue, utilisée pour promouvoir des articles, revoir des entrées récemment ajoutées ou les articles les plus achetés, nous pourrions le faire comme ceci :
Galerie personnalisée dans Drupal
Créer des galeries sur des sites web est sans aucun doute un art. De nombreux programmeurs ont passé des heures à essayer de dompter les carreaux ou de faire fonctionner le carrousel. Il existe des solutions prêtes à l'emploi pour les sites Drupal que vous pouvez et devriez utiliser. Cependant, vous devez garder à l'esprit qu'en fin de compte, vous devrez créer quelques twigs et écrire des dizaines de lignes de code pour votre thème. Droopler vous offre sur un plateau des solutions prêtes-à-l'emploi qui ne sont pas seulement flexibles, mais qui ont aussi une belle apparence ! Par conséquent, vous pouvez rapidement et facilement répondre aux exigences de base pour créer une galerie fonctionnelle dans Drupal.
