Greyscale your thumbnails in WordPress using PHP / June 19, 2011

We thought we would share a nifty little trick we recently used in an upcoming project that allows you to dynamically convert your thumbnails to greyscale. Follow the two step process below and you will have greyscaled images in no time.

This will only work if you have post thumbnails registered in your theme and have set a featured image for your post or page.

1. Create a new PHP file, copy in this code and save inside your theme folder e.g gsimg.php

<?php 
header('Content-type: image/jpeg');
$location = $_GET['src'];
$im = imagecreatefromjpeg($location);
imagefilter($im, IMG_FILTER_GRAYSCALE);
imagejpeg($im);
imagedestroy($im);
?>

2. Place this code within the loop of your page template.

<?php 
$img_id = get_post_thumbnail_id($post->ID); 
$thumb = wp_get_attachment_image_src($img_id, 'thumbnail', false); 
$imgsrc = $thumb[0]; 
?>
<img src="<?php bloginfo('template_directory'); ?>/gsimg.php?src=<?php echo $imgsrc; ?>"  />

Simple as that! If you are experiencing any problems, leave a comment below and we will try to get back to you asap.

Start the discussion

Your email address will not be published.

Get a Graphic Design Quote