Isotope Photo Gallery Example

I'm not sure if school projects inspire me to do new things, or if they are so boring I try new things (at the risk of sound egotistical I lean towards the latter). I volunteered to make the website bit. It was a small part of a larger project, and I decided to take on the pseudo-business website from scratch and code it all in notepad++.

It's nothing special, but I am quite happy with the picture gallery. It makes use of the jQuery plug in Isotope, and an old PHP photo trick* I had laying around. Here is a link to the actual project. It's pink because I'm the only guy in the group.

http://morepie.geekwagon.net/desserts.php

Isotope is easy enough to figure out. Okay, it took me a few hours, but for a real programmer it's probably stupid easy. My problem was that I had pictures with random file names all in the same directory that I wanted to use as objects for Isotope work its eye candy magic on.

This bit of PHP grabs all the files in a directory and turns them into div's Isotope can use. The first few lines are the Isotope buttons that make it sortable. It distinguishes between cake, pie, and other types of desserts by the first letter in the file name. I did have to go through and add a character to the beginning of each file name manually, but this was a one time simple project.

In the end I was pleased with the results. I am able to add and categorize pictures with a rename and an upload.

1:  <ul id="sort-by">  
2:   <p>Filter images by type -></p>  
3:   <li><a href="#" data-filter="*">all</a></li>  
4:   <li><a href="#" data-filter=".b">brownie</a></li>  
5:   <li><a href="#" data-filter=".c">cake</a></li>  
6:   <li><a href="#" data-filter=".p">pie</a></li>  
7:   <li><a href="#" data-filter=".o">other</a></li>  
8:  </ul>  
9:  <div id="gallery">  
10:  <?php //adapted from Nathaniel Sabanski's comment on 15-Mar-2009 12:49 at http://php.net/manual/en/function.opendir.php  
11:   $dir = "./gallery/"; //relative path to picture directory  
12:   if($handle = opendir($dir)) {   
13:    while($file = readdir($handle)) {   
14:     clearstatcache();  
15:     if ($file != '.' && $file != '..') {  
16:      $cata = $file[0];  
17:      $size = getimagesize($dir.$file);  
18:      echo '<div class="picItem '.$cata.'">  
19:      <img src="'.$dir.$file.'" height="'.$size[1].'" width="'.$size[0].'" alt="gallery image">  
20:      </div>';   
21:     }  
22:    }  
23:    closedir($handle);   
24:   }  
25:  ?>  
26:  </div>  

The code has some comments, mostly for me to remember how to use it. There is a URL link to where I got it in the first place.. which is always nice.

Also, thanks codeformatter.blogspot.com.

*The term trick to be used loosely.

The Map

My part of a school project was about the cost of living in the United States. It was a simple project (like compare two cities) where I only had to write a few sentences. I wanted a map too. I was sure somewhere on the whole of the Internet someone had made a United States cost of living map. There were some, most of them were broken down by state. I wanted something more granular (for the record I found one after I went through all this trouble--was similar to mine except it's by county).

I started with military BAH data because I found too many ways to break down cost of living. This simplified the process, moreover it's a real world application. People in the military really get a housing allowance if you live off base (I know from experience), and the amount given is different based on where you are. The BAH data is also available in CVS format, which makes it easy to work with.

Obviously I chose zipcode over country because the BAH data was already broken down by zipcode; also the zipcode boundary data is available on the census website. There are plenty of places that will tell you how to retrieve this and insert it into a KML (which is just an XML file Google Earth uses to store user created information) file. I found this guy's blog post to be the most useful of those search results. He doesn't tell you how to do it, he just has the KML file available. Props to Fil.

The BAH data required a little beating (the term "massaging data" irks me) to be useful. Eventually, I had a text file full of zipcodes and a number for how much BAH received relative to one another, and a KML file full of zipcode shaped polygons. That's where the real work started.

There are a lot of details I'm going to skip here. Most of them would just point out how dumb I am. Let's just say there was a fair bit of trial and error. In the end I used an over complicated while loop (I'm new to C++ but it's fun). It went through the 170 some-odd MB KML file line by line and wrote it to a new file. When it found a zipcode that matched the BAH data it would add a style to that polygon that was a shade of red based on the cost of living number I associated with it. Took about an hour to run, but in the end I am pleased with the results.

I've posted the code on github. No doubt the program could be better, but for a first year CS student it's not horrible. Who knows it could be useful in other school projects. All you need is a list of zipcodes and some other random bit of data separated by a tab.

If this turns out to be helpful to anyone drop me a comment; I'd love to hear about it.