My backcountry skiing and mountaineering blog, Dehydrated, is an Ajax-enabled photo-blog that I wrote from scratch. It’s extremely simple, as it is meant to upload and display ski phtotos–and that’s it. The photography presents the user with a larger download than I would like, but it would defeat the purpose of the site to degrade the quality of the photos. Therefore, I used client-side scripting in a couple places to accelerate things for the visitor. I’d like to highlight some of these features.
Dehydrated's auto-suggest navigation in action
I wanted the design to be as clean as possible so as to focus on the photography, but I still had to account for navigation. Instead of tired old menus that take up a lot of space even when they’re not being used, I used the auto-suggest routine from Adobe’s Spry framework for Ajax. As indicated in the photo at right, once the user begins entering text, an overlay appears with links and previews to related photos. This takes place without a new page load and reacts (almost) as fast as the user can type. This technique was first made popular by google; the feature was such a break from expected behavior that many first-time users were alarmed and confused.
Things evolve fast on the web, and Adobe’s Spry framework has made it easy to build an auto-suggest that is incredibly rich with features. Each of the photos in my database is labeled with various attributes like “continent”, “mountain_range”, “skier”, and “photographer”. The XML in this block translates the information for Spry’s auto-suggest menu:
<product>
<image_name>$main_image_name</image_name>
<image_id>$main_image_id</image_id>
<boximage>../$path_to_images"."thumbs/$main_thumb_path</boximage>
<skier>$main_skier</skier>
<photographer>$main_photographer</photographer>
<location_tags>
";
if($main_display_line=='yes'){echo"$main_line ";}
if($main_display_terrain_feature=='yes'){echo"$main_terrain_feature ";}
if($main_display_mountain_range=='yes'){echo"$main_mountain_range ";}
if($main_display_region=='yes'){echo"$main_region ";}
if($main_display_state=='yes'){echo"$main_state ";}
if($main_display_country=='yes'){echo"$main_country ";}
if($main_display_continent=='yes'){echo"$main_continent ";}
echo"
</location_tags>
</product>
I have some conditionals in there, to account for whether or not I think a piece of information about the image is worth displaying (not really necessary to label every “Alaska” picture with “United States” or “North America”). Also of note is the “boximage” tag, which calls a file path to a smaller version of the photo (my php upload script automatically saves a full-size and a thumbnail for each photo).
Adobe does a great job of making this easy to implement, and I won’t attempt to out-do them here. Besides, there’s another Ajax-enabled part of the application to discuss: The “Four Random Images” button.
Dehydrated's "Four Random Images" feature
The blessing/curse of the internet is how it can be so accommodating to people who have short attention spans. Indeed, it induces short attention spans! My full-size photos are quite the burden for the modern, frantic user, so I needed to give him a way to browse photos as fast as he can click.
Upon clicking the “Four Random Images” button, the application queries the database for the thumbnail image path and some other attributes like “image_id” and the alt text. There is a conditional for determining if images are wide or tall and the markup reflects that. So, there is the possibility of any of the four photos being horizontal or vertical. I cheated a bit here and just marked it up as a table:
<td class=\"small_photo_wrap\">
<a href=\"$base_url$path_to_homepage?image_id=$image_id\" title=\"Photographer: $photographer; Skier: $skier\">
<img id=\"thumb_$counter\" class=\"$orientation\" src=\"$path_to_images/thumbs/$thumb_path\" alt=\"Photographer: $photographer; Skier: $skier\" title=\"Photographer: $photographer; Skier: $skier\">
</a>
</td>
I’m always very hesitant to use tables for things that are not tabular data, but I will stray from semantic markup if there is a clear advantage. In this case, the images are fluid in width and height, reacting to the browser window, and could be either horizontal or vertical. The fastest way to reign in all this uncertainty was by using a table and I don’t see a significant problem with that.
Thanks for reading and visit the site or contact me for more information!
