Get the Image – A WordPress Tutorial10

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

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:

64
65
66
67
68
69

<a href="<? the_permalink() ?>">
    <?php if(get_post_meta($post->ID, "post_image_value", true)) { ?>
        <img src="<?php bloginfo('template_url'); ?>/img_resize/timthumb.php?src=<? echo get_post_meta($post->ID, 'post_image_value', true) ?>&amp;w=620&amp;h=290&amp;zc=1" alt="<? the_title() ?>" />
    <?php } else { ?>
    	<img src="<?php bloginfo('template_url'); ?>/graphics/default_thumb.gif" alt="<? the_title() ?>" /><? } ?>
</a>

And here’s my changes:

64
65
66

<a href="<? the_permalink() ?>">
      <?php get_the_image(array('custom_key' => array('post_image_value'), 'default_size' => 'full', 'default_image' => get_bloginfo( 'template_url' ) . '/graphics/default-image.jpg', 'width' => '620', 'image_scan' => true)); ?>
</a>

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

64

<?php get_the_image(array('custom_key' => 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.

Related Posts

1. I’m Speaking at a Chicago WordPress Workshop on 11/14 + Link Dump
2. WordPress Plugins are About to Get Real
3. How Freelancers Can Use Retainers to Remove the Guessing From Project Estimates
4. Glengarry Glenn Ross and Web Marketing
5. Read the Best WordPress Book Ever!