Templating WordPress Image Attachments

One of the problems I’ve encountered while templating for WordPress is the lack of tags for post attachments. I want full control over how post images appear in my template and I don’t want to use WordPress’s “Insert into post” which simply inserts an attachment into the post content. So I hit up Google and came across some code by John Crenshaw. He created a function to write out the first image attachment for a post. I needed something more powerful than that but I love the way he bubble sorted the attachments so that I could use WordPress’s attachment order in my template. Here is the first part of the function that grabs the post attachments, resorts them and creates an array.

// Get images for this post
$arrImages =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . get_the_ID() );

// If images exist for this page
if($arrImages) {

// Get array keys representing attached image numbers
$arrKeys = array_keys($arrImages);

// Put all image objects into new array with standard numeric keys
foreach($arrImages as $oImage) {
	$arrNewImages[] = $oImage;
}

// Bubble sort image object array by menu_order
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;
	$captions[] = $oNewImage->post_excerpt;
}

After an ordered array of post attachments is created I wrote some code to create a new array with data about each attachment. I pull data for the image’s thumbnail url, full size url, caption, width, height and ID. Here is how the array is built…

// Build image array
for ($i=0; $i < sizeof($arrKeys); $i++){
	$iNum = $arrKeys[$i];

	// get various image sizes
	$image_thumb = wp_get_attachment_image_src($iNum, $size='thumbnail');
	// $image_large = wp_get_attachment_image_src($iNum, $size='large');
	$image_full = wp_get_attachment_image_src($iNum, $size='full');

	// store image thumbnail(0) and full url(1)
	$image_service[$i][0] = $image_thumb[0];
	$image_service[$i][1] = $image_full[0];

	// store image caption(2)
	$image_service[$i][2] = $captions[$i];

	// get the image dimensions
	// store image width(3) and height(4)
	$image_service[$i][3] = $image_full[1];
	$image_service[$i][4] = $image_full[2];	

	// get attachment id
	$image_service[$i][5] = $iNum;
}

Here is the full function to place in your functions.php file: WordPress Post Attachments Function

All of this only builds an array for you. None of it places an attachment into your template. To do that you just need to call the function inside of the loop and place the array data where you need it. To call the first image attachment, say for adding a thumbnail to the post excerpt on your homepage you just need to pull the thumb url from the array we built earlier.

<?php $image_service = gallery_images(); ?>

<figure><img alt="<?php echo $image_service[0][2]; ?>" src="<?php echo $image_service[0][0]; ?>" /></figure>

Notice the array has two dimensions. The first one in this case is [0], meaning we are pulling the first attachment from the array (remember that arrays start with zero). You can see in the alt tag the second dimension is [2] because this is the position we stored the attachment caption. The source of the img tag uses [0][0] which calls the first attachment's thumbnail url. Getting how this works?

So what about pulling more than one image? To do this we just need to make a loop and cycle through our array like this...

<?php for($i = 0; $i < sizeof($image_service); $i++) { ?>

<figure><img alt="<?php echo $image_service[$i][2]; ?>" src="<?php echo $image_service[$i][0]; ?>" /></figure>

<?php } ?>

Replacing the array's first dimension with [$i] from the loop allows you to pull all of the attachments for your post.

If you need different layouts for horizontal or vertical photos just pull the image width [3] or height [4], do your if statement math and template away. Using the loop allows you to easily create your own gallery too. Wrap an anchor tag around a thumbnail image and link to the full size url to create an easy, template generated thickbox. Since WordPress generates a thumbnail, medium and large size for everything you upload it's easy to grab different media types. You can see where I commented out the large image media type. Just add another array position to have access to it. Remember that if you are going to template different media sizes set your image dimensions in WordPress under Settings -> Media.

Hit me up if you have any questions and if you find a way to improve this code please share it.