Black and White version of Thumbnail: wp_generate_attachment_metadata

  • Good day, my client needs a carousel with thumbnails on his site. On rollover, he wants the thumbnail to change from black and white to color.

    I installed Cycle2 for jQuery (excellent plugin!) and went ahead to add an additional image size in functions.php and the black and white filter such as explained by Otto and c.bavota here and here.

    The trouble I found is when trying to display the black and white version via:
    get_the_post_thumbnail()

    Using get_the_post_thumbnail( 'thumbnail' ); works well as intended.
    Using get_the_post_thumbnail( 'thumbnail-bw' ); on the other hand did not.

    It displayed the regular colored Thumbnail.

    I read further down in the comments, and kind of understood from Otto that WP does not support adding a new file size that has the exact size as another (in my situation: the thumbnail).

    But in the /wp-content/uploads/ folder, there IS an extra version of the file with “-bw” appended to the filename before the extension.

    I thought I’d trick WP into displaying it, and toyed around with the following code to force the thumbnail_name-bw.jpg url into an img tag via the following:

    if ( function_exists( 'has_post_thumbnail' ) && has_post_thumbnail( $thumbnail->ID ) ) {
						$img_id = get_post_thumbnail_id( $thumbnail->ID );
						$img_data = wp_get_attachment_image_src( $img_id, 'thumbnail' );
						$img_thumb_url = $img_data[0];
						$ext = pathinfo( $img_thumb_url, PATHINFO_EXTENSION );
						$img_dir = wp_upload_dir();
						//$bw_img_thumb_url = $img_dir[ 'url' ] . '/' . basename( $img_thumb_url, ".$ext" ) . '-bw.' . $ext;
						$bw_img_thumb_url = 'https://69.16.204.204/~kaosarch/wp-content/uploads/slide-default-320x126-bw.jpg';
						$default_img = get_the_post_thumbnail( $thumbnail->ID, 'thumbnail' );
						$bw_img = '<img class="bw" scr="' . $bw_img_thumb_url . '" />';
					} else {
						$default_img = '<img src="' . get_template_directory_uri() . '/images/thumb-default.png" />';
						$bw_img = '<img class="bw" src="' . get_template_directory_uri() . '/images/thumb-default-bw.png" />';
					}

    I use the variables I get to build my carousel.

    And HERE is what I have not yet understood:

    In the PAGE SOURCE, both img tags are correctly generated, the urls of both thumbnails version are generated without errors, but the one for the thumbnail displays the thumbnail, and its url in the source view is clickable, while the one for black and white thumbnail displays nothing in the browser, and the url in the source is not clickable!

    If I copy this url, and paste in IN the browser address box, it goes right to the image I want!

    And via FTP, I can quite see the black and white image in the uploads folder, near it’s siblings.

    Is this…. wizardry? black magic? voodoo?

    —————–
    For reference, my
    functions.php code:

    add_action('after_setup_theme','bw_images_size');
function bw_images_size() {
	$crop = get_option('thumbnail_crop')==1 ? true : false;
	add_image_size('thumbnail-bw', get_option('thumbnail_size_w')+1, get_option('thumbnail_size_h'), $crop);
}
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 );
			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;
}

    -> to create the black and white thumbnail
    And to display it (the whole carousel code):

    /*
	Cusom function to list categories and retrieve a random image
	from a random post within each cat >> For bottom page CAROUSEL 

	We want to build the following line foreach cat:
	<div class="slide"><div class="image"><a href="(the_category_permalink)"><img src="(a_random_thumbnail_from_cat)" /></a></div><p>(cat_name)</p></div>
*/
function category_carousel($exclude = '') {
	if( !empty( $exclude ) ) {
		$exclude = 'exclude=' . $exclude;
	}
	$categories = get_categories( $exclude . '&hide_empty=0&order=desc' );
	if( !empty( $categories ) ) {
		$html = '<div id="carousel" class="cycle-slideshow" data-cycle-fx=carousel data-cycle-timeout="0" data-cycle-slides=".slide">';

		foreach ($categories as $cat) {
			$thumbnails = get_posts('numberposts=1&order=rand&cat=' . $cat->cat_ID );
			if( $thumbnails ) {
				foreach ($thumbnails as $thumbnail) {
					if ( function_exists( 'has_post_thumbnail' ) && has_post_thumbnail( $thumbnail->ID ) ) {
						$img_id = get_post_thumbnail_id( $thumbnail->ID );
						$img_data = wp_get_attachment_image_src( $img_id, 'thumbnail' );
						$img_thumb_url = $img_data[0];
						$ext = pathinfo( $img_thumb_url, PATHINFO_EXTENSION );
						$img_dir = wp_upload_dir();
						//$bw_img_thumb_url = $img_dir[ 'url' ] . '/' . basename( $img_thumb_url, ".$ext" ) . '-bw.' . $ext;
						$bw_img_thumb_url = 'https://69.16.204.204/~kaosarch/wp-content/uploads/slide-default-320x126-bw.jpg';
						$default_img = get_the_post_thumbnail( $thumbnail->ID, 'thumbnail' );
						$bw_img = '<img class="bw" scr="' . $bw_img_thumb_url . '" />';
					} else {
						$default_img = '<img src="' . get_template_directory_uri() . '/images/thumb-default.png" />';
						$bw_img = '<img class="bw" src="' . get_template_directory_uri() . '/images/thumb-default-bw.png" />';
					}
				} /* foreach thumb */
			} else {
				$default_img = '<img src="' . get_template_directory_uri() . '/images/thumb-default.png" />';
				$bw_img = '<img class="bw" src="' . get_template_directory_uri() . '/images/thumb-default-bw.png" />';
			}
			$html .= '<div class="slide"><a href="' . esc_url( get_category_link( $cat->cat_ID ) ) . '"><div class="image"><img class="attachment-thumbnail" scr="https://69.16.204.204/~kaosarch/wp-content/uploads/slide-default-320x126-bw.jpg" />' . $bw_img . $default_img . '</div><p>' . $cat->name . '</p></a></div>';
		} /* foreac $cat */
		$html .= '</div>';
		return $html;
	}
}

    Thanks for alla nd any help in advance :S

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter fungusw

    (@fungusw)

    So, to put things in a few points:

    -> The black and white image has “-bw” appended to filename before the extension;

    -> the black and white image has the same size as the thumbnail;

    -> The b&w image IS created by the system, on upload, but the the_post_thumbnail() function and alternative functions do not pull it ( the_post_thumbnail( ‘thumbnail’ ) works, but the_post_thumbnail( ‘thumbnail-bw’ ) doesn’t ).

    I tried to display the b&w image by building a direct link to it (domain.com/wp-content/uploads/the_damn_file-bw.jpg), which WORKS if you copy / paste it in browser, but DOES NOT from the WP site!

    The main question here is not “How to make a BW version of thumb”, but WHY that perfectly working URL is NOT showing the image when on my WP front page, and WHY it’s link is not clickable in FF source view like any other existing image URL??

    Thread Starter fungusw

    (@fungusw)

    ok.

    Stupid markup mistake ??

    img scr instead of img src!

    This got the default image working, but not all.

    So the solution works:

    if the_post_thumbnail() or get_the_post_thumbnail() doesn’t work because your custom image (my b&w thumbnail in this scenario) has the same size as another image size (like thumbnail, medium or large), you can build its url with basename and an appended string on your filename.

    I suppose you also can create your custom image (my b&w thumb) 1px larger so that you can use the_post_thumbnail(), and resize it with css in your gallery ?? which I am going to try now.

    Thread Starter fungusw

    (@fungusw)

    So, to use the technique illustrated in this article, I had to build my thumbs url this way:

    if( get_the_post_thumbnail( $post->ID ) ) {
				// Default thumb
				$default_img = get_the_post_thumbnail( $post->ID, 'thumbnail' );
				// Monochrome thumb
				$img_data = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID, 'thumbnail' ) );
				$img_thumb_url = $img_data[0];
				$ext = pathinfo( $img_thumb_url, PATHINFO_EXTENSION );
				$img_dir = wp_upload_dir();
				$bw_img_thumb_url = $img_dir[ 'url' ] . '/' . basename( $img_thumb_url, ".$ext" ) . '-bw.' . $ext;
				$bw_img = '<img class="bw" src="' . $bw_img_thumb_url . '" />';
			}

    I am sure my lousy multi-useless-stages can be written more elegantly by anyone who knows better ??

    And Otto’s technique works with the regular wp calls as long as you give a size a couple of pixels bigger to the monochrome version, and style it to the same size as the thumbnail with css.

    Hope it helps someone out ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Black and White version of Thumbnail: wp_generate_attachment_metadata’ is closed to new replies.