Иногда для того, чтобы миниатюры не отвлекали внимание и не портили общее впечатление от блога, особоенно если он выполнен в темной цветовой гамме или имеет минималистичный дизайн, лучше их делать не цветными, а черно-белыми. Но ведь специально создавать миниатюры из цветных изображений и закачивать их в блог не будешь? В таком случае лучше воспользоваться функцией, которая автоматически создает черно-белые миниатюры.
В файл 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; }
А плагина для такого не существует? Или альтернативного варианта?
Ибо у меня в одном случае – не так как надо действует (и не черно-белая миниатюра и не меняется когда наводишь курсором) или же, вообще ничего не происходит.
Сам отвечу на свой вопрос.
Просто к строке CSS, которая отвечает за изображение, дописал свойство -webkit-filter: grayscale(100%);. Но это действует практически только в хроме (пруф).
Если нужно чтобы при наведении становилось цветным/ЧБ, то к свойству hover дописываем опять же -webkit-filter: grayscale(100%);, только 100% меняем на нужное нам число.