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!

Ivaylo Nikolov

Tyler Thompson

Yoo Tae Han

Lucas Tsolakian

Magpie Studio

Alexa Falcone

Will Hammond

Emma du Pille

Young

Marque Creative

Tony Hung

Justin Marcus

Joshua Distler

No-Do

I’ve taken the liberty of separating the items by what AJAX library they utilize.

MooTools Tune Ups

Form Validation

Validate forms on the fly, without any unnecessary page loads or clunky javascript or server-side coding.
See how it works → | Download →

Moosture

Provide your visitors with gesture-based navigation. It can be overkill when it’s used too much, but in the right place it can be great.
Visit the site → | Download →

Using Opacity to Focus

Allow visitors to focus only on what element they’re currently reading.
Visit the site & Download → | See how it works →

Product Highlighter

Give people browsing your site a very smooth popup to display more information. Once you see it, you’ll recognize it.
Visit the site → | See how it works → | Download →

MooFlow Gallery

If you use Macintosh, you’ll get this one right away. Give your photo gallery the CoverFlow treatment. It also loads additional galleries on the fly.
Visit the site → | See how it works → | Download →

jQuery Tune Ups

Password Input, iPhone Style

The problem with password inputs is that every character is an asterisk. This tuneup changes each character on a delay, giving folks filling in a form the chance to correct typos as they go.
Visit the site → | See how it works → | Download →

Dynamic Breadcrumbs

Breadcrumbs are an excellent way of showing hierarchy navigation, giving visitors a sense of place. But they don’t have to take up much space.
See how it works → | Download →

Infinite Carousel

Carousels and slide galleries are great, except they always reset to the the beginning image if you scroll too many times. Infinite Carousel just keeps it going.
Visit the site → | See how it works →

Highlight Tabular Data

Tables are notoriously hard to read, and the more data the worse it is. One way to ease the difficulty is by providing a highlight on each row, column, and cell so the eye has something to follow.
Visit the site → | See how it works → | Download →

Custom Missing Image

How many times have you had a broken image? This tuneup provides a custom image in the event an image path doesn’t work.
Visit the site → | See how it works →

Coming Soon

Part Two will be following soon; check back in a few days!