// 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.

• Blog
• Portfolio
• Twitter
• Delicious
• Pandora
• Blippr
• Flickr

So in one place you could see things that I write, work on, tweet, read, listen to, use and take pictures of. I would like to keep everything grouped together instead of being a true blended lifestream. So how would I accomplish this? I just started playing around with FriendFeed today. I’m not a pro yet but I don’t like the blended feed that it creates but the ability to comment on each individual item is cool.

The other method I stumbled upon to create a lifesteam is from Yahoo called Yahoo Pipes. Its complex, powerful and cool all at the same time. You import data from anywhere you can grab it and send that data through pipes to different modules and filters. In the end I’m left with a very customizable lifestream. The only question is how do I get that stream on my website in a way that allows me total control over it’s presentation. It will be something to work on for sure, but this does mean that this site will probably go through another redesign. You knew it was going to happen, it was only a matter of time. Four months to be exact. Ugh!

Stay tuned, I’m sure I can knock this out by next week.

This brings me a decision on what to do with the blog category and the homepage. For now I’m going to to keep the sliding panels but I think it can be done better. I’m thinking that on the homepage I want to try and figure out a way to include only the latest blog post and then start listing out my favorite portfolio projects. I am also going to add a panel at the end that will list out my most recent blog and twitter posts. As for the blog archive I’m going to have to think of a new presentation but I suppose what’s in place now will suffice. Time to start hacking the home page!

Archived Post…

I finally had a little time to work on this site. Wouldn’t you know I’ve thrown my lj design under the bus. Well kind of. I am now using the Viewport theme as my base template and skinning it with elements from my lj theme. I’m applying this skin as a child template of Viewport and so far things are running pretty smooth. So far I’ve only changed the header and footer templates and of course, I have a new style sheet to override the parent theme. I like the Viewport theme because it’s perfect for a portfolio site. I’m going to create custom pages that will group my various projects together. General blog entries will have a default blog image that I have yet to draw.

Hopefully this will be the last change in direction for the theme of this site. I want to customize the hell out of Viewport and make it my own. Hopefully I will be able to find the time.

Update: May 29, 2009:

I’ve noticed a couple people landing on this page since it’s ranking high with a search for Viewport Theme. So I’ll try to spell out everything I’ve done to customize it. First off all the changes I’ve made hae been through a child theme. This way I can customize the theme one part at a time. If I haven’t created an override in the child theme WordPress then defaults to the actual Viewport theme files. This ensures that if I miss something it won’t break the theme.

I started with the header and footer. Since these don’t really have anything to do with the actual “viewport” they are completely customized to look like my original site design. The header does contain conditional code to activate jQuery links depending on what page you are on. I did have to add is_search() to the conditional statement because it wasn’t in the original header for some reason.

Since the Viewport theme is based on pictures I needed to come up with a default blog picture that could be automatically added when I don’t specify a picture for the post. I changed the php code to check if the post viewport picture is blank and if so place my default blog pic in there instead. I also made the pic appear as a css background-image so that I could round the corners of the container div and apply a box shadow (which currently only shows in Safari). I made these changes to the index, single, archive and search template files.

I made a lot of changes to the single template (which controls the post page). I took out the top and bottom divs that used to house rounded corner images in favor of a single div with css rounded corners. I made lots of css style changes and added my Twitter status to the sidebar with Twitter Widget Pro.

I’ll revisit this post if I make and further Viewport specific customizations.

Update: June 15th 2009