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 :
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]


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

[/pastacode]

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 :

[pastacode lang=”php” message=”” highlight=”” provider=”manual”]


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;
}

[/pastacode]

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 :

[pastacode lang=”php” message=”” highlight=”” provider=”manual”]


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

[/pastacode]

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 4472 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.

7 Commentaires

  1. Au contraire, c’est vraiment pénible de repasser par le Toshop pour désaturer. merci.

  2. Est-il possible de faire apparaître la couleur d’origine au survole ? Franchement, ça serait cool.

  3. @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 ;)

  4. Salut,
    C’est une fonction interne à WordPress ou cela peut être ajouter à un site (pour créer un portfolio par exemple avec rollover N&B -> Couleur)?!!!

  5. Bonjour et merci pour l’article qui est en 4 parties, est ce que vous pourriez préciser où insérer le 3ème code car dans functions ça ne fonctionne pas et comment faire pour utiliser la fonction wp_get_attachment_image() proposée en 4ème partie?
    Merci