Fire Studios

Archive

Contact

Categories

  • Coding
    • CSS
    • HTML/Javascript
    • PHP
  • Design
  • Freebies
  • General
  • Internet
  • Interviews
  • Plugins
  • Podcasts
  • Reviews
  • Screencasts
  • Tutorial
  • Weekday Tips
  • Wordpress

Podcast

Even More Advanced Thumbnail Selection in WordPress

Even More Advanced Thumbnail Selection in WordPress

About 3 weeks ago I did a screencast on how to build a dynamic thumbnail selector for WordPress. When I wrote that function, I noticed that if the post was in more than 1 of the specified categories, then it choose the first one (alphabetically). This bothered me enough that today I devised a system that will select the category based on a hierarchy we give to the options.

View the End Result

Our first objective is to add an order to which we want our categories to apply. To do this, we're going to create keys for our values in the array in the order that they will take precedence, I'm going to go from largest to smallest, with largest being the highest precedence. (You can do the opposite by replacing the later function "max()" with "min()")

$categories = array(
			'3'=>'coding',
			'2'=>'design',
			'0'=>'general',
			'1'=>'weekday-tips',
			'4'=>'wordpress'
			);
$category['coding'] = 'wp-content/uploads/web_coding_collage.jpg';
$category['design'] = 'wp-content/uploads/256px-Photoshop_logo.svg.png';
$category['general'] = 'wp-content/uploads/fs2009-200x200.png';
$category['weekday-tips'] = 'wp-content/uploads/weekday-tips.png';
$category['wordpress'] = 'wp-content/uploads/wordpress-logo-notext-rgb.png';

Once that's in place, we can start the process to get the desired category image. To start off, we'll create an "if" statement checking that the Post-Image Custom Field is empty and that our post is in one or more of the categories in our list.

// In one of our specified categories
if (empty($custom_field) && in_category($categories)){ // Custom Field is empty AND in our specified categories
}

Now we'll run a foreach to create a comma separated array of the Article's categories. (Note the "." before the "=")

foreach((get_the_category()) as $post_cats){ // loop through the post categories
	$rawr .= ','.$post_cats->category_nicename; // Create comma separated array (CSA) of the Post's categories
}

Next we need to take that CSA and make it a proper array.

$return = explode(',' , $rawr); // Explode the CSA into a true array

Now we'll compare the Article's categories to our Hierarchy list and create a new array with the matches.

$search = array_intersect($categories, $return); // Compare the arrays and create new array of matches

Now we have our matches, but to gauge the hierarchy, we need to keys of from the Hierarchy list. So we'll do another foreach and run an "Array_Search" to do just that.

foreach($search as $option){ // Loop though each match
	$key .= '|'.array_search($option, $categories); // Create CSA of keys from our hierarchy list
}

Then we'll take that CSA we just made and turn it into a proper array.

$result_keys = explode('|' , $key); // Explode Keys into true array

Next we'll obey our hierarchy by choosing the highest key from the array using "max()".

$highest = max($result_keys); // Grab the key with the highest value

All that's left to do is re-grab the value of our key and echo out the final image code.

$selected = $categories[$highest]; // Get our success result
echo bloginfo('url')."/".$category[$selected]; // write the url
return false; // Prevent further Ifs from running

Our End Result

$categories = array(
					'3'=>'coding',
					'2'=>'design',
					'0'=>'general',
					'1'=>'weekday-tips',
					'4'=>'wordpress'
					);
$category['coding'] = 'wp-content/uploads/web_coding_collage.jpg';
$category['design'] = 'wp-content/uploads/256px-Photoshop_logo.svg.png';
$category['general'] = 'wp-content/uploads/fs2009-200x200.png';
$category['weekday-tips'] = 'wp-content/uploads/weekday-tips.png';
$category['wordpress'] = 'wp-content/uploads/wordpress-logo-notext-rgb.png';

// In one of our specified categories
if (empty($custom_field) && in_category($categories)){// Custom Field is empty AND in our specified categories
	foreach((get_the_category()) as $post_cats){ // loop through the post categories
		$rawr .= ','.$post_cats->category_nicename; // Create comma separated array (CSA) of the Post's categories
	}
	$return = explode(',' , $rawr); // Explode the CSA into a true array
	$search = array_intersect($categories, $return); // Compare the arrays and create new array of matches
	foreach($search as $option){ // Loop though each match
		$key .= '|'.array_search($option, $categories); // Create CSA of keys from our hierarchy list
	}
	$result_keys = explode('|' , $key); // Explode Keys into true array
	$highest = max($result_keys); // Grab the key with the highest value
	$selected = $categories[$highest]; // Get our success result
	echo bloginfo('url')."/".$category[$selected]; // write the url
	return false; // Prevent further Ifs from running
}

Our complete Function

// Generate correct post-image links
function postImage(){
	$custom_field = get_post_custom_values("post-image");
	$imguri = $custom_field[0]; // Get first result of Post-image field
	$offsite = preg_match("/http:\/\//", $imguri); // Check for "http://"
	$longurl = preg_match("/wp-content/", $imguri); // Check for "wp-content"

	$categories = array(
						'3'=>'coding',
						'2'=>'design',
						'0'=>'general',
						'1'=>'weekday-tips',
						'4'=>'wordpress'
						);
	$category['coding'] = 'wp-content/uploads/web_coding_collage.jpg';
	$category['design'] = 'wp-content/uploads/256px-Photoshop_logo.svg.png';
	$category['general'] = 'wp-content/uploads/fs2009-200x200.png';
	$category['weekday-tips'] = 'wp-content/uploads/weekday-tips.png';
	$category['wordpress'] = 'wp-content/uploads/wordpress-logo-notext-rgb.png';

	// In one of our specified categories
	if (empty($custom_field) && in_category($categories)){// Custom Field is empty AND in our specified categories
		foreach((get_the_category()) as $post_cats){ // loop through the post categories
			$rawr .= ','.$post_cats->category_nicename; // Create comma separated array (CSA) of the Post's categories
		}
		$return = explode(',' , $rawr); // Explode the CSA into a true array
		$search = array_intersect($categories, $return); // Compare the arrays and create new array of matches
		foreach($search as $option){ // Loop though each match
			$key .= '|'.array_search($option, $categories); // Create CSA of keys from our hierarchy list
		}
		$result_keys = explode('|' , $key); // Explode Keys into true array
		$highest = max($result_keys); // Grab the key with the highest value
		$selected = $categories[$highest]; // Get our success result
		echo bloginfo('url')."/".$category[$selected]; // write the url
		return false; // Prevent further Ifs from running
	}

	// Post-image matches category
	if (!empty($custom_field) && in_array($imguri,$categories)){
		echo bloginfo('url')."/".$category[$imguri];
		return false;
	}

	// No thumbnail avaliable
	if (empty($custom_field) && !in_category($categories)){ // Custom Field is empty AND NOT in our specified categories
		echo bloginfo('template_directory')."/images/nothumbnail.png";
		return false;
	}

	// Hotlinked image from custom field
	if ($offsite == true) { // image starts with "http://"
		echo $imguri;
		return false;
	}

	// Custom field with relative link like: "wp-content/uploads/example-image.jpg"
	if ($offsite == false && !empty($custom_field)) { // Custom Field is filled in but not a hotlinked image
		echo bloginfo('url')."/".$imguri;
		return false;
	}

	// Custom field with relative link like: "example-image.jpg"
	if ($offsite == false && !empty($custom_field) && $longurl == false) { // Custom Field is filled in but not a hotlinked image
		echo bloginfo('url')."/wp-content/uploads/".$imguri;
		return false;
	}
};

Reader's Thoughts

  • Flex Guy

    Nice job, thanks for sharing your way of work.

  • Water Car

    You rock. World needs more souls like you.

  • Brian

    This is exactly what I'm looking for. What is the code I need in the home.php to call the thumb? I tried this but failed :(

    ID, "post-image", true) ): ?>

    <a href="" rel="bookmark"><img style="float:left;margin:0px 10px 0px 0px;" src="ID, "post-image", true); ?>" alt="" />

    <a href="" rel="bookmark"><img style="float:left;margin:0px 10px 0px 0px;" src="/images/thumbnail.png" alt="" />

Your Thoughts?

 

This is that small text that tells you not to steal our stuff, but we don't really care too much.