One of my client ask us to create Black and white thumbnail for wordpress blog post that on mouse over turn coloured. This is pretty common effect now a days and with my custom PHP or ASP.NET programming we usually create black and white image at time of upload and save it. This is what we need to do in WordPress. To save time in research [or rather I found this good article] http://bavotasan.com/2011/create-black-white-thumbnail-wordpress/ Where author try to give a good way of creating thumbnail.

At first I was impressed and feel lucky to find a good looking tutorial/article and thought it will be piece of cake now, however as I progress I found that main article miss few things

1. It doesn’t work. Yes the article in its current state didn’t work.

2. It do not filter image if it is of same size as size you need on thumbnail [as define by one of commenter].

3. It fail to create Black and white image

4. It fail to get Black and White image in HTML piece of code.

Starting from #1, ofcourse I get it to working now. So that will you will see later. I follow the commenter’s code to fix the point 2,and frankly I personnally don’t know if it is any good or not. But check looks good in current state so I keep it. Now the problem is it doesn’t create Black and white image for some user and for me. After searching for couple of minutes I found that it does create black and white image, but at different location than the code suggest.

Author is picking the wp_upload_dir() function which return the latest upload path, however in wordpress all upload goes in folder hirerchy as YYYY/MM (Year/month). And if you are uploading in older post then WordPress will upload media for that post in month and year of that post’s publish date and not current year and date. What this does is that it broke the path of black and white image upload and hence imagefilter() php function start giving error. Solution was rather simple. I use $meta’s original upload file path, strip file name and put image path in same folder as original image.

The Next problem is that on HTML page it doesn’t pick the black and white image. Again the code forgot or miss to change the Thumbnail-bw path to it’s new file. Some commenter did mention it but I didn’t get their point until at the time of writting of this article. These two crucial things once fixed the code works just fine for me. So, nothing gets change except the BW_Filter function which I have given below. Rest of code is same as original post. [link above]

add_filter('wp_generate_attachment_metadata','bw_images_filter');
function bw_images_filter($meta) {	

	$file = wp_upload_dir();
	// Need to check to see if their was even a generated 'thumb-m' in case the image uploaded was the appropriate size
	// and therefore will be used in it's largest form
	if (isset($meta['sizes']['thumbnail-bw'])) {
		$tmpfile = trailingslashit($file['basedir']);
		$explodedPath = explode("/", $meta['file']);
		unset($explodedPath[count($explodedPath)-1]); //Remove file name from path
		$explodedPath = implode("/", $explodedPath);
		$file = $tmpfile.trailingslashit($explodedPath).$meta['sizes']['thumbnail-bw']['file'];
		
		$updateFileName = explode(".",$meta['sizes']['thumbnail-bw']['file']);
		$ext = $updateFileName[count($updateFileName)-1];
		unset ($updateFileName[count($updateFileName)-1]); //remove it for now.
		$updateFileName = implode(".", $updateFileName);
		$updateFileName = $updateFileName ."-bw.". $ext;
		$meta['sizes']['thumbnail-bw']['file'] = $updateFileName;
	// The thumbnail didn't get created because the uploaded image was the correct size before scaling / cropping.
	// Need to get base directory instead of path here because the original file already has the year/month structure in it's file attribute.
	} else {
		$file = trailingslashit($file['basedir']).$meta['file'];
		$explodedPath = explode("/", $meta['file']);
 
		// Manually insert the thumbnail-bw that didn't get created upon upload and append '-bw' to the filename
		$explodedFileName = explode(".", $exploded[2]);
		$updatedFileName = $explodedFileName[0] . '-bw.' . $explodedFileName[1];
		$meta['sizes']['thumbnail-bw']['file'] = $updatedFileName;		
	}
	
	$meta['sizes']['thumbnail-bw']['width'] = 421; // Set these dimensions to match the dimensions for the add_image_size above
	$meta['sizes']['thumbnail-bw']['height'] = 220;
	

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

Hope this code works for you. If not please share the fix and solution, I will try to keep it updates as I found better than this.