Friday, April 24, 2009

Clean New Look

Wiley and Clean: 17-40mm F/4L @ 29mm, F/4, 1/200th ISO 200,
Manual flash at 1/4 power fired in Softbox about 2 feet away.

Making some changes with the blog, and I hit on it a bit with the last post. I think it's a much cleaner, streamlined look, and I'm liking it much better. None of the templates were doing what I wanted, so I figured 'what the heck, I'm a software engineer', and I went into the html and fixed it myself.

Started out by making the whole page a bit wider. I may be screwing it up for a few people, but according to my stats page only one or two people that have ever visited here have a small enough screen resolution to be affected. My apologies to those, but I'm out for the greater good here. If you have the same problem that the post area of you blog is cutting off your photos that you link from flickr or elsewhere, just go into the "edit html" portion of the layout tab (this is for blogger blogs of course), and find the outer-wrapper and main-wrapper definitions. I up'd the widths to 760px for the outer-wrapper, and 510 for the main-wrapper. This allows 500 pixel wide photos to be displayed with a small border around them, such as the ones appearing on this blog.

Bathtime: 17-40mm F/4L @ 28mm, F/4, 1/200th ISO 200,
Manual flash at 1/4 power fired in Softbox about 2 feet away.

The next bit of cleaning up I did was to change the behaivior of the "label" links. It was driving me crazy when I clicked the link for my Lost Coast Trip, and the posts were in reverse chronological order (ie, newest to oldest). If I was reading this for the first time, I'd want them in order. After doing some research, there is no "setting" to get this to happen how I wanted it, so I could either reverse the dates on the posts (lame!), or add some javascript to reverse them manually.

So basically, if you have no clue what javascript is, then this is probably not for you. If you are somewhat comfortable with html and some basic programming languages, then this is pretty easy to do. Keep in mind, these instructions start off using Douglas Bowman's minima black template. Others may vary a bit, but the overall logic is the same.

The first step is add a <div> tag to the posts so that the javascript can find them. Go to the Edit Template HTML portion of the Layout tab (take a moment to download your current template as a backup), and click the Expand Widget Templates box. Go down and find where the posts are inserted into the html. In the case of my template there is a comment labeled "posts", and there is a loop below where the posts are inserted. Just inside the loop I added <div class='BlogPosts' expr:id=''> tag (don't forget to close the tab just before the loop closes).

OK, so now we can identify the posts both by a generic class "BlogPosts", and a unique identifier for each one. All that is left is to add the javascript to find them and reverse the order. I added this bit of code at the bottom just before the </body> tag.

<script type='text/javascript'>
if(\/label/) != -1)
var mainElem = document.getElementById("main-wrapper");
var tags = mainElem.getElementsByTagName("*");
var idArray = new Array();
var count = 0
for(var i=0; i < tags.length; i++)
idArray[count++] = tags[i].id;

var swap1;
var swap2;
var content;
for(var j=0; j < count/2; j++)
swap1 = document.getElementById(idArray[j]);
swap2 = document.getElementById(idArray[count - j - 1]);
content = swap1.innerHTML;
swap2.innerHTML = content;

So basically, what this does is first checks to see if the page is displaying a label search lookup by checking the URL for "search/label" (I may want to change this later if I want only some label lookups to be reversed. This may end up not being desirable for large collections that don't need to be sorted by date. I thought about adding "Sorted" to the label or something, and keying off that). If it's not a label search page, then the default newest first order remains. If it is, it searches for all the tags that have the className of BlogPosts, and grabs the unique Ids for them. Then it takes those unique Ids and essentially reverses their order in the document. Voila, it is done.

Clean Smile: 50mm F/1.4 @ 50mm, F/2.5, 1/200th ISO 100,
Manual flash at 1/4 power fired in Softbox about 2 feet away.

The "clean photos" were brought to you thanks to a Daddy's night complete with bath time. My wife and daughter went to see a play and we were left to be silly, get clean, and capture some great photos in the process.

These are all lit by a 28x28" Westcott Apollo Softbox
being triggered by a set of Elinchrom El-Skyport radio flash triggers. I love this setup, as it sets up quick, gives great light, and packs down small. The triggers are really reliable as well, as opposed to cheapie ebay radio triggers, which just plain suck, and Canon's infrared system which can be very flaky as well.

No comments: