Supporter les galeries d’images WordPress en HTML5

Par Aurélien Denis
le 3 décembre 2017, mis à jour il y a 3 mois
4 commentaires
Supporter les galeries d’images WordPress en HTML5

WordPress ajoute des styles par défaut sur les galeries d’images de vos articles pour les thèmes qui ne gèrent pas le support en HTML5 de ce type d’élément.

À l’aide d’un bout de code, vous pourrez désactiver ces styles et ainsi avoir à nouveau la possibilité d’appliquer vos propres styles CSS.

Un thème bien codé doit disposer de la ligne de code suivante pour un support efficace des galeries d’images :

add_theme_support('html5', array('gallery'));

La présence de cette ligne aura pour effet d’utiliser la balise figure. En cas d’absence, WordPress utilisera des balises dl et dt et ajoutera en inline le bout de code suivant :

<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;
	}
	/* see gallery_shortcode() in wp-includes/media.php */
</style>

Autrement dit, ce n’est pas très optimal ! Si vous développez vos propres thèmes, respectez ces bonnes pratiques mais si vous reprenez un thème premium vous pouvez tout simplement filtrer l’ensemble pour désactiver l’ajout de CSS en inline avec :

/* Removing Default WordPress Syles for Galleries */
add_filter('use_default_gallery_style', '__return_false');

Pour ma part, voici le code CSS que j’inclus dans mon thème de base :

.gallery {
	margin: 0 -1.1666667% 1.75em;
}
.gallery-item {
	display: inline-block;
	max-width: 33.33%;
	padding: 0 1.1400652% 2.2801304%;
	text-align: center;
	vertical-align: top;
	width: 100%;
}
.gallery-item a {
	display: inline-block;
}
.gallery-columns-1 .gallery-item {
	max-width: 100%;
}
.gallery-columns-2 .gallery-item {
	max-width: 50%;
}
.gallery-columns-3 .gallery-item {
	max-width: 33%;
}
.gallery-columns-4 .gallery-item {
	max-width: 25%;
}
.gallery-columns-5 .gallery-item {
	max-width: 20%;
}
.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}
.gallery-icon img {
	margin: 0 auto;
}
.gallery-caption {
	color: #686868;
	display: block;
	font-size: 13px;
	font-size: 0.8125rem;
	font-style: italic;
	line-height: 1.6153846154;
	padding-top: 0.5384615385em;
}
.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
	display: none;
}

Bien qu’elles ne soient pas toujours très utilisées dans un projet, les galeries d’images de WordPress constituent un élément obligatoire à prendre en charge dans le développement d’un thème – au même titre que les commentaires, les widgets, les menus, et tout ce qui est disponible sur ce système de gestion de contenu.

Par Aurélien Denis

Consultant & Développeur WordPress / WooCommerce. Un site à créer, à maintenir ou à débuguer ? Contactez-moi.

Ces tutoriels devraient vous intéresser…
4 commentaires
  1. Luc

    Merci pour cet article. Pour ma part j’ai (par exemple) des #rl-gallery-container-1 (2, 3, 4 …) qui ont un margin: -10px -10px; qui est généré dans le html (inline). Pour le “hooker” je ne trouve que la solution de le forcer dans le css avec !important. ce qui n’est pas clean. Comment éviter cela ? (screenshot : https://prnt.sc/1po1acc)
    merci !

    Répondre
  2. Darknote

    Bonjour,
    Pourquoi dans le code CSS, pas de .gallery-columns-3 .gallery-item ?
    .gallery-columns-2 .gallery-item {
    max-width: 50%;
    }
    .gallery-columns-4 .gallery-item {
    max-width: 25%;
    }

    Répondre
    1. Aurélien Denis auteur de l’article

      C’est un oubli de ma part, j’ai corrigé le code en conséquence ! Merci bien. 🙂

      Répondre
      1. Darknote

        Bonjour,
        merci

        Répondre
Laisser un commentaire