First we need to create a new thumbnail using add_image_size(). We’ll use the same thumbnail settings from the WordPress Media page in the wp-admin. Add this to your functions.php file within the PHP tags:
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);}
With that in place, we can now add the following function which will automatically create a black and white thumbnail:
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;
}
Whenever you upload an image, this function will create a new black and white thumbnail automatically. I also added a Gaussian Blur but commented it out. Remove those two slashes “//” to add a Gaussian Blur to your new black and white thumbnail. See otheravailable filters.
get_post_thumbnail();1 within your WordPress loop to display the two images for the effect:
Once you’ve added the above code, you can use.
get_post_thumbnail();1 within your WordPress loop to display the two images for the effect:
1if(function_exists(‘has_post_thumbnail’) && has_post_thumbnail()) {
echo ‘<a href=”’.get_permalink().’” class=”fade-image”>’;
the_post_thumbnail(‘thumbnail-bw’, array(‘class’=>’fade-image-a’));
the_post_thumbnail(‘thumbnail’, array(‘class’=>’fade-image-b’));
echo ‘</a>’;
}
Like this:
Like Loading...