Black and White thumbnails

Question

There are ways to convert color image to black and white on the client side with javascript. However, it won't work in all browsers and it's slow.

Is there a way to convert Wordpress post-thumbnails to black and white on the server side automatically?

This is what I would like to achieve:

1. Upload a color image

2. Have it displayed in black and white

3. On hover change to its original color

Answer 1

You can use the php GD library which you most likely already have on your server since wordpresses uses it.

You can filter the image using imagefilter specifically IMG_FILTER_GRAYSCALE and/or IMG_FILTER_CONTRAST.

For example

imagefilter($im, IMG_FILTER_GRAYSCALE);
imagefilter($im, IMG_FILTER_CONTRAST, -100);

The hover would have to been done in javascript.

A much simpler solution would be to use the html5 canvas tag or a javascript image library like pixastic and wrestle with making it browser friendly ( not that hard using one of the html5 js kits)

Answer 2

check that http://phpthumb.sourceforge.net/ it has some filters that you can use to generate other colour schemes.

Answer 3

timthumb now supports image filters... inluding (drumroll) a grayscale filter.

http://www.binarymoon.co.uk/2010/08/timthumb-image-filters/

totally server-side and timthumb has seen a lot of speed improvements with its caching... so the images are not re-created every time.

<img src="url-to-tim-thumb.php?src=url-to-image.png&w=200&h=200&f=2" />

then you could spit out the image again w/o the filter... so that you have 1 color and 1 gray scale.... absolutely position the one on top of the other and use jquery to animate opacity on hover. i don't like the double markup, but doing everything on the fly (i tried using pixastic) on multiple images just dragged my load time way down.

<div class="img-wrap">
<img src="url-to-tim-thumb.php?src=url-to-image.png&w=200&h=200&f=2" class="grayscale"/>
<img src="url-to-tim-thumb.php?src=url-to-image.png&w=200&h=200" class="color"/>
</div>

i found i had to use timthumb on both to ensure they'd be exactly the same size... and prevent any random pixel rounding errors.

in the loop you can get the featured image's info w/ some of the following:

$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src($image_id,’large’, true);  
$alttext = get_post_meta( $image_id, '_wp_attachment_image_alt', true); ?>

$src = $image[0];
$width = $image[1];
$height = $image[2];