Justin Tadlock

Get The Image WordPress Plugin

In version 0.3+, the methods of calling this plugin have changed from previous versions. See page two of this post if you need instructions on how to use an older version of the plugin.

One of the problems with magazine-type WordPress themes has always been that they require more work than an average theme because of the extra image uploading.

I’ve always held the belief that you get back what you put in. The more time and energy you put in your site, the better it will look.

Of course, that’s just a lot of work sometimes, especially if you’re a more casual blogger and simply want your site to look good with extra images that make your posts stand out. My goal is to cut back on some of the work. So, I created a new PHP image script that should help out with that.

I’ve seen some other image scripts that do similar things, or even allow you to add one custom field and it resizes and crops the image for you.

This plugin will allow you to have full control over images displayed, or it takes the power of WordPress and uses its image cropping methods. This makes for a much smaller file size. Right now, the file is under 7kb.

What the plugin does

I like using custom fields to define images for my posts, so that’s what this script was built upon. So, the script looks for the custom fields Keys that you define. If that Key has a Value (should be an image URL), the image is displayed with your post.

If there is no custom field used, the script looks for the first image attached to your post. If there is one, then it grabs that image and uses it.

If there are no custom fields used or images attached to your post, the script has the capability of scanning the post for other images or displaying a default image that you’ve set.

If that’s all Greek to you, don’t worry; the readme.html file included with the plugin will explain everything.

Download the plugin

Note to my theme users: If you’re using any of my themes, don’t install this plugin. This functionality is built into your theme.

  • Description: This is a highly intuitive script that gets an image either by custom field input or post attachment.
  • Requires: WordPress 2.9+
  • Support: Support forums
  • Download (WP.org plugin repository)

Please don’t use my contact page or the comments section below to ask support questions. Use my support forums at Theme Hybrid, which is where I handle all support questions for my WordPress projects.

Known bugs:
Version 0.3: The default image and image scan features aren’t working. Fixed in version 0.3.1.

How to use the code

There are three basic sections: the custom fields array, default size, and default image. Take a look at what it looks like:

echo get_the_image(array('Thumbnail','My Thumbnail'),'thumbnail','/wp-content/my-image.jpg');

The first part, or the custom fields array, checks for Values assigned to whatever Keys you put there. For our example, we’re using “Thumbnail” and “My Thumbnail.” The script first checks to see if Thumbnail is set. If not, it checks for My Thumbnail.

The second part, tells the script what the default image size should be, which we’ve used “thumbnail” for this. This is important because it tells the script to look for the WordPress-generated thumbnail if there are no custom field images found. You can use the values “thumbnail,” “medium,” or “full” for this (those are three image sizes WordPress generates).

The third part, tells the script that if there are no images found at that point, to display the image found at “/wp-content/my-image.jpg.”

For the rest of this post, I’ll leave the third part off as I assume it won’t be used as much and will default false if not added.

There are two different ways to use this:

echo get_the_image(array('Thumbnail','My Thumbnail'),'thumbnail');

echo get_the_image_link(array('Thumbnail','My Thumbnail'),'thumbnail');

The first line simply displays an image. The second displays an image and adds a link to the post around the image.

Sounds cool, but you need a practical application for this

Let’s suppose you’re adding this to your category pages. So, take a look in your category.php or archive.php file. Each theme will be a little different, but here’s a general example of the section that displays your post content:

<div class="entry">
    <?php the_excerpt(); ?>
</div>

Now, we need to stick our code in there somewhere. Let’s say we want our image to appear just before our content. Add the image script in there.

<div class="entry">
    <?php echo get_the_image_link(array('Thumbnail','My Thumbnail'),'thumbnail'); ?>
    <?php the_excerpt(); ?>
</div>

Now, refresh any category page. If there are any images attached to those posts, they’ll now have thumbnails displayed before your content.

Styling this thing

CSS classes are generated for you automatically. Let’s say you use this code for your category pages:

<?php echo get_the_image_link(array('Super Mario','Donkey Kong'),'thumbnail'); ?>

If you add an image to the custom field Key of “Super Mario,” you’ll have these classes to work with in your CSS:

.super-mario { }
.thumbnail { }

If you add an image to the custom fiekd Key of “Donkey Kong,” you’ll have these classes to work with:

.donkey-kong { }
.thumbnail { }

If you just upload an image through the media uploader but don’t add it to a custom field, your CSS class would be:

.super-mario { }
.thumbnail { }

So, what this does is add a class for whatever custom field is used and the default image size. If no custom field is used, then the default image size and the name of the first custom field will be your classes.

Test this thing out

You can use this for almost anything and in nearly any template file. Want a feature image? Done. Want thumbnails in your sidebars? Done.

I’ve been refining this plugin for weeks, so everything should be working pretty good. It’s the culmination of about a year of working with custom fields and a few weeks of working with my Cleaner Gallery plugin. Essentially, I’ve been building this plugin for about a year.

There are a lot of different things you can do with it: much more than I’ve had the room to explain here in this basic intro. I think it will work well with magazine-type layouts, or possibly, for those of you that want to spruce up your blog a bit. I’m even running it on my blog just to test it out for y’all — which reminds me — I need to spruce some of my own images around here.