public

Generate B + W images in WordPress

  • Download Gist
blackandwhiteimages.php
PHP
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
<?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 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;
}
responsiveimage.js
JavaScript
1 2 3
if($('body').is('.single, .page-template-page-archive-php')) {
responsiveEnhance($('.featured-image img'), 400);
};
templateoutput.php
PHP
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
<?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;?>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.