This is some semi-technical information for anyone interested in how this web site is strung together.

It is published via Wordpress blog software, free open-source, the best of breed these days.

I am running it on my own domain maintained at http://dommy.com/, hosted by Site5.

Theme

The style or theme is Travelogue theme created and shared by Josh Lymon. I found it by surfing the WordPress Theme Browser.

I’ve done a number of adjustments to the original to suit the needs of this site. I had a hard time locating the original photoshop file for the banner on Josh’s site, but dug up a copy at http://dev.wp-themes.org/file/travelogue/trunk/travelogue.psd
and used Josh’s instructions for Editing the Polaroid Images. Once I understood how the files worked, I trimmed a bunch of stuff from the original, deleted un-needed layers to make for a smaller PhotoSop file; you can find my derivative at:
http://dommy.com/ihaterunning/wp-content/ihaterunning-banner.zip

This worked well for creating my own set of “Polaroids” except for some adjusting in the ImageReady slices to make them match the dimensions of the images. Also, the free “Hey Joe” font advertised has not available from the Joe Bob Graphics site (but I found some other great free fonts), so I am using another script font, “Mistral” for the handwrittenm styled captions.

I made my own background image of the shoes by searching the Flickr Creative commons collection, and finding the Tired of Running image by Lachlan Donald. The bold font for the blog title is billeBoldHand from Joe Bob Graphics.

I got some ideas for making the polaroid images random from In Pursuit of Rotated Polaroids, but ended up doing my own modifications. In my Header Template, I added:

<?php
	$randy = '/ihaterunning/wp-content/themes/travelogue';

	$fileList = array();
	$handle = opendir($_SERVER['DOCUMENT_ROOT'] . $randy . ‘/images/polaroids’);
	while ( false !== ( $file = readdir($handle) ) ) {
		$file_info = pathinfo($file);
		if (’jpg’ == strtolower( $file_info['extension'])) {
			$fileList[] = $file;
		}
	}
	closedir($handle);

	$randy .= ‘/images/polaroids/’ . $fileList[time() % count($fileList)];
	?>

<style type=”text/css” media=”screen”>
.polaroid1 {
	background: url(’<?php echo $randy?>’) no-repeat;
}

</style>

So it uses similar code to get a collection of images (I removed the file type filtering since I knew there would only be JPEGs in my set).

Banner Gallery

I also wanted to create a page that would show all of the images used for the polaroids. These look kind of funny on their own since they have part of the “shoe” background (see example).

My first attempts tried to use the same CSS as the header, but that turned out wonky since it is so much wider than the region for a post. So I simply created a new graphic to represent just the left part of the background shoe graphic.

To create the banner gallery, I needed to be able to embed PHP code inside a WordPress Page, which called for using the PHPExec plugin that allows you to put code in page/post content.

I found I was unable to use the readdir command (maybe a shortcoming of the plugin?) to get the list of image files (although it works fine in the header template), so my gallery forced my to manually list the image files as an array):

<phpcode>
<?php
	// create array of all image files
	$polaroid = array('2005-10-12canal.jpg',
		'2005-10-12steps.jpg',
		'equipment.jpg',
		'strawberry-bike.jpg',
		'2005-10-12blur.jpg',
		'2005-10-14bike.jpg',
		'2005-10-14bike2.jpg',
		'2005-10-14descent.jpg',
		'2005-10-14hardscrabble.jpg',
		'2005-10-14hiked.jpg',
		'2005-10-14ridge.jpg',
		'2005-10-14gps.jpg');

    // shuffle the images
    shuffle($polaroid);

	// walk the array
	foreach ($polaroid as $item) {

		// echo the photo file name
		echo "<h4>$item</h4>";

		// build link to image
		$my_image = '/ihaterunning/wp-content/themes/travelogue/images/polaroids/' . $item;	

		// display photo with piece of the banner adjacent
		echo '<img src="' . $my_image . '" alt="" width="285" height="285" align="top" />
			<img src="/ihaterunning/wp-content/themes/travelogue/images/header_img-g.jpg"
			width="117" height="184"  align="top" alt="I Hate Running " /></a>';
	}
?>
</phpcode>

This is used as a WordPress Page for the Banner Gallery.

Sidebar

My list of total running/biking miles, donations, etc in the left sidebar is stored as a file totals.php in the template directory, and accessed via an include statement in the Sidebar template:

<div class="sidebox">
	<div class="boxhead"><li><h3>Training Totals</h3></div>
		<div class="boxbody">
			<?php include (TEMPLATEPATH . "/totals.php"); ?>
		</div>
	</li>
</div>

so it is editable from my WordPress Dashboard. I later added a line after the closing </li> tag so it would display the date of the last change (the modification date of the totals.php file):

<em>as of
<?php echo date("M j, Y g:m a",
    filemtime(TEMPLATEPATH . "/totals.php")
    - (3*3600))?></em>

The last adjustment of subtracting (3*3600) is because my web host is on the East Coast and its server times are 3 hours ahead of my local time.

The Alan-ometer

My post templates are designed to display the training totals as a right side floated div that looks like a bicycle computer display, but only if I have entered values for miles run or biked that day. WordPress nincely makes this do-able via its custom field definitions. I have one called “run” and another called “bike”, plus a third for optional “notes”. These are directly created/edited on the WordPress posting page, so if I am writing an entry and say want to include a training run of 7 miles,, I just use the pulldown menu for Custom Fields, select “run” and enter 7.0 as the value.

My Main Template will display this data and the graphic only if there are some cutom fields associated with the entry:

<?php
// check for custom fields with this entry
$bikemiles= get_post_custom_values('bike');
$runmiles = get_post_custom_values('run');
$notesmiles = get_post_custom_values('notes');

// display only if we have one of the three defined
if (is_array($bikemiles) or is_array($runmiles)
		or is_array($notesmiles) ) {

   echo '<div class="alanometer"><div class="disp">'; 

    // running miles
	if ($runmiles[0]) echo ‘<strong>RUN: </strong>’ .
   		$runmiles[0] . ‘mi<br />’;

	// bike miles
	if ($bikemiles[0]) echo ‘<strong>BIKE: </strong>’ .
   		$bikemiles[0] . ‘mi<br />’;

	// additional notes
	if ($notesmiles[0]) echo ‘<em>(’ . $notesmiles[0] . ‘)</em>’;
   echo ‘</div></div>’;
}
?>

This is inserted in the template above where the entry content is displayed.

The output is specified by a CSS div using a graphic as a background, and the text positioned by padding:

/* Display for Alanometer */

.alanometer {
	padding:0;
	margin: 4px;
	background: url('images/alanometer.jpg') no-repeat;
	width:148px;
	height: 160px;
	float:right;
}

.alanometer .disp {
	font-family: Arial, Helvetica, san-serif;
	font-size: 0.8em;
	line-height: 0.9em;
	position:relative;
	top:54px;
	left:31px;
	height: 56px;
	width: 80px;
	padding:0;
	margin:0;
}

Did you know... The total cost of diabetes in the United States, 2002 was $132 billion including $92 billion of Direct medical costs and $40 billion Indirect costs: (disability, work loss, premature mortality) (from NNational Diabetes Fact Sheet)
See more diabetic facts...