By now you’ve probably noticed images beside the post titles here at impNERD. No, I didn’t download a script to do it or use one of the fancy magazine style themes. It is all thanks to a nifty WordPress hack that strips images from the posts gallery and sticks them there.
Some of you might be wondering what the hell I’m talking about, so here is a screenshot:
The image doesn’t have to be next to the title, just somewhere inside the loop.
Lets get down and dirty!
Simply place this code within your loop and the first image uploaded to the gallery will show. The great part is, you don’t even have to show an image in the post.
<?php $images =& get_children( ‘post_type=attachment&post_mime_type=image&post_parent=’ . $post->ID );
if ($images) {
$keys = array_keys($images);
$num = $keys[0];
$firstImageSrc = wp_get_attachment_thumb_url($num);
echo “<img src=\”{$firstImageSrc}\” width=\”44\” height=\”44\” class=\”homepage\” alt=\”"; the_title(); echo “\” title=\”"; the_title(); echo”\” />”;} ?>
You may be wondering what this is, so I’ll break it down:
$images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . $post->ID );
This code checks to see if there is an image uploaded to the gallery.
if ($images) {
if ($images) {
$keys = array_keys($images);
$num = $keys[0];
$firstImageSrc = wp_get_attachment_thumb_url($num);
echo "<img src=\"{$firstImageSrc}\" width=\"44\" height=\"44\" alt=\""; the_title(); echo "\" title=\""; the_title(); echo"\" />";}
Get the keys from the array, then put the first one (the first image listed on the page) and set key value to $num. If there is an image, grab the thumbnail url and place it in html, then print it to the page at 44px by 44px
To add this to your homepage, just place it in the loop.
Tada! All finished. I love love this hack, it makes my homepage look 10x better than before.
Update: You can download a plugin to add post images to your homepage here: HomeImages
Written: Oct 13, 2008
Beau71
October 13, 2008 @ 10:06 am
Great directions!! This does make the home page look nicer. Great find.
Dennis Edell
October 13, 2008 @ 9:04 pm
It does indeed, sweet lookin’
Now tell me all the ways I can REALLY screw things up if I do something wrong LOL
klikrnet
October 13, 2008 @ 10:54 pm
May I know if it is possible to turn this into a plugin and if you intend to do it
Digging into the theme is not fun when time comes for an upgrade or theme change.
Gary R. Hess
October 14, 2008 @ 12:06 am
@klikrnet I could turn it into a plugin for you, but you will still have to edit your theme by placing a function into it.
Gary R. Hess
October 14, 2008 @ 1:13 am
Alright, I made the plugin. The update is at the bottom of this page.
Julius Kuhn-Regnier
October 14, 2008 @ 9:32 am
Great tip! thank you for sharing
I stumbled this
Dennis Edell
October 14, 2008 @ 8:07 pm
Will this be 2.7 compliant?
Gary R. Hess
October 14, 2008 @ 8:20 pm
Yes, it should be.
Geoserv
October 25, 2008 @ 9:57 pm
STUMBLED!
Great post, luckily me current theme came with thumbs, but I wil be redoing the theme and this will come in handy.
bbrian017
October 27, 2008 @ 4:55 pm
This looks really nice! I went to your home page and it’s looks very nice!
I think I might try it out!
Stumbled and Engaged!
Dan
October 29, 2008 @ 11:05 am
Think I found an issue.
What if you dont upload an image to the post, but instead pick an image from your image library? Byt his I mean an image that was uploaded with a different post in the past
When I tested it it didnt work.
Any Ideas?
Gary R. Hess
October 29, 2008 @ 11:30 am
@Dan this isn’t necessarily an ‘issue’, it just isn’t made for that. This strictly grabs images from the specific posts gallery.
If you wish to use default images, you can do so pretty easily by just using an else clause.
ubey
December 26, 2008 @ 4:59 am
cool. i just downloaded it. need to try.