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


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)

  • I already did that with html5 canvas - but it's slow. How would I apply the filter to accomplish the hover effect? – Eeyore Jan 6 '11 at 19:33
  • The GD filter is more complex you would need to write your own php script to process and output the image. Hover effects are always done with javascript, something like jquery easily does this. Honestly just use jquery hover + opacity effects since it seems like you only want this for an effect and not an real backend process. – Wyck Jan 7 '11 at 21:11

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


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


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"/>

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];

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.