L'intermédiaire

WordPress propose une structure HTML qui lui est propre quand vous créez une galerie depuis le texte enrichi dédié à la publication de vos articles. Il est cependant possible de modifier cette structure depuis une fonction PHP que je voulais vous partager.

Pourquoi changer la structure des galeries WordPress ?

Pour la simple raison que vous aurez sans doute envie de styliser cette dernière ou d’y ajouter des fonctionnalités : clique sur l’une des images en vue d’afficher un diaporama par exemple.

C’est une technique que j’emploie depuis longtemps, vous allez le voir, je vais vous proposer ici une vraie customisation de la galerie avec des bibliothèques Javascript qui vont paraître vieilles pour celles et ceux d’entre vous qui les connaissent, mais qui restent diablement efficace. Je vous propose de transformer votre galerie en une galerie de type « Masonry » et pouvant se transformer en un slider/diaporama.

Galerie WordPress + Masonry + Diaporama

Les présentations sont faites, passons directement au code :

function custom_gallery_output($instance, $atts, $output = '') {
    if (!$atts['ids']) {
        return false;
    }

    wp_enqueue_style( 'glightbox-css', 'https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css' );

    wp_enqueue_script( 'glightbox-js', 'https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js', [], null, true );

    wp_enqueue_script( 'masonry-js', 'https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js', [], null, true );

    wp_enqueue_script( 'imagesloaded-js', 'https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js', [], null, true );

     $css = "
        .gallery__item { width: 50%; }

        @media screen and (min-width: 768px) {
            .gallery__item { width: 33.33%; }
        }
    ";
    wp_add_inline_style('glightbox-css', $css);

    $script = "
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.lightgallery').forEach(function(grid) {
            const msnry = new Masonry(grid, {
                itemSelector: '.gallery__item',
                percentPosition: true
            });

            imagesLoaded(grid, function () {
                msnry.layout();

                const lightbox = GLightbox({
                    selector: '.gallery__item'
                });
            });
        });
    });
    ";
    wp_add_inline_script('glightbox-js', $script);

    $attachments = explode(',', $atts['ids']);
    $idGallery = $instance;
    
    $output = '<div id="gallery_'.$idGallery.'" class="lightgallery gallery__list">';
    
    foreach ($attachments as $attachment_id) {
        $image_url = wp_get_attachment_image_url($attachment_id, 'full');
        $image_alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
        $image_title = get_post_meta($attachment_id, '_wp_attachment_image_title', true);
        
        $output .= '<a href="' . esc_url($image_url) . '" class="gallery__item">';
        $output .= '<img src="' . esc_url($image_url) . '" alt="' . esc_attr($image_alt) . '"  title="' . esc_attr($image_title) . '" loading="lazy" class="gallery__img">';
        $output .= '</a>';
    }

    $output .= '</div>';

return $output;
}
add_filter('post_gallery', 'custom_gallery_output', 10, 3);

À travers ce code, vous verrez plusieurs choses.

D’abord, la fonction native de WordPress réutilisée (hook) se nomme « post_gallery » et prend 3 paramètres. Nous utiliserons surtout le paramètre « $atts » qui renseigne les ids des médias utilisés. Que nous bouclerons ensuite afin de les afficher. « $output » est tout ce qui est retourné (l’HTML final)
Et « $instance » est l’ID unique de la galerie. Toute la documentation de ce Hook se trouve ici.

Les dépendances que j’utilise sont au nombre de deux, mais il faut charger 4 fichiers en tout. (3 JS et 1 CSS) – le plus difficile ici c’est de gérer les priorités de chargement de ces bibliothèques externes.

En effet, la bibliothèque de David Desandro nommée Masonry, qui date mais qui est toujours très efficace pour créer ce type de galerie, modifie le DOM (l’architecture de votre HTML) et doit donc être initialisée au début. Pour cela, nous sommes forcés d’utiliser la bibliothèque « imagesloaded » (du même auteur) qui permet de construire le layout prêt à être manipulé cette fois-ci par la troisième et dernière dépendance glightbox. Glightbox est performante et légère. Mais il en existe d’autres du même type.

Cela semble sans doute fastidieux mais au regard du code, même si j’ai fait au plus simple, on obtient une galerie attractive et avec un diaporama qui tourne derrière.

Et l’avantage ?

L’avantage, c’est que vous pouvez construire votre galerie avec les classes qui vous conviennent et surtout en modifier la structure. En effet, la galerie Glightbox (mais c’est une structure déjà vue dans d’autres bibliothèques), a besoin de cette structure pour fonctionner :

<div class="lightgallery">
    <a href="img1.jpg" class="gallery__item">
        <img src="img1.jpg" />
    </a>

    <a href="img2.jpg" class="gallery__item">
        <img src="img2.jpg" />
    </a>

...
</div>

Si vous remarquez bien dans le code donné au départ, je gère le nombre de colonnes via le CSS injecté ici : :

.gallery__item { width: 50%; }

@media screen and (min-width: 768px) {
    .gallery__item { width: 33.33%; }
}

Ce n’est pas spécialement une bonne méthode : le mieux aurait été de placer ce code dans un fichier CSS dédié à cet effet. Tout comme les dépendances que vous pouvez placer dans les ASSETS de votre thème. Mais je voulais vous partager un morceau de code (Hook) prêt à copier-coller dans le fichier functions.php de votre thème (par exemple), afin de transformer toutes les galeries de votre CMS en une galerie maçonnerie.

Enfin, je voulais également vous montrer ce que WordPress insérait comme code comme quand vous créez une galerie depuis son dashboard :

<style type="text/css">
	#gallery-1 {
		margin: auto;
	}
	#gallery-1 .gallery-item {
		float: left;
		margin-top: 10px;
		text-align: center;
		width: 33%;
	}
	#gallery-1 img {
		border: 2px solid #cfcfcf;
	}
	#gallery-1 .gallery-caption {
		margin-left: 0;
	}
</style>
<div id="gallery-1" class="gallery galleryid-2643 gallery-columns-3 gallery-size-thumbnail">
	<dl class="gallery-item">
		<dt class="gallery-icon landscape">
			<a href="lien_vers_le_media">
				<img decoding="async" width="150" height="150" src="image" class="attachment-thumbnail size-thumbnail" alt="" srcset="..." sizes="(max-width: 150px) 100vw, 150px">
			</a>
		</dt>
	</dl>
	...
	<br style="clear: both">
</div>

Comme vous pouvez le voir, WordPress ajoute du style au beau milieu de l’HTML de votre page et utilise des balises que vous n’avez pas spécialement besoin pour afficher vos images.

Bonus

Enfin, si ça vous dit d’en savoir plus sur les galeries de type masonry dont il est question, je vous conseille de lire cet article. En gros, ce type de galerie n’est pas encore natif au CSS mais pourrait le devenir un jour via de simples propriété/valeurs des feuilles de styles en cascade. Quand ce sera le cas, il ne faudra sans doute plus passer par le célèbre package de DeSandro ou du Javascript.

En attendant, voilà une solution pour transformer votre galerie WordPress en un diaporama, et affichée comme un mur de vieilles pierres !

Pourquoi changer la structure des galeries WordPress ?

Galerie WordPress + Masonry + Diaporama

Et l’avantage ?

Bonus

Newsletter