Get the Image – A WordPress Tutorial


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).


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.


  1. Justin Tadlock on May 12, 2009 at 5:28 am

    Great tutorial. And, thanks for spreading the word about my plugin.

    You can actually cut your code from three lines down to one. The <code>get_the_image()</code> function will automatically link to the post (unless turned off, of course).

  2. daniel on June 16, 2009 at 1:37 pm

    Ok I am having a problem with the Get The Image WordPress Plugin. When I try to resize an image , the image is not resized proportionally as is the case with timthumb.php. Is there a way to specify custom sizes that can be later called in the code.

  3. Tschai on July 17, 2009 at 8:29 pm

    I've tried to combine 'Get the Image' plugin with TimbThumb but haven't succeeded in making them workt correctly together.

    Although I feel I'm very close, it seems like get_the_image kinda breaks the timbthum line even if I set the echo to false: I can't get it resized!

    Any suggestions?

  4. Sho on July 22, 2009 at 1:00 am

    OMG!!!! Thank you so much for this tutorial. I could not find anywhere how to insert the default. THANK YOU SO MUCH.

  5. Victor on August 19, 2009 at 10:47 am

    How do I do to show a text next to the image that's cropped?

  6. Govind on August 30, 2009 at 4:30 pm

    I liked reading your blog…keep up the good work.

  7. links for 2010-03-01 « Martin Metzmacher on March 1, 2010 at 11:03 am

    […] Get the Image – A WordPress Tutorial « Item-9 Consulting (tags: wordpress, tutorial, themes, plugins) […]

  8. Ash on August 17, 2010 at 12:30 pm

    Could you give an example of the CSS used to crop the other dimension? I’m seriously struggling to get the image to crop and not stretch! Thanks!

  9. Si on January 21, 2013 at 6:15 pm


    This looks very nearly what im after, but theres one function id like to add.

    I’d like a pics of the day page which trawls through every post from contributors and only prints them if they have a pic somewhere.

    Ideally, only if the pic is of a certain minimum size – say 300px minimum

    Any ideas how this could be done?


  10. matrus on November 7, 2014 at 3:54 am

    Thx for the tip with css hidden overflow.

Leave a Comment