Automatic Article Image for Wordpress

Here’s something I ran across after switching back to Wordpress from Textpattern. TXP has a built in article image feature where you put the ID number of the image into a field in your post and it places the image wherever you specify. Now, Wordpress doesn’t have this built in, but it’s not too difficult to do.

Using a custom field and a few short conditional statements you can set up your own automatic article image. Here’s How:

First, the easy part, setting up the image

1. When you click Save and Continue Editing Wordpress saves your post as a draft so you can keep writing. WP also assigns the post an ID number. If you look up in the address bar you’ll see the URL change from ...post-new.php to ...&post=123 and 123 is the post number. Remember that number.
2. Now save your image as 123.jpg (replacing 123 with your actual post number) and upload to your images folder.

Next, tell WP this post has an image associated

1. Scroll down to your “custom fields” area (you may not have used this before, but don’t be afraid). :)
2. Under KEY, type “Photo Credit” in the first field
   1. When you’ve done this once, you can from then on, choose it from the drop down list.
3. In the Photo Credit VALUE field, enter one of the following:
   1. Y for “yes there is a photo, but it’s my photo so no credit is given”
   2. <a href="http://linktophoto.com">Photographer Name</a>
   3. Photographer Name (no link)

Now set the image to display on your posts page

This you only have to do once

First, open index.php (or home, single, etc.) and figure out where you want your image to appear. I have mine appear only on single post pages and just inside the “post” div just above <?php the_content(); ?>. Now insert the following code:

<?php
        $photo = get_post_meta($post->ID, "Photo Credit", true);
        if($photo != ""|$photo == "Y") {
            echo '<img src="/files/images/';
            echo the_ID();
            echo '.jpg" alt="Article Image">';
        }
?>

1. The first part of this get’s the value of the “Photo Credit” field. You can make the name of that field anything you want as long as it matches this part.
2. The second part basically says “if there is a photo, do what comes next, otherwise, do nothing here.” It says “if the field is not empty OR if it says “Y”, then do this…
3. The “echo” part is what appears if you have a photo (Y or a credit). Change /files/images to the directory where your photos are located, and .jpg to .png or whatever you use most. You’ll need to make all of your images this file type. This tells WP to look for an image named after your post ID number.

Finally, display the credit

You can display the credit following the image; I have mine appear at the end of the post but you can do it however works best for you. If you’d like to do this to, place the following code just below <?php the_content(); ?>:

<?php
    if($photo == ""|$photo == "Y") { } else {
        echo '<p>Main Photo: ';
        echo $photo;
        echo '</p>';
    }
?>

1. Note the first part from before is missing because you’ve gotten that information once, you don’t need to get it again. So now you’re just saying “if there’s a credit, show it”.
2. Here, the “if” statement is different because we only want to show the credit if there is actual credit given. So now it’s saying “if the field is empty or Y, do nothing, otherwise, do what comes next.”
3. Finally, echo a paragraph containing the contents of the “Photo Credit” VALUE field.

That’s pretty much all there is to it. Of course you can customize it any number of ways, but that’s how I use it, hope that helps!

---

Now after all this, you may ask, why not just do <img src... manually at the beginning of each post and I have a rew reasons I don’t do this:

1. Now that I’ve set it up, it’s faster for me because all I have to do is rename the image to match the post ID and upload it and it automatically appears on the right post if I use the right post ID number.
2. It doesn’t appear in my excerpts, only on the post page.
3. I can now make this image appear anywhere dynamically. So later, if I rearrange my archives and want a thumbnail of each post next to them, I can use PHP/Wordpress to automatically call <img src="/files/images/<?php the_ID(); ?>.jpg" alt="article thumb" /> like this and it will grab all of the post images assigned. I can even use conditional statements to grab a generic thumb if there isn’t an image attached. There are a million possibilities now that my images are attached dynamically!

Share Tweet me (but don't mistweet me)

Copyright © 2008 – 2010 Natalie Jost