[WordPress] Comment « griser » vos vignettes lors de l’envoi des images ?

En matière de Webdesign, tous les goûts sont dans la nature. Personnellement je suis toujours attiré par le minimalisme. J’aime les sites sobres et peu colorés (même si je lutte )

Une des tendances du moment consiste à griser toutes les images des pages de garde (les vignettes) afin de rendre ces pages assez sobres.

Voici comment griser automatiquement vos vignettes lors de l’upload sur la plateforme WordPress. Notez que cette technique permet de ne griser que les vignettes et pas toutes les images. Elle permet de créer une copie grisée de la vignette.

La première chose à faire consiste à créer un filtre d’image qui appliquera le traitement. Cette opération est très simple à réaliser en PHP.

function websourcing_grise_vignette($meta) {
	$upload_dir= wp_upload_dir();
        $image_path= $upload_dir['path'];
        //on récupère l'image dans la taille souhaitée
        // on utilise pour cela son nom
	$file = trailingslashit($image_path).$meta['sizes']['vignette_grise']['file'];
	list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
	$image = wp_load_image($file);

        // on applique le filtre en PHP
	imagefilter($image, IMG_FILTER_GRAYSCALE);
	switch ($orig_type) {
                case IMAGETYPE_PNG:
			imagepng( $image, $file );
			break;
		case IMAGETYPE_GIF:
			imagegif( $image, $file );
			break;
		case IMAGETYPE_JPEG:
			imagejpeg( $image, $file );
			break;
	}
	return $meta;
}
add_filter('wp_generate_attachment_metadata','websourcing_grise_vignette');

 
Nous avons vu que nous avons utilisé un nom spécifique vignette_grise. Il faut maintenant le créer en collant le code suivant dans le fichier functions.php.

function websourcing_vignette_grise() {
	add_image_size('websourcing_vignette_grise', 75, 75, true);
}
add_action('after_setup_theme','websourcing_vignette_grise');

Dans votre thème, il suffit d’utiliser le code <?php the_post_thumbnail( 'websourcing_vignette_grise' ); ?> à l’endroit où vous voulez voir votre vignette grisée apparaitre.

 
Une autre technique encore plus facile consiste à utiliser le célèbre script timthumb avec le code de filtre 2 dans l’url.

http://votredomaine/images/nomdelimage?w=75&h=75&zc=0&f=2.

Pour en savoir plus sur les filtres timthumb, lisez la page dédiée.