Creating A Line Of Images In Your WordPress Theme With The Attached Image

/ Wordpress / by Paul Robinson / 6 Comments
This post was published back on February 23, 2009 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

Phew. That’s quite a title. This tutorial was requested by Heather Lickliter yesterday who wanted a line of images similar to that of another theme, namely the Album theme.

Using The Attached Image it’s really easy to do. The hard part is making the custom query for WordPress. I also believe that Heather wants to include it on a WordPress page so I’ll include how to do that. Hopefully other may find this helpful too. 🙂

Creating The Page Template

Ok, so first off we need to create the page template to put this bit of code on. To do this create a new blank page and save it in your templates directory with a nice name, use hypens (-) instead of spaces. In general you want to put this in your page:

The template name is essential as it tells WordPress to use it as a page template. Just remember that inbetween the <?php get_header(); ?> & <?php get_footer(); ?> you need to put your HTML content, you know so that it looks like your other pages.

Creating The Custom Loop

Right, now we have our custom page we need to create a custom loop. The reason for this is that the page will not have the right information stored to get the images you want. Do this in the place you want the line of images to show.

This whole bit basically stores WordPress’ current query in a temporary variable & then creates a new one. Then we store the old post variable and then put the new one from the new query in it’s place.

In the bit that says WP_Query('numposts=10'); you need to customise it to what you want the query to do. The wordpress page for queryposts gives all the parameters you can use. The basic idea though it if you want to show 10 posts from the album category the is would look like this WP_Query('numposts=10&category_name=album'); just remember it is the categories slug not it’s name.

Adding The Images

To add the images it’s as simple as using The Attached Image. Since you may be using the plugin else wear we will use legacy commands to set what The Attached Image does. If you are only using it here then feel free to set the options in the options page.

Here’s the code you need. It comes straight after the previous code.

I’ll explain the code for those who want to know. The first line checks to see if we have posts & if so starts a loop to go through them. The Attached Image is obvious, I hope. The parameters use the thumbnail size of image & then we resize them using the width & height parameters. You can specify a class using css_class and then use CSS to specify a width and height which some people are adament that it’s better, I’m undecided.

Finally we end the loop & the if and then restore the previous query & post variables.

That’s It

What You Should End Up With. This is with the query set for three posts.Well that’s about it. That code worked for me & I can’t see any reason for it not working for everyone else. If you have any problems let me know & I’ll see what I can do to help.

Also Heather let me know if that works. 🙂 If not I’ll help you as much as I can. 😉

Edit: I have managed to sort out a screenshot. I couldn’t do one at first since I didn’t have access to my localhost, but I’ve managed to cook one up for you. 😉


Author’s gravatar

Okay, it all mostly worked. 😛
I had the code running with the default images just fine. I wondered “why the hell is it showing default images only for all of them?” then I realized “Oh duh, I pull the images from outside URLs, they’re not attached!” so then I replaced one with an uploaded image and it broke the code.
I have the size attributes set correctly in the code as well as the options. The error I get is “Fatal error: Call to undefined function image_get_intermediate_size() in /home/****/***/ on line 367” and my page is

I edited out your full server path. It’s a little risky leaving that for everyone to see. 🙂

Author’s gravatar author

Ok I think I know what your problem is. Your global generator tag for WordPress says you are using version 2.3.3 and my plugin only works for WordPress 2.5 and above since the function it is complaining about is only available in the most recent versions of WP.

You should really update since there has been a lot of security flaws fixed since 2.3.3. My version is currently 2.8-bleeding-edge but you should really use 2.7.1 since I like to test the development versions. If you upgrade, which I’ll be happy to help you with if you do, it should work without any problems.

Author’s gravatar

Hah. I was wondering up a quick upgrade would fix it. I’ll do that in 5 min and check it. 😛

Author’s gravatar author

No problem. Let me know if you need any help.

By the way after you have upgraded I don’t know if you know, but the versions of WP after 2.7 have a auto upgrade feature so you don’t have to do it by FTP anymore. 🙂 So when 2.7.2 comes out you just have to hit upgrade and it does it all for ya. 😀

Author’s gravatar

Chuh-ching!! It all works now, and now I have to go back and fix all the non-attatched images.
I swear to god, the next time I have money in my paypal account you’re getting a big fat donation. You’re the best.

Author’s gravatar author

No problem Heather. Glad it works and If you need anything else at any time just give me a shout. 🙂

Thanks for that too. 😀

Older Comments
Newer Comments

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more