paulnett · May 17, 2012 07:31 · Apr 19, 2012 · Apr 5, 2012 · Apr 5, 2012 · Apr 5, 2012
diff --git a/createresponsiveenhanceimg.php b/createresponsiveenhanceimg.php
@@ -0,0 +1,43 @@
+<?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; 
+	}
diff --git a/responsiveimage.js b/responsiveimage.js
@@ -0,0 +1,3 @@
+if($('body').is('.single, .page-template-page-archive-php')) {
+	responsiveEnhance($('.featured-image img'), 400);
+};
diff --git a/templateoutput.php b/templateoutput.php
@@ -14,6 +14,6 @@
 
 ?>
 
-*** Your loop template goes here ***
+<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;?>	
diff --git a/templateoutput.php b/templateoutput.php
@@ -1,4 +1,3 @@
-
 <?php 	
 	if (have_posts()) while (have_posts()) : the_post();
 

diff --git a/templateoutput.php b/templateoutput.php
@@ -0,0 +1,20 @@
+
+<?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];	
+
+?>
+
+*** Your loop template goes here ***
+
+<?php endwhile;?>	
diff --git a/blackandwhiteimages.php b/blackandwhiteimages.php
@@ -1,3 +1,4 @@
+<?php
 add_image_size('thumbnail-bw', 400, 0, false);
 add_filter('wp_generate_attachment_metadata','bw_images_filter');
 
@@ -25,4 +26,5 @@ function bw_images_filter($meta) {
 			break;
 		}
 	return $meta;
-}
+}
+?>
diff --git a/blackandwhiteimages.php b/blackandwhiteimages.php
@@ -1,40 +1,28 @@
-<?php
-
 add_image_size('thumbnail-bw', 400, 0, false);
 add_filter('wp_generate_attachment_metadata','bw_images_filter');
 
-/**
-	 * Takes an image and creates a black and white version of it
-	 * Callback for add_filter('wp_generate_attachment_metadata','bw_images_filter');
-	 * Hat Tip: http://bavotasan.com/2011/create-black-white-thumbnail-wordpress/
-	 *
-	 * @return array
-	 * @author Keir Whitaker
-	 **/
-	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;
+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;
-	}
-
-?>
+	return $meta;
+}
diff --git a/blackandwhiteimages.php b/blackandwhiteimages.php
@@ -0,0 +1,40 @@
+<?php
+
+add_image_size('thumbnail-bw', 400, 0, false);
+add_filter('wp_generate_attachment_metadata','bw_images_filter');
+
+/**
+	 * Takes an image and creates a black and white version of it
+	 * Callback for add_filter('wp_generate_attachment_metadata','bw_images_filter');
+	 * Hat Tip: http://bavotasan.com/2011/create-black-white-thumbnail-wordpress/
+	 *
+	 * @return array
+	 * @author Keir Whitaker
+	 **/
+	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;
+	}
+
+?>
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,3 @@

		<?php
		if (have_posts()) while (have_posts()) : the_post();
No results found