Tout savoir sur WordPress
Tutoriel WordPress

Ajouter des images en noir et blanc sur WordPress

Cette astuce montre la méthode à suivre pour ajouter un format d’image en noir et blanc sur un site WordPress.

Qui ne sait jamais demandé si il existant une méthode automatique pour mettre un niveaux de gris sur les images après les avoir téléchargés ? Et bien ce tutoriel apporte la solution !

Dans ce tuto WordPress, nous allons vous montrer comment vous pouvez utiliser la librairie GD de PHP pour appliquer un filtre de niveaux de gris sur vos images.

Application d'un filtre de niveau de gris
Application d'un filtre de niveau de gris

La première chose que vous devez faire est d’ouvrir le fichier functions.php de votre thème et ajouter le code suivant :


add_action('after_setup_theme','grayscale_size');
function grayscale_size() {
    add_image_size('grayscale-image', 100, 100, true);
}

Le code ci-dessus ajoute une taille d’image supplémentaire lors de l’upload. La taille est fixée à 100x100px. Vous pouvez modifier les dimensions pour adapter l’astuce à vos besoins. Une fois que vous avez fait cela, vous devez ajouter le code suivant :


add_filter('wp_generate_attachment_metadata','grayscale_filter');
function grayscale_filter($meta) {
	
    $file = wp_upload_dir();
    $file = trailingslashit($file['path']).$meta['sizes']['grayscale-image']['file'];
    list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
    $image = wp_load_image($file);
    imagefilter($image, IMG_FILTER_GRAYSCALE);
    switch ($orig_type) {
	case IMAGETYPE_GIF:
		imagegif( $image, $file );
		break;
	case IMAGETYPE_PNG:
		imagepng( $image, $file );
		break;
	case IMAGETYPE_JPEG:
		imagejpeg( $image, $file );
		break;
    }
    return $meta;
}

Le code ci-dessus permet d’appliquer le niveaux de gris au format d’image que nous avons créée précédemment.

Si vous appliquez cette astuce pour la miniature de vos articles, alors vous pouvez l’afficher comme cela dans votre thème :


<?php the_post_thumbnail( 'grayscale-image' ); ?>

Si vous voulez afficher une taille d’image spécifique autre que la miniature d’un article, vous pouvez alors utiliser la fonction wp_get_attachment_image().

Source : WPBeginner.

Cet article a été mis à jour il y a 1659 jours - Il n'est peut être plus à jour !

Article écrit par Jonathan B.

Jonathan est le co-fondateur de WP Media, startup connue pour être l’auteur de WP Rocket et Imagify. Il est aussi co-organisateur du WordCamp Lyon et Paris.

6 Commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

  1. @Rodrigue : Tout est possible, mais bon là c’est un autre sujet qui demande un autre format d’image avec la couleur et du JS pour faire l’effet au hover ;)