I know, I know, use Photoshop, right?
Actually, I just found an awesome way to build it into your WordPress theme using a little CSS3 and a dash of awesomeness.
Yeah. That’s right. A dash of awesomeness. Don’t use too much, you might blow-up your WordPress install.
Here’s how to create a black and white thumbnail in WordPress, that transitions to color when you mouseover:
How-To Create a Black & White Thumbnail in WordPress
We will be playing around in your functions.php file, so make sure you back it up first.
Although I love using a functionality plugin, when it comes to making theme changes like this, I recommend keeping these functions.php edits in your theme file, since it’s intricately part of the theme specifically.
First, we create new thumbnails using the add_images_size():
[cc lang=”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);
}[/cc]
Remember, the thumbnail size generated is based on your WordPress Media Admin settings.
Now we can add the following function which magically creates your black and white thumbnail when you’re uploading your images:
[cc lang=”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;
}[/cc]
You’ll notice a filter commented out. So, yes, there are other filters you can try! You’ll find the whole list here.
Now that you’ve got your functions.php all added, updated and uploaded, you can use get_post_thumbnail() within your WordPress loop to display the two images for the effect, just like so:
[cc lang=”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 ‘‘;
}[/cc]
Finally, drop in some CSS3 to display both images and get your cross fade to work:
[cc lang=”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;
}[/cc]
Do some testing to see how you like it, since the fade will only work in browsers that support CSS3 transitions.
You can demo the effect from the same place this tasty dish of code was baked up at, c.bavota’s bavotasan.com.
Jason Bradley says
Thanks for this tip! I may use this in a child theme I creating for a client. Might play around with the other filters too
Eric Dye says
AWESOME!
Valentino says
Hi, this is a very useful script but I’m a bit new on wordpress world and I couldn’t understand how to implement totally in my site. I saw the thumbnails in B&W in the upload folder but I’m not able to use it in the page. And I’m not able to deactivate the 150×150 crop on the image. Could someone help me?
Neale Killick says
Using the post bw thumbnail never worked for me.
the_post_thumbnail(‘thumbnail-bw’, array(‘class’=>’fade-image-a’));
I had to
//get the file
$imagebw = get_the_post_thumbnail($post_id, ‘thumbnail-bw’, $attr);
//extract the filename to of the image
global $wpdb;
$the_thumbnail_id = get_post_thumbnail_id($post->ID);
$the_thumbnail_name = $wpdb->get_var( “SELECT meta_value FROM $wpdb->postmeta WHERE post_id = ‘$the_thumbnail_id’ AND meta_key = ‘_wp_attached_file'” );
$ext = strrchr($the_thumbnail_name, ‘.’);
//replace the extension
$imagebw = str_replace($ext, “-bw”.$ext,$imagebw);