Как сделать монохромные (черно-белые) миниатюры

Иногда для того, чтобы миниатюры не отвлекали внимание и не портили общее впечатление от блога, особоенно если он выполнен в темной цветовой гамме или имеет минималистичный дизайн, лучше их делать не цветными, а черно-белыми. Но ведь специально создавать миниатюры из цветных изображений и закачивать их в блог не будешь? В таком случае лучше воспользоваться функцией, которая автоматически создает черно-белые миниатюры.

В файл functions.php вставьте:

add_action('after_setup_theme','bw_images_size');
function bw_images_size() {
	$crop = get_option('thumbnail_crop')==1 ? true : false;
	add_image_size('thumbnail-bw', get_option('thumbnail_size_w'), get_option('thumbnail_size_h'), $crop);
}

Этот код делает доступным использование миниатюр с префиксом thumbnail-bw, создаваемых из изображений уменьшением и обрезанием по точным размерам с сохранением пропорций.

Далее вставьте в functions.php код функции, создающей черно-белые миниатюры:

add_filter('wp_generate_attachment_metadata','bw_images_filter');
function bw_images_filter($meta) {
	$file = wp_upload_dir();
	$file = trailingslashit($file['path']).$meta['sizes']['thumbnail-bw']['file'];
	list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
	$image = wp_load_image($file);
	imagefilter($image, IMG_FILTER_GRAYSCALE);
	//imagefilter($image, IMG_FILTER_GAUSSIAN_BLUR);
	switch ($orig_type) {
		case IMAGETYPE_GIF:
			$file = str_replace(".gif", "-bw.gif", $file);
			imagegif( $image, $file );
			break;
		case IMAGETYPE_PNG:
			$file = str_replace(".png", "-bw.png", $file);
			imagepng( $image, $file );
			break;
		case IMAGETYPE_JPEG:
			$file = str_replace(".jpg", "-bw.jpg", $file);
			imagejpeg( $image, $file );
			break;
	}
	return $meta;
}

Теперь при закачке изображений в блог создаются не только стандартные миниатюры, но и черно-белые миниатюры такого же размера, отличающиеся приставкой bw:
my_thumbnail_145x145.jpg
my_thumbnail_145x145-bw.jpg

Чтобы вывести черно-белую миниатюру, используйте:

<?php
if(function_exists('has_post_thumbnail') && has_post_thumbnail()) { 
	echo '';
	the_post_thumbnail('thumbnail-bw', array('class'=>'fade-image-a'));
	the_post_thumbnail('thumbnail', array('class'=>'fade-image-b'));
	echo '';
}
?>

Этот код выводит одновременно и черно-белую миниатюру и обычную. Вы можете сделать так, чтобы отображалась черно-белая миниатюра, но при подведении к ней курсора она менялась на цветную. Для этого в код внедрены классы элементов – к ним нужно добавить оформление, вставив в style.css:

.fade-image {
	display: block;
	position: relative;
	width: 150px;
	height: 150px;
	}

.fade-image-a,
.fade-image b {
	position: absolute;
	left: 0;
	top: 0;
	}
 
.fade-image-a {
	z-index: 5;
	opacity: 1;
	transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
   	}	
 
.fade-image-a:hover {
	opacity: 0;
    }