Optimiser ses galeries photos : performance et style avec Kadence Blocks

Sur morfredus.fr, la photographie occupe une place centrale. Pour présenter mes « Fragments Visuels » tout en conservant un site rapide, j’ai délaissé les extensions lourdes au profit d’une approche native. Aujourd’hui, j’utilise principalement le bloc Advanced Gallery de Kadence Blocks.

Dans cet article, je partage ma configuration pour obtenir un rendu élégant, cinématique et performant.

Pourquoi Kadence Advanced Gallery ?

L’avantage majeur de ce bloc est sa légèreté. Contrairement aux extensions de portfolio « tout-en-un » qui injectent des scripts inutiles sur toutes les pages, Kadence utilise les ressources de WordPress de manière efficace.

Ma configuration type pour un rendu moderne :

1. Ratio 2:1 : Pour un look panoramique « cinématographique ».
2. Lien vers : Fichier média : Pour permettre l’ouverture en plein écran.
3. Lightbox native : Activée directement dans les réglages du bloc.

Le « petit plus » : L’amélioration CSS

Bien que Kadence soit puissant, j’aime ajouter une touche personnelle pour rendre l’expérience de navigation plus dynamique. J’ai donc créé un snippet CSS maison qui transforme le comportement des galeries.

Ce code apporte trois améliorations clés :

• Uniformisation : Il harmonise les marges des blocs natifs et ceux de Kadence.
• Élégance : Ajout de bordures arrondies et d’ombres portées douces.
• Interactivité : Un effet de « zoom » fluide au survol qui invite au clic.

Le Snippet CSS (08c)

Voici le code que j’intègre dans mes réglages personnalisés pour sublimer l’affichage :

CSS

/* morfredus - 08c - Styles dynamiques pour galeries [CSS] */

/* Conteneur global de la galerie - Cible les deux types de galeries */
.wp-block-gallery, 
.wp-block-kadence-advancedgallery {
    gap: 15px !important;
}

/* Style des images dans les galeries */
.wp-block-gallery .blocks-gallery-item img, 
.wp-block-gallery figure img,
.wp-block-kadence-advancedgallery .kadence-blocks-gallery-item img {
    border-radius: 12px !important;
    transition: transform 0.4s ease, box-shadow 0.4s ease !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    cursor: pointer;
}

/* Effet "Fun" au survol */
.wp-block-gallery .blocks-gallery-item img:hover,
.wp-block-gallery figure img:hover,
.wp-block-kadence-advancedgallery .kadence-blocks-gallery-item img:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Adaptation mode sombre pour l'ombre */
.mf-dark-mode .wp-block-gallery figure img,
.mf-dark-mode .wp-block-kadence-advancedgallery .kadence-blocks-gallery-item img {
    box-shadow: 0 4px 6px rgba(0,0,0,0.4);
}

Explications techniques

• transition : C’est ici que la magie opère. En utilisant 0.4s ease, l’effet de zoom ne semble pas « sauter » mais se développe de manière douce et naturelle.
• aspect-ratio (géré par Kadence) : En réglant ce paramètre dans l’interface Kadence, le CSS n’a pas besoin de forcer des hauteurs fixes, ce qui garantit une meilleure réactivité sur mobile.
• Sélecteurs multi-cibles : Le code cible à la fois .wp-block-gallery (le bloc natif de WordPress) et .wp-block-kadence-advancedgallery. Cela garantit que mes réglages s’appliquent uniformément sur tout le site, peu importe le bloc utilisé.

Résultat

Conclusion

En combinant la puissance de Kadence Blocks et une couche de CSS léger, on obtient un résultat professionnel sans sacrifier les performances de chargement. C’est le meilleur compromis pour un site orienté photographie comme le mien.

Et vous, quelle est votre astuce pour gérer vos galeries sur WordPress ?