Generate B + W images in WordPress

blackandwhiteimages.php

<?php
/* using thumbnail */
add_filter('wp_generate_attachment_metadata','bw_images_filter');

function bw_images_filter($meta) {
	$file = wp_upload_dir();
	$file = trailingslashit($file['path']).$meta['sizes']['thumbnail']['file'];
	list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
	$image = wp_load_image($file);
	imagefilter($image, IMG_FILTER_GRAYSCALE);
	switch ($orig_type) {
		case IMAGETYPE_GIF:
			$file = str_replace(".gif", "-bw.gif", $file);
			imagegif( $image, $file );
			$meta['sizes']['thumbnail-bw']['file'] = str_replace(".gif", "-bw.gif", $meta['sizes']['thumbnail']['file']);
			break;
		case IMAGETYPE_PNG:
			$file = str_replace(".png", "-bw.png", $file);
			imagepng( $image, $file );
			$meta['sizes']['thumbnail-bw']['file'] = str_replace(".png", "-bw.png", $meta['sizes']['thumbnail']['file']);
			break;
		case IMAGETYPE_JPEG:
			$file = str_replace(".jpg", "-bw.jpg", $file);
			imagejpeg( $image, $file );
			$meta['sizes']['thumbnail-bw']['file'] = str_replace(".jpg", "-bw.jpg", $meta['sizes']['thumbnail']['file']);
			break;
		}
	return $meta;
}
/* or with custom size */
/*
add_image_size('custom', 400, 0, false);
add_filter('wp_generate_attachment_metadata','bw_images_filter');

function bw_images_filter($meta) {
	$file = wp_upload_dir();
	$file = trailingslashit($file['path']).$meta['sizes']['custom']['file'];
	list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
	$image = wp_load_image($file);
	imagefilter($image, IMG_FILTER_GRAYSCALE);
	switch ($orig_type) {
		case IMAGETYPE_GIF:
			$file = str_replace(".gif", "-bw.gif", $file);
			imagegif( $image, $file );
			$meta['sizes']['custom-bw']['file'] = str_replace(".gif", "-bw.gif", $meta['sizes']['custom']['file']);
			break;
		case IMAGETYPE_PNG:
			$file = str_replace(".png", "-bw.png", $file);
			imagepng( $image, $file );
			$meta['sizes']['custom-bw']['file'] = str_replace(".png", "-bw.png", $meta['sizes']['custom']['file']);
			break;
		case IMAGETYPE_JPEG:
			$file = str_replace(".jpg", "-bw.jpg", $file);
			imagejpeg( $image, $file );
			$meta['sizes']['custom-bw']['file'] = str_replace(".jpg", "-bw.jpg", $meta['sizes']['custom']['file']);
			break;
		}
	return $meta;
}
*/
?>

responsiveimage.js

if($('body').is('.single, .page-template-page-archive-php')) {
	responsiveEnhance($('.featured-image img'), 400);
};

templateoutput.php

<?php 	
	if (have_posts()) while (have_posts()) : the_post();

	// Get the featured image
	$image_id = get_post_thumbnail_id();  

	// Get the full size image details
	$image_url = wp_get_attachment_image_src($image_id, 'full');
	$image_url = $image_url[0];	

	// Get the black and white image details
	$bw_image_url = wp_get_attachment_image_src($image_id, 'thumbnail-bw');
	$bw_image_url = $bw_image_url[0];	

?>

<img class="featured-image" src="<?php echo $bw_image_url; ?>" data-fullsrc="<?php echo $image_url; ?>" title="<?php the_title(); ?>" id="post-featured-img" />

<?php endwhile;?>