571 Не так давно автор статьи работал над сайтом, где требовалось, чтобы черно-белое изображение при наведении курсором мыши становилось цветным. Причем, требовалось, чтобы WP сам генерировал ч.б. изображение.
К счастью, Otto как раз написал великолепную статью на тему об использовании функционала WordPress и немного PHP, чтобы автоматически создавать черно-белые изображения при загрузке на сайт цветных.
Для начала нам нужно создать миниатюру с помощью add_image_size(). Мы будем использовать настройки миниатюр, заданные в админке WordPress в разделе Настройки медиафайлов. Добавим следующий код в файл functions.php в теги PHP:
|
1 2 3 4 5 |
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); } |
После этого мы можем добавлять функционал автоматического создания черно-белых миниатюр:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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; } |
Всякий раз, когда вы будете добавлять новое изображение, то автоматически будет генерироваться черно-белая его миниатюра. В коде была закомментирована функция размытия изображения Gaussian Blur. Удалите два слэша “//” , чтобы ее задействовать. Также можно посмотреть остальные доступные фильтры. Ну а если заниматься всем этим самостоятельно совсем не хочется, достаточно зайти в Студию Web Терьер — сайты под ключ, а там уже профессиональные веб-разработчики сделают сайт любой сложности и с любыми эффектами.
После добавления кода, вы можете использовать the_post_thumbnail() в вашем WordPress для отображения двух картинок:
|
1 2 3 4 5 6 |
if(function_exists('has_post_thumbnail') && has_post_thumbnail()) { echo '<a href="'.get_permalink().'">'; the_post_thumbnail('thumbnail-bw', array('class'=>'fade-image-a')); the_post_thumbnail('thumbnail', array('class'=>'fade-image-b')); echo '</a>'; } |
Этот код просто будет показывать два изображения, для того, чтобы добавить эффект перехода из ч.б. в цвет, добавим CSS3 код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.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; } |
Это результат работы скрипта.
CSS3 эффект будет работать только в тех браузерах, где есть его поддержка, а сам код для WordPress на последних его версиях.
Для начала нам нужно создать миниатюру с помощью add_image_size ()
После добавления кода, вы можете использовать get_post_thumbnail ()
Можно чуть подробней? не понятно где это взять
the_post_thumbnail ()опечатка была