You probably all know about my plugin The Attached Image which allows you to show any image attached to the current post. Well what about if you need to display all the images attached to a post? Gallery shortcode? Well, yes that will work, but what if you need to add in some custom coding?

The image on the right shows a wallpaper website I worked on. It runs on WordPress & uses the ideas I am going to share in this post to create the ‘Available Sizes’ section. Really it’s just an excuse to be lazy as the whole Wallpaper system is automated, upload your wallpapers & the script works out the sizes & lists them. However I’m sure that you lovely people can come up with other inventive uses for the same code. So here we go.

The Code

The code is actually just a couple of WordPress core functions used in a specific order, with a tad custom code.

<?php
$attachments = get_children(array('post_parent' => $post->ID,
						'post_status' => 'inherit',
						'post_type' => 'attachment',
						'post_mime_type' => 'image',
						'order' => 'ASC',
						'orderby' => 'menu_order ID'));

foreach($attachments as $att_id => $attachment) {
	$full_img_url = wp_get_attachment_url($attachment->ID);
        $split_pos = strpos($full_img_url, 'wp-content');
        $split_len = (strlen($full_img_url) - $split_pos);
        $abs_img_url = substr($full_img_url, $split_pos, $split_len);
        $full_info = @getimagesize(ABSPATH.$abs_img_url);
        ?>
        <div class="WallSizesHolder">
		<div class="WallSizesThumbHolder">
			<a href="<?php echo $full_img_url; ?>" title="<?php echo $attachment->post_title; ?>" target="_blank"><img src="<?php bloginfo('stylesheet_directory'); ?>/thumb.php?src=<?php echo $full_img_url; ?>&w=92&h=69&zc=1" /></a>
		</div>
		<p><?php echo $full_info[0].'x'.$full_info[1]; ?></p>
	</div>
<?php
}
?>

Let’s go through the code now & I’ll explain what is going on. First we use get_children to get all the posts (images) that are children of the current post, are an attachment, have image as their mime type & order them by their menu order (that’s the order set by the user in the gallery) or by ID if no menu order is set. This returns an array of objects, each object contains info about the attachment.

Now we run the $attachments variable through a foreach. One little note is that you cannot name the key variable ($att_id) $id as it will stop your comments from working properly (and probably other stuff). For each attachment we have, we grab the path to the full image using wp_get_attachment_url(). Now this is where the code you want to use comes in. I’ll continue to explain mine though just in case it inspires you. ;)

Next we take the url & find ‘wp-content’s position in the string. We then get the full length of the url & take it away from the position of ‘wp-content’. We then use substr() to cut the front of the string off (ending at ‘wp-content’). Now we use getimagesize() prepending ABSPATH to the front of our cut URL. ABSPATH holds the absolute (unix or windows) file path to the root of your WordPress install & as getimagesize() doesn’t always work on URLs depending on your server config, it’s generally always better to use the file path instead.

Finally we have the HTML I used. This is obviously going to change depending on what you are using it for, but we’ll go through the PHP I’ve used as it might be useful to your project. First we have some aesthetic divs then we open a hyperlink pointing to our full sized image. To fill in the title, for SEO, you can use $attachment->post_title which will hold the text written in the title field (if you haven’t changed it, it should be the images file name which is better than nothing). I’m using timthumb to dynamically alter the image size as you can see, finally I echo out the width & height retrieved by our trusty getimagesize().

That’s it. Stick a fork in me, I’m done. What you do with this is entirely up to you. I’m sure you can come up with something weird & wonderful that never even crossed my mind, but I hope it helps you in some way. If you do use code inspired by this tutorial in your project I’d love to see what you do with it. Just drop a link in the comments (if you want) and I’ll take a peek. ;)

As always if you have any problems or have any suggestions leave a comment & I’ll get back to you ASAP. Also if you want to see an active example of this working (rather than a picture), just visit Celeb O Rama Wallpapers & view any wallpaper. It’s the ‘Available Sizes’ bit like in the picture.