From the beginning I wanted images to be a part of the style of WITFITS post. The inclusion of an image gives a more professional look, whilst breaking up the monotony of a page a text, as well as occasionally adding a humorous touch. Up until recently, the image associated with a post was included in the actual post body itself. This method "did the job" as it were, but I found the solution to be less than optimal. Including the image in the post meant that I was limited in terms of positioning (it could only appear relative to the rest of the text in the post and within the confines of that area on a page) and every one of my entries would have to start with a bit of HTML (the img tag). It didn't feel very clean.

With the new template I decided upon a new approach. Since every Blogger post is given a unique ID, I could associate an image with a story by simply naming that image after the post ID. This method gives me considerably more freedom in placement of my story text and story image, as one is no longer contained within the other. Since the elements are separate, I can change the arrangement of elements in my page without having to modify every single post if I choose to do something different with the images.

The only real disadvantage of this technique is that the image is no longer included in the RSS feed since it is now a part of the template. This could possibly be remedied using something like Yahoo! Pipes to alter the feed. It also requires, obviously, that I host and name all of the image files.

In my template, this Blogger Hack was as easy as including a bit of code similar to this:

1. <img expr:src='"http://PathToMyImages/" + data:post.id + ".jpg"'/>

Where "PathToMyImages" is the directory where I store all of my post pictures (I use Photobucket). You may note that the code above restricts me to using jpegs. If I wanted to, for whatever reason, use a gif at some point, I could rewrite it as such:

1. <img expr:src='"http://PathToMyImages/" + data:post.id + ".jpg"' expr:onerror='"this.onerror=null;this.src=\"http://PathToMyImages/" + data:post.id + ".gif\";' />

This bit of code includes a snippet of Javascript that says "If there is an error while trying to load the source image (i.e. the file doesn't exist), change the source path to point to a gif instead".