Pixellica: Creativity Blooms

Free WordPress Script for Custom Post Images

8 Comments Oct 30, 2009 / in Wordpress

Blogs look very nice with a flashy image above each post on the index page. The problem is when a WordPress theme comes configured like this you have to use complicated pre-coded Custom Fields in each post or go without the image altogether. There’s no allowing for those times when it would be so much easier to have the index page grab the first image in the post — or even for those rare times when you don’t have any image and just want a default one put up there.

Download | Installing | Using | Customizing | Filters

A while ago I was developing a theme for giving away (actually, for using when I launched Pixellica but I’ve since used a third-party them for different reasons) — and in the process of developing it I realized there was no easy way to solve the problem above. Either you are forced to use a weird Custom Field or hard-code some image in place.

Here’s the solution I came up with. It utilizes Darren Hoyt’s fantastic Tim Thumb resizing script (which I include in the download package, unabridged, linked and credited. Altogether: Darren is cool.)

It involves a simple amendment to the index page of your WordPress theme, and uploading no more than three files to no more than three directories. It’s very simple.

Download the Package

What It Does

The function works on a three-test basis, like this:

• First: Check to see if the author has specified a Custom Field image. If so, it means there is a specific image the author wants to use, so it better use ie
• Second: If no Custom Field image is specified, then grab the first image from the post in question
• Third: If there are no images in the post itself, then use a fail-safe image already on the server (If desired. You can toggle this option off)

Got that? Check for a Custom Image. If not, check for a post image. If not, use a default image. Simple.

Installing GetImage

Here’s the script in all it’s beauty (a commented version is in the download package)

function getImage($h,$w,$filter) {

$customIMG = "image-featured";

 global $post, $posts;
 ob_start();
 ob_end_clean();
 $output = preg_match_all('//i', $post->post_content, $matches);

 $values = get_post_custom_values($customIMG);
 $checkValues = get_post_meta($post->ID, $customIMG, true);

 $echoIMG = "images/default-image.jpg";
						
 if ($checkValues) {

 $echoIMG = "images/$values[0]";
		
 } elseif ($output) {
					
 $echoIMG = $matches [1] [0];
					
 }
						
 if ($filter) $filter = "&f=$filter";
 
 return "";
					
}

Using GetImage

Installing

Upload the TimThumb file to your theme’s “scripts” directory (create it if it doesn’t exist).

Upload “default-image.jpg” to your theme’s “images” folder (again, create it if it’s not there).

Open your theme’s “functions.php” file and paste in the contents of the ”GetImage.php” file.

Using

Here’s the code you insert into your theme wherever you want the image to appear:

<? php echo getImage( height, width, "" );?>

Replace height and width with the dimensions you want for the image. For example, here on Pixellica I use this function to display images on the index, category and archives pages. I want the image to be 250 pixels high and 570 pixels wide. So the code I use is this:

<? php echo getImage(250,570,"");?>

The function operates inside the WordPress loop — and grabs whatever image is attached to each post as a Custom Field, or, Grabs the first image from each respective post.

To use GetImage for a Custom Field, add a Custom Field on each post called “image-featured” and give it an absolute path to the image you want to use.

Customizing GetImage

The Custom Field Name

By default the Custom Field name for GetImage to use is “image-featured” — but this is easily customized. If you want to change the name of the Custom Field, go into the GetImage function and find this line:

$customIMG = "image-featured";

And change the value of the variable (“image-featured”) to whatever you want. You can call it LateForDinner for all I care.:)

Styling the Image

GetImage attaches a unique class to each image tag in the output HTML, so you can style them specifically. The unique class name is

featuredIMG

You can use CSS to do whatever you want with the image. I use it to apply a slight rounded corners effect.

Filters

Notice there’s an empty string variable in the function call. This is where you can use the filters from the TimThumb script. A list of all filters can be found on line 30 (or thereabouts) in the TimThumb.php file. The only ones I use are “greyscale”, “blur” and “smooth” for which the codes are “2”, “8” and “11” respectively. So to make the image greyscale, for example, use this:

<? php echo getImage(250,570,"2");?>

…and the image will be resized to 250 pixels high by 570 pixels wide and display in black and white.

Using the Function

I don’t care who downloads the function. I would ask you don’t use it on any website that glorifies porn or violence. And also, it took me a few hours of my life to code and troubleshoot this script, so I’d appreciate it greatly if you’d leave the credit in place.

Does it work for you? Do you have any thoughts or suggestions, or even a way to make it work better? Comment and share your ideas!