Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
add comment

3 Answers

up vote 4 down vote accepted

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)

share|improve this answer
    
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
add comment

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

share|improve this answer
add comment

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];
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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