Generate B + W images in WordPress

blackandwhiteimages.php

<?php
add_image_size('thumbnail-bw', 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']['thumbnail-bw']['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-bw']['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-bw']['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-bw']['file']);
			break;
		}
	return $meta;
}
?>

createresponsiveenhanceimg.php

<?php

	add_filter('image_send_to_editor', 'create_responsive_enhance_img');

	/**
	 * Adds a function to add in a responsively enhanced image element to the editor
	 *
	 * @return string
	 * @author Keir Whitaker
	 */
	function create_responsive_enhance_img($html) {
		
		$retval 	= '';
		$bw_image 	= '';
		
		preg_match($pattern = '/src="([^"]*)"/', $html, $matches);
		
		$src 			= $matches[1];													// Full URL to img
		$home_url 		= home_url();													// Base URL for WP install e.g http://viewportindustries.com/
		$relative_src 	= str_ireplace($home_url, '', $src);							// Path minus the base url for the install
		$filename 		= explode('/', $src);											// Explodes the src based on the /, image should be last element of array
		$filename 		= $filename[count($filename)-1];								// The image i.e. DSC00097.jpg
		$bw_image_stub 	= (substr($filename, 0, strrpos($filename, '.'))).'-400x';		// The image inc size element i.e. DSC00097-400x
		$upload_dir 	= substr($relative_src, 0, strrpos($relative_src, '/')).'/';	// The path to the uploads folder i.e. /wp-content/uploads/2012/04/

		$dir 			= $_SERVER['DOCUMENT_ROOT'].$upload_dir;						// Current upload folder
		$files 			= scandir($dir);												// Array containing the files from the folder

		foreach ($files as $file) {			
			if((strpos($file, $bw_image_stub) === 0) && (strpos($file, '-bw.') > 0)) {
				$bw_image = $file;
				break;
			};
		};

		if(strlen($bw_image) > 0) {
			$retval .= '<img src="'.$home_url.$upload_dir.$bw_image.'" data-fullsrc="'.$home_url.$relative_src.'" />';
		} else {
			$retval .= '<img src="'.$home_url.$relative_src.'" />';
		};

		return $retval; 
	}

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