Ever wonder how to pull the images attached to a WordPress post, to display as thumbnails on your homepage for instance? Here's a fairly simple way to get it done.
When you upload an image (or other media file) through the Write Post or Write Page panel, WordPress remembers which post that file is attached to. This is a great feature if you want to pull some of the attached images for use as thumbnails on your blog’s homepage for instance – similar to the way the Tutorials and Blog indexes are set up on this site.
Inside and Outside The Loop
For my project, I needed to get the attached images for a page outside of The Loop, so in this tutorial I’ll show you both ways. First inside the loop, then I’ll show you the changes to make to get this done outside the loop.
Also, I’m trying a new strategy this time around… Instead of giving you the complete code and then going through each section step by step, I’m shortening this post a bit by only showing the complete code…but well-commented so you can see what’s going on. Let me know what you think about this strategy and if you’d prefer to see the step by step break down like I’ve done in previous tutorials.
First, Inside The Loop
One thing to keep in mind is that inside the loop, the $post object is set, and so we can access its various properties using the $post->;PROPERTY syntax. So we first need to create a new function in our functions.php file.
function bdw_get_images() {
// Get the post ID
$iPostID = $post->ID;
// Get images for this post
$arrImages =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . $iPostID );
// If images exist for this page
if($arrImages) {
// Get array keys representing attached image numbers
$arrKeys = array_keys($arrImages);
/******BEGIN BUBBLE SORT BY MENU ORDER************
// Put all image objects into new array with standard numeric keys (new array only needed while we sort the keys)
foreach($arrImages as $oImage) {
$arrNewImages[] = $oImage;
}
// Bubble sort image object array by menu_order TODO: Turn this into std "sort-by" function in functions.php
for($i = 0; $i < sizeof($arrNewImages) - 1; $i++) {
for($j = 0; $j < sizeof($arrNewImages) - 1; $j++) {
if((int)$arrNewImages[$j]->menu_order > (int)$arrNewImages[$j + 1]->menu_order) {
$oTemp = $arrNewImages[$j];
$arrNewImages[$j] = $arrNewImages[$j + 1];
$arrNewImages[$j + 1] = $oTemp;
}
}
}
// Reset arrKeys array
$arrKeys = array();
// Replace arrKeys with newly sorted object ids
foreach($arrNewImages as $oNewImage) {
$arrKeys[] = $oNewImage->ID;
}
******END BUBBLE SORT BY MENU ORDER**************/
// Get the first image attachment
$iNum = $arrKeys[0];
// Get the thumbnail url for the attachment
$sThumbUrl = wp_get_attachment_thumb_url($iNum);
// UNCOMMENT THIS IF YOU WANT THE FULL SIZE IMAGE INSTEAD OF THE THUMBNAIL
//$sImageUrl = wp_get_attachment_url($iNum);
// Build the <img> string
$sImgString = '<a href="' . get_permalink() . '">' .
'<img src="' . $sThumbUrl . '" width="150" height="150" alt="Thumbnail Image" title="Thumbnail Image" />' .
'</a>';
// Print the image
echo $sImgString;
}
}
Next you just need to call the function from wherever you want the image to show up at.
bdw_get_images();
A couple things to note about the above code:
- We’re only getting the first attached image’s thumbnail. If we wanted to display all the attached images, we’d have to use a for-loop to loop through each of the values in
$arrKeys. - The first attached image is the first image uploaded, and not the first image according to the order you’ve sorted them in the WordPress gallery admin. If you want to get the first image according to the gallery menu order, I’ve added the simple bubble sort above (commented out).
- If you want the full-size image instead of the thumbnail, use
wp_get_attachment_url()instead ofwp_get_attachment_thumb_url(). - I’ve hard coded the width and height of the thumbnail to be 150px by 150px. You could add a width and height parameter to the function declaration and pass those parameters when calling the function if you need those numbers to be flexible.
How to Do It Outside the Loop
The main difference to get this done outside the loop is that the $post object won’t be set (or rather it will be set, but can’t be used reliably), so we need to either know the post ID we want the images for, or we need to be on the post/page that we want the images for, but just outside of the loop for that post/page.
If we’re on the post/page but outside the loop (i.e. in the sidebar), we can use the get_the_ID() function to get the ID of the current post/page. So instead of $iPostID = $post->;ID, we could use $iPostID = get_the_ID().
If we want to pull the images from a post/page other than the one we’re currently viewing, we’d have to pass the post ID of the post/page we want to the bdw_get_images() function as a parameter when calling the function.
Thanks for the heads up on that Keith. I try to catch those, but WordPress changes it every time I edit a post, so I miss those sometimes.
Your code snippet is turning ampersands into html entities which breaks the php
I'm using v 2.6. The postId is not getting passed to the function. I modified the function to take in the postId
function bdw_get_images($postId) {$iPostID = $postId;
...
and in my loop
< ? bdw_get_images($post->ID); ?>This is great, but is there a way to do it with images that were embedded from flickr?
Thanks man! Saved me some precious time! Cheers from Brazil.
Thanks a lot, this hack works like a charm…
This is a great plugin, but what about images that you add to your post that are already in your media library? I found that it will not make the thumbnail.
gp, I believe the thumbnail is created either when a post is saved or when the image itself is uploaded, so the thumb should exist, and if you add that image to a post, WordPress should return that thumb url with the wp_get_attachment_thumb_url() function. Are you saying the thumbnail’s not being returned with that function?
it could be me, but I foudn that if I “link” an image from the media library it will not find the linked image. Only if I upload an image with that post. It works very well for that. But what if my post wants to use an image that was uploaded and attached to another post… I might not be making sense, or it could be a lack of testing on my part.
This is a problem I’m having with my themes too! Right now I’ve been using Justin Tadlock’s Get-The-Image Plugin, but every onece in awhile my image isn’t getting recognized as attached.
His plugin can scan the post for images, but can’t resize them from there.
I sure hope wordpress fixes their media options for 2.8
Scott, I have the same problem as GP – want to make a thumbnail from the original version of an image inserted in to a post from the media library (but not attached directly using upload in to that post) – do you know if WP2.8 will address this or not?
- for example the image may be inserted in to the post as a thumbnail size, and I don’t want to make a “thumbnail of a thumbnail” but rather to get to the original full size image and make the new thumbnail from that one…
Does that make sense?
Steve
Nice! Thank you a lot for open my eyes to the very useful get_children function and by the way updating my knowledge about get_posts in 2.6+! Looking at the docs you could shorten your function a lot using the ‘orderby’ parameter.
really nice code!
thanks
Thanks for putting the effort in and then sharing this code – works great with Keith’s little addition to make the image unique to the post. I’m a happy man.
when i run this script on my WP v.2.7, why i couldn’t get thumbs on my post…
i’ve used
function bdw_get_images($postId){
$iPostID = $postId
…….
and bdw_get_images($post->ID)
in my post where i wants to put my thumbs up…
and this code, work just in loop #1, why this script do that???
would you help me up from this problem….
Hi,
Got it working – good write up!
Could you elaborate on point 1 in your notes:
1. We’re only getting the first attached image’s thumbnail. If we wanted to display all the attached images, we’d have to use a for-loop to loop through each of the values in $arrKeys.
How would I go about creating the loop. I’ve googled ‘for-loop’ but haven’t found anything useful.
Could you give an example?
Thank you!
I meant to say a for-each loop. http://us2.php.net/manual/en/control-structures.foreach.php
Thanks for the reply.
I’m pretty new to wp and I’m still not sure how to implement this. Is there any chance of an example of how to integrate this with your code? I’m a bit lost at the moment.
It also seems to be picking up the last image uploaded instead of the last image uploaded for that page.
Thanks again for the help.
I’d recommend the WordPress.org forums for more on the loop.
As for the last image issue, I think that was solved above, so read those comments.