WordPress, Дизайн, Хаки

Черно-белая миниатюра в WordPress

Читаю форум, наткнулся на запись koffein, который просил помочь, чтобы при наведении курсора мыши на черно-белое изображение становилось цветным в WordPress.
Требуется чтобы WordPress сам создавал при загрузке цветного изображения, черно-белое. Это можно реализовать с помощью некоторых встроенных функций WordPress и php.

 

Сперва необходимо создать новую миниатюру с помощью

add_image_size ().


Добавим в файл 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);
}


Теперь можем добавить функцию автоматического создания черно-белого изображения при загрузке миниатюры в WordPress:

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

Теперь при добавлении изображения у Вас автоматически будет создаваться копия в черно-белом варианте.

После добавления кода выше, Вы можете использовать get_post_thumbnail () , чтобы добавить эффект плавно меняющихся изображений.

Но это еще не все, следует добавить немного стилей, иначе у вас просто будет отображаться два изображения без эффектов, добавьте в 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;
		}

Так же можете воспользоваться плагином ImageFX

Если же у Вас ничего не получилось и не работает, а данный эффект хотите применить у себя на сайте,я расскажу еще про один способ, правда он маленько запутанный, но на 100% рабочий:)

Допустим у нас имеется два изображения, назовем их gray и соответственно color. Для примера я взял это:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


Теперь необходимо залить оба изображения в “медиафайлы”.Сделали, тогда идем дальше.

В вашей теме открываем файл header.php и между тегами head
вставляем:

<script type="text/javascript">
$(document).ready(function(){
$("img.grey").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
</script>

Затем идем в стиле вашей темы style.css и вставляем стили для наших изображений:

.gallery {
float: left;
margin-right: 20px;
list-style-type: none;
margin-bottom: 20px;
display: block;
height: 130px;
width: 130px;
position: relative;
}

img.grey {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}

img.color {
position: absolute;
left: 0; top: 0;
}

Ну вот половина пути пройдена, теперь можно вставлять наши изображения в пост.

Заходим в “Медиафайлы” и копируем пути наших изображений.

И вставляем в запись в html режиме, у вас должно получиться что-то наподобие:

<ul class="gallery">
<li><img class="grey" src="http://wpday.ru/wp-content/uploads/2012/03/grey.jpg" alt="" />
<img class="color" src="http://wpday.ru/wp-content/uploads/2012/03/color.jpg" alt="" /></li>
</ul>

К сожалению в моей теме есть маленькие недоработки, поэтому картинку могу только засветить.

Поделиться:

Похожие записи

  • Спасибо за полезную статью! Обязательно попробую сделать что-нибудь в таком стиле :-)

  • Спасибо ещё раз!
    А реально это впихнуть в post-image?

    • Chudikos

      Да, вполне реально Дмитрий.

  • Денис

    Спасибо. Очень помогло.

    Единственное. Если установленные в настройках ограничения размеров миниатюры больше загруженной картинки, то работать не будет, так как WP не создаст ресайз, а будет использовать оригинал. Соответственно: $meta[‘sizes’][‘thumbnail-bw’][‘file’] будет пустым.

    Нужно эту строку:

    $file = trailingslashit($file[‘path’]).$meta[‘sizes’][‘thumbnail-bw’][‘file’];

    заменить на:

    if ($meta[‘sizes’][‘main-thumb’][‘file’]) {
    $file = trailingslashit($file[‘path’]).$meta[‘sizes’][‘thumbnail-bw’][‘file’];
    } else {
    $file = trailingslashit($file[‘basedir’]).$meta[‘file’];
    }

    • Спасибо за дополнение.