Afficher des minatures carrées dans une galerie Divi

ATTENTION ! Cet article n’est plus valable pour les versions récentes de Divi.

Si vous avez déjà utilisé les galeries du thème WordPress Divi, vous avez constaté que les miniatures s’affichent en mode « paysage ». Pour les images horizontales c’est très bien, mais lorsque vous avez des images en mode « portrait » (verticales), c’est plutôt ennuyant car elles sont très fortement coupées et peu représentatives de la photo originale.

Je vais vous montrer dans cet article comment créer un nouveau module Divi qui permettra de créer une galerie avec des miniatures carrées. À noter que les images affichées lorsqu’on clique sur les miniatures gardent leur format original.Voici ce que nous avons et ce que nous voulons obtenir :

Pour ce faire, nous devons procéder en trois étapes :

• Créer un module personnalisé Divi à partir du module « Galerie » existant
• Régénérer les miniatures
• Recadrer les miniatures

Ajouter un module personnalisé à Divi

Nous devons tout d’abord créer un module personnalisé qui s’ajoutera aux modules existants de Divi. Pour ce faire, il faut que vous ayez un thème enfant avec son propre fichier functions.php (si vous ne savez pas comment créer un thème enfant, visitez la page du Codex WordPress y relative). Ajoutez le code suivant dans ce fichier functions.php pour étendre le module Page Builder de Divi via un nouveau fichier appelé cyb-custom-modules.php que nous allons ajouter à notre thème enfant :

add_image_size( 'cyb-gallery-thumb', 400, 400, true );  // Nouveau format d'image, de 400px de large et de haut

function Cyb_Custom_Modules() {
	if ( class_exists( "ET_Builder_Module" ) ) {
    		include( "cyb-custom-modules.php");
	}
}

function Prep_Cyb_Custom_Modules() {
	global $pagenow;

	$is_admin = is_admin();
	$action_hook = $is_admin ? 'wp_loaded' : 'wp';
	$required_admin_pages = array( 'edit.php', 'post.php', 'post-new.php', 'admin.php', 'customize.php', 'edit-tags.php', 'admin-ajax.php', 'export.php' ); // list of admin pages where we need to load builder files
	$specific_filter_pages = array( 'edit.php', 'admin.php', 'edit-tags.php' );
	$is_edit_library_page = 'edit.php' === $pagenow && isset( $_GET['post_type'] ) && 'et_pb_layout' === $_GET['post_type'];
	$is_role_editor_page = 'admin.php' === $pagenow && isset( $_GET['page'] ) && 'et_divi_role_editor' === $_GET['page'];
	$is_import_page = 'admin.php' === $pagenow && isset( $_GET['import'] ) && 'wordpress' === $_GET['import'];
	$is_edit_layout_category_page = 'edit-tags.php' === $pagenow && isset( $_GET['taxonomy'] ) && 'layout_category' === $_GET['taxonomy'];
	if ( ! $is_admin || ( $is_admin && in_array( $pagenow, $required_admin_pages ) && ( ! in_array( $pagenow, $specific_filter_pages ) || $is_edit_library_page || $is_role_editor_page || $is_edit_layout_category_page || $is_import_page ) ) ) {
		add_action($action_hook, 'Cyb_Custom_Modules', 9789);
	}
}
Prep_Cyb_Custom_Modules();

La prochaine étape est de créer le fichier cyb-custom-modules.php et de l’ajouter à la base de notre thème enfant, au même niveau que le fichier functions.php  et les autres fichiers du thème. Ce fichier contiendra notre version modifiée du module « Galerie » de Divi. Dans le thème parent Divi, ouvrez le fichier includes > builder > main-modules.php qui contient tous les modules. Dans notre cas nous voulons modifier le module de galerie, copiez donc tout ce qui se trouve entre ces deux lignes :

class ET_Builder_Module_Gallery extends ET_Builder_Module {
// TOUT CE QUI SE TROUVE ICI DOIT ÊTRE COPIÉ
new  ET_Builder_Module_Gallery;

Ouvrez le nouveau fichier cyb-custom-modules.php de votre thème enfant et ajoutez-y les lignes suivantes :

<?php
class Cyb_Custom_Builder_Module_Gallery extends ET_Builder_Module {

Puis collez à la suite de ces lignes le contenu du module que vous avez copié précédemment et ajoutez à la suite de ce code la ligne suivante :

new Cyb_Custom_Builder_Module_Gallery;

Il y a encore deux choses que nous devons modifier dans ce nouveau module de galerie avant de pouvoir l’activer : son nom et son slug. Vous trouverez ces lignes au début du module :

class EG_Custom_Builder_Module_Gallery extends ET_Builder_Module {
	function init() {
		$this->name       = esc_html__( 'Galerie carrée', 'et_builder' );
		$this->slug       = 'et_pb_gallery_2';

Pour notre module nous l’avons juste renommé « Galerie carrée » et changé son slug en « et_pb_gallery_2 ».

Comme vous pouvez le voir, notre nouveau module apparaît maintenant avec les modules standards :

À l’heure actuelle, notre module ne fait rien d’autre que le module « Galerie » standard, il nous faut encore modifier quelques lignes dans son code. Les lignes modifiées sont mises en évidence ci-dessous :

$width = 'on' === $args['fullwidth'] ?  1080 : 400;
$width = (int) apply_filters( 'et_pb_gallery_image_width', $width );

$height = 'on' === $args['fullwidth'] ?  9999 : 400;
$height = (int) apply_filters( 'et_pb_gallery_image_height', $height );

$_attachments = get_posts( $attachments_args );

foreach ( $_attachments as $key => $val ) {
	$attachments[$key] = $_attachments[$key];
	$attachments[$key]->image_src_full  = wp_get_attachment_image_src( $val->ID, 'full' );
	$attachments[$key]->image_src_thumb = wp_get_attachment_image_src( $val->ID, 'cyb-gallery-thumb' );

	if ( et_fb_is_enabled() ) {
		$attachments[$key]->image_src_thumb_fullwidth = wp_get_attachment_image_src( $val->ID, array( 1080, 9999 ) );
		$attachments[$key]->image_src_thumb_grid      = wp_get_attachment_image_src( $val->ID, 'cyb-gallery-thumb' );
	}
}

Nous avons modifié les lignes 4 (correspondant à la ligne 307 pour la hauteur dans le code HTML) et 12 et 16 (correspondant aux lignes 315 et 319 pour l’utilisation de notre nouveau format d’image définit dans notre fichier functions.php). Si vous ne désirez pas faire toutes les manipulations, vous pouvez télécharger le code du fichier cyb-custom-modules.php.

Pour cette partie de l’article, je me suis inspiré de l’article Adding custom modules to Divi du blog Divi Space.

Régénérer les miniatures

Lorsque vous enregistrez des images sur votre site, WordPress les sauvegardes directement dans les différents formats qui sont demandés par WordPress lui-même, par votre thème ou par des plugins. Étant donné que nous avons ajouté un nouveau format d’image (la ligne add_image_size( ‘cyb-gallery-thumb’, 400, 400, true ); que nous avons ajouté dans notre fichier functions.php), nous devons indiquer à WordPress de générer à nouveau toutes les miniatures pour que celles que nous voulons soient créées. Les miniatures des images que vous ajouterez par la suite seront automatiquement créées.

Pour ce faire, nous devons installer le plugin Regenerate Thumbnails. Une fois le plugin installé et activé, nous allons dans le menu « Outils » > « Regen. Thumbnail » et nous cliquons sur le bouton « Régénérer toutes les miniatures ». En fonction du nombre d’images que vous avez déjà sur votre site, la régénération des miniatures peut prendre du temps.

Vous pouvez maintenant créer une nouvelle galerie en utilisant notre module « Galerie carrée », et vous constaterez que nos miniatures sont devenues carrées.

Recadrer les miniatures

Il reste un dernier petit inconvénient, les miniatures n’affichent pas forcément une partie très représentatives des images finales, elles sont mal cadrées. Pour remédier à ceci, nous installons le plugin Manual Image Crop. Après avoir installé et activé le plugin, rendez-vous dans la bibliothèque de médias et survolez une image, un nouveau lien « Recadrage » est venu s’ajouter aux liens habituels :

Cliquez dessus, une pop-up s’affiche avec l’image sélectionnée et tous les formats d’image disponibles sur votre site s’affichent sous forme d’onglets. Cliquez sur celui qui s’appelle « Cyb gallery thumb » (Eg gallery thumb dans la capture ci-dessous), recadrez la miniature comme vous le désirez et cliquez sur « Recadrer ! ».

Recommencez avec toutes les images pour lesquelles vous voulez adapter les miniatures, puis consultez votre galerie. C’est magique, toutes vos miniatures sont carrées et parfaitement recadrées ! 😉

Vous trouverez un exemple de galerie aux miniatures carrées et recadrées avec cette méthode sur mon site Etienne Grisel photographe.

J’espère que cet article vous a plu et vous a été utile. Si vous avez des questions, des remarques, des rectifications ou autre, les commentaires sont là pour vous.