Get the Image – A WordPress Tutorial

get-the-image

Breaking out of Blog Themes

We love WordPress at Item-9 Consulting. Although it began as a blogging platform, I would argue that it’s the most versatile, well-supported, user-friendly content management system available today. Need proof?  Here’s a link to 25 beautiful, unique, free WordPress themes, including a section for 1) blogs, 2) galleries (portfolios) and 3) magazines (news).

So you know about blog themes, but what differentiates those from galleries and magazine themes (which have become very popular in the last two years)? Besides alternative layout structures, the non-blog themes rely on prescient images to draw readers in and help them navigate the site. Even though it’s not WordPress, the New York Times website uses the magazine style layout and images perfectly to entice readers to jump to other articles, and subsequently, stay on its site longer (and of course, the longer a reader is on a site, the more likely he will be to click on advertising, thus generating revenue for the site).

nytimes

Screw Custom Fields

Alright, enough background info. The reason I’m writing this tutorial is to show you the easiest way to automatically pull images into your WordPress site from your posts. A lot of themes use custom fields to handle this task, but I say, why enter information onto a post more than once? How long would WordPress have lasted if you had to enter the post’s title twice? Probably not long, because that would get annoying quickly. Instead of going the custom field route (and using non-WordPress resizing scripts like timthumb.php), I recommend using the Get The Image WordPress Plugin by Justin Tadlock. A quick list of reasons:

  • You can still specify a custom field to pull—great for backwards compatibility with whichever technique you’re replacing, or if you are just super-picky about which image gets used.
  • If you’re lazy like me, the plugin pulls the first (or second or third, etc.) image you attached to your post.
  • If you’re using an image from another post, you can set Get the Image to scan your post and use whichever image it comes across first.
  • No image at all in the post? Specify a default image to use in these cases so your layout never breaks.
  • You can specify the images’ output size (both/either height and width).
  • You can specify which WordPress resized image you want to work with (examples from 2.7 are thumbnail, medium, large and full size).

Sounds great, huh? It definitely is great, but first, there are a few caveats to note:

  1. All this automatic image pulling needs to be coded into the loop. That means you need to be comfortable with the guts of WordPress and php or extremely patient in making mistakes and asking for help (Justin does provide support for all his plugins for the low price of $25/year—well worth it, IMHO)
  2. The documentation is available but it’s incomplete. That’s inevitable considering the limitless possibilities a user could take with the WordPress plugin. Again, invest in the support forums.
  3. You’re not currently going to find this built into many themes (excepting Theme Hybrid from Justin), so you’ll have to do the work yourself.
Zap Props Sandbox Site

Zap Props Sandbox Site

The Code

Time for a practical example. I’m currently working on a new client’s site using the Foliotastic created by ThemeSnack, which I purchased from ThemeForest. The theme has a great design and great support, but I couldn’t get ThemeSnack’s image pulling solution to work. Just like several users on the ThemeForest wrote, I tried everything, but after several hours of frustration I said, “enough” and did what I knew had to be done—throw in the towel and try a new approach. I’ll skip the melodramatics and show you what I began with:


    ID, "post_image_value", true)) { ?>
        <? the_title() ?>

    	<? the_title() ?>

And here’s my changes:


       array('post_image_value'), 'default_size' => 'full', 'default_image' => get_bloginfo( 'template_url' ) . '/graphics/default-image.jpg', 'width' => '620', 'image_scan' => true)); ?>

and according to Justin’s comment below, the code can be further trimmed to one line:

 array('post_image_value'), 'default_size' => 'full', 'image_scan' => true, 'default_image' => get_bloginfo( 'template_url' ) . '/graphics/default-image.jpg', 'width' => '620')); ?>

So Let’s Break it Down

Here’s what the above code does, in order of arguments:

  1. “get_the_image” calls the plugin
  2. ” ‘custom_key’ => array(‘post_image_value’)” pulls an image with the custom field value of “post_image_value”.
  3. If that the custom field is not found, ” ‘default_size’ => ‘full’ ” finds the first attached image and chooses the originally uploaded size.
  4. If no attached images or custom fields are found, ” ‘image_scan’ => true” will find any images that may have inserted from the media library.
  5. If the plugin can’t find any other images, then ” ‘default_image’ => get_bloginfo( ‘template_url’ ) . ‘/graphics/default-image.jpg’ ” will use an image I uploaded to the theme directory (thanks for this code, Justin;).
  6. And finally, ” ‘width’ => ‘620’ ” resizes the width of the image to 620px. I could also specify a height here, but that would likely stretch the image. Instead, I use CSS to hide the image’s overflow and limit the height to 290px. You may not see the whole image, but it’s at least proportionate and I think it looks cool, anyway

That wraps up this tutorial. If you have any questions about the Get the Image plugin, I ask you leave them in the comments. If it’s too technical a question, I’ll refer you to Justin’s support forums I mentioned above. You may also want to visit his post describing the plugin in more detail.

« »

13 Comments

Pingback: links for 2010-03-01 « Martin Metzmacher

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>