Créer une galerie d’images.

Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

Créez ici une galerie photo : un titre centré, trois photos côte à côte avec un texte alternatif, et un diaporama sur un bandeau gris. Utilisez-la pour montrer un lieu ou un événement en images. Pour présenter des projets avec une description chacun, suivez plutôt Créer une galerie de portfolio.

La vidéo crée une galerie de peintures d’étudiants pour une université.

Avant de commencer

  • Votre rôle dispose de l’autorisation Edit with DXPR Builder.
  • La médiathèque contient au moins six photos, recadrées aux mêmes proportions.
  • La page est ouverte dans le builder. Pour une nouvelle page, accédez à Content > Add content > Landing Page (/node/add/landing_page) et cliquez sur Save.

Étape 1 : ajouter l’en-tête

  1. Cliquez sur Add Elements sur la page vide et choisissez Section dans l’onglet Layout.
  2. Survolez la section et ouvrez Plus > Paramètres. Sous HTML classes, choisissez Align text center, puis cliquez sur Save.
  3. Cliquez sur + sur la section et choisissez Text dans l’onglet Content.
  4. Saisissez « Student art gallery » comme Heading 2, ajoutez une ligne d’introduction et cliquez sur Save. Le thème affiche le titre de la page comme Heading 1 de la page. Pour faire de ce titre le Heading 1 à la place, voir Créer des pages optimisées pour le référencement.

Étape 2 : ajouter la grille de photos

  1. Survolez la section et cliquez sur Add Section Below. Cliquez sur + sur la nouvelle section et choisissez Row ; elle arrive avec deux colonnes égales.
  2. Cliquez sur l’icône de grille de la ligne (Column layout), choisissez le préréglage 1/3 + 1/3 + 1/3 et cliquez sur Save.
  3. Cliquez sur + dans la première colonne et choisissez Image.
  4. Cliquez sur Select Image, recherchez dans la médiathèque avec Apply filters, cliquez sur une photo et cliquez sur Insert selected.
  5. Ouvrez le panneau SEO et saisissez l’Alt attribute : ce qu’une personne qui ne voit pas la photo doit savoir. Cliquez sur Save.
  6. Répétez pour les deuxième et troisième colonnes.

Des photos recadrées aux mêmes proportions gardent la ligne régulière.

Étape 3 : ajouter le diaporama

  1. Ajoutez une troisième section avec Add Section Below et ouvrez ses Plus > Paramètres. Choisissez Align text center sous HTML classes et un Background gris clair dans le panneau Style. Cliquez sur Save.
  2. Cliquez sur + sur la section et choisissez Image carousel.
  3. Cliquez sur Select Image, recherchez dans la médiathèque, cliquez sur trois photos et cliquez sur Insert selected, puis cliquez sur Save.
  4. Cliquez à nouveau sur + sur la section et choisissez Text ; il arrive au-dessus du carrousel. Saisissez « Slideshow » comme Heading 2 et cliquez sur Save.

Étape 4 : enregistrer et prévisualiser

  1. Cliquez sur Save dans la barre d’outils du builder.
  2. Ouvrez le menu d’affichage (l’eye icon) et choisissez Preview.

Aller plus loin

Non montré dans la vidéo :

  • Captions : placez une Card dans la colonne et ajoutez un élément Text avec la légende à l’intérieur. Ajoutez ensuite l’Image dans la carte ; elle arrive au-dessus de la légende.
  • Full-size photos : réglez Image link sur le fichier en taille réelle et Image link target sur New window.
  • Style : sur chaque image, réglez Border radius sur 4 et Drop shadow sur 1 dans le panneau Style pour un léger relief.
  • Slideshow timing : réglez Interval sur le carrousel, en millisecondes. Sous Hide, cochez Hide pagination control ou Hide prev/next buttons pour supprimer ces contrôles.
  • Gallery that fills itself : sous Structure > Views > Add view, créez une vue du média Image avec un affichage de bloc au format Grid. Insérez-la depuis l’onglet Drupal Views, et les nouveaux téléversements apparaissent d’eux-mêmes.

Ce que vous voyez

Le titre centré ouvre la page, suivi de trois photos côte à côte. Sur le bandeau gris en dessous, le diaporama montre une photo à la fois et passe à la suivante toutes les cinq secondes.

Si les photos ne s’affichent pas comme montré

  • Insert selected n’ajoute aucune photo. La médiathèque rechargeait encore après Apply filters, votre clic n’a donc pas coché la photo. Attendez que la grille se stabilise, vérifiez que la photo affiche une coche, et cliquez à nouveau sur Insert selected.
  • La médiathèque est vide. Aucune image n’est encore téléversée, ou le navigateur de médias n’est pas configuré. Voir Les images ne se téléversent pas ou disparaissent.
  • Les trois photos ont des hauteurs différentes. Leurs proportions diffèrent. Recadrez-les aux mêmes proportions, téléversez-les à nouveau et choisissez les nouvelles copies.
  • Vos modifications ont disparu après un rechargement. Vous avez quitté la page avant de cliquer sur Save dans la barre d’outils du builder. Si Save affiche une erreur, voir Les modifications ne s’enregistrent pas.

Et ensuite ?