Une galerie d’images optimisée

Accueil » Une galerie d’images optimisée

Je reviens en détail sur une nouvelle fonctionnalité ajoutée à la page de galerie d’un site WordPress que j’ai réalisé.
Le site de la Chartreuse de Basseville présente un jardin en Bourgogne, l’histoire de ce lieu et la vie du jardin créé il y a 10 ans. Il s’agit d’un site vitrine avec une partie blog et une page de galerie montrant le jardin en images. Je détaille mon intervention sur ce projet dans la partie portfolio de ce site.

Site de la Chartreuse de Basseville https://chartreuse-de-basseville.com/
URL de la page galerie https://chartreuse-de-basseville.com/galerie/
CMS : WordPress
Framework : Genesis
Type de site : vitrine

Filtrer le contenu de la galerie

Jusqu’à présent les contenus de cette page s’affichaient en vrac et sans mise en valeur ni choix possible, les images disposées en grille sans mise avant. L’intention derrière cette optimisation est la mise en valeur des contenus et l’amélioration de la navigation pour l’utilisateur.
Je mets donc en place une navigation par facette qui filtre l’affichage des images, et j’y ajoute l’affichage d’un texte de description pour chaque photo au survol de l’image. La facette permet de créer des filtres avancés et personnalisables qui réduisent les résultats en fonction des critères que je définis.
Si les images s’affichent toujours sous forme de grille, le contenu est à présent plus riche puisque il est classé. Le visiteur est en mesure maintenant d’explorer à sa guise les différents sujets d’images proposés.

La facette ou filtre des photos de la page Galerie du site de la chartreuse de Basseville.
La facette (filtre des photos) de la page Galerie du site de la chartreuse de Basseville.

La mise en valeur du contenu

Grâce à l’éditorialisation de cette page de galerie, le contenu est mieux exploité et mis en avant. La classification à facette associe des données (ici les images) à des zones de filtrage multiples, ici les sujets de ces images. Une taxonomie personnalisée permet d’afficher les images dans la grille

  • Les thématiques sont mise en avant sous forme de boutons : les saisons (été, hiver…) et les espaces (le verger, le potager).
  • La grille d’images responsive occupe toute la largeur de la page.
  • Les images s’affichent en grille en temps réèl via la recherche à facettes, sans rechargement de la page.
  • Au survol de l’image, un texte descriptif s’affiche.
  • Une visionneuse (lightbox) au clic sur l’image facilite la navigation en contexte mobile.
La page de galerie en contexte mobile. Visionneuse au clic et tri par facette.
La page de galerie en contexte mobile : le tri par facette sous la forme de boutons et la visionneuse avec une navigation horizontale avec « swipe » ou avec les flèches.

La navigation améliorée

  • En organisant les images affichées par sujet, et en en réduisant leur nombre, la navigation est facilitée. La longueur de défilement de la page est également réduite, en particulier lorsqu’on navigue depuis un smartphone.
  • L’utilisateur a la possibilité de trier ce qu’il recherche en fonction des critères mis à sa disposition au préalable.
  • Les contenus sont mis en valeur en les rattachant à des thématiques pré-définies.
  • Des thématiques non présentes ailleurs dans le site sont exploitées.
  • La grille responsive s’adapte aux formats mobiles.
  • Les images peuvent être visualisées en plein écran sur mobile grace à une visionneuse.

La page galerie avant et après en images. Déplacez le curseur de droite à gauche ou inversement 😉

Une mise en œuvre simple pour l’administrateur

Pour publier une nouvelle image dans la page galerie du site, il suffit à présent à la personne en charge d’ajouter les contenus, de se rendre dans la partie Médiathèque de l’administration du site pour importer son fichier image. Il n’a ensuite qu’à renseigner le champ « Sujets de l’image » dans cette même fenêtre d’administration, pour que l’image s’affiche dans page galerie. Sans autre intervention.
Et si le propriétaire du site souhaite afficher un texte décrivant l’image, il n’y a qu’à renseigner la partie « Description ». Ce contenu s’affichera alors automatiquement au survol de l’image.

Capture d’écran de la page médiathèque de l’administration du site sont également filtrables via les termes de la taxonomie personnalisée « Sujet de l’image »
Les contenus de la médiathèque de l’administration du site sont également filtrables via les termes de la taxonomie personnalisée « Sujet de l’image »

En savoir plus sur le projet de la chartreuse de Basseville dans le portfolio

Capture d’écran de la visionneuse au clic sur l’image pour une navigation horizontale.
La visionneuse au clic sur l’image pour une navigation horizontale.