Alumnilist is a single page website for displaying highschool photos and alumni data. I have an upcoming high school reunion so I thought I would put this together and then have it running on a laptop.

I had scanned in the senior photos from my yearbook and then cut out the photos into separate files. I decided to give each file an id followed by an underscore followed by the firstname capitalized followed by the last name capitalized. Then I wrote a script to generate HTML. It was then that I realized I should have separated the first and last name with a delimiter character. There are over 300 files so I was not going to go back and rename them all.
This python script takes in the file “filenames.txt” and puts it into a set.
This set is then looped through and split apart into id number, first and last name fields and appended to a list. (example. 001_AnnAcker.png) So when breaking apart the names I added code using a regular expression to find those. This was a little problematic in that one person had two first names, I am looking at you Mary Beth. Also there were the people with two characters capitalized in the last name, mostly the dang Irish. That left one more edge case, someone had Jr. I then looped through the resulting list and put those names back together. I pull in a css file and loop through the items . Each item generates a div with an ID, img and onclick event .

example .
<div class = “student” id=’001_AnnAcker’ onclick=”showdata(‘001_AnnAcker’)”>
<img src=”001_AnnAcker.png” alt=”Ann Acker” /></div>

The results are saved as “layout.html”

Now I had a single HTML doc that would display all the photos. I was able to get a copy of the alumni data which was in spreadsheet format with the column names in the first row. I added a column for the name of the photos . I added the photo names those without photos I left blank,I then took that file and saved it as a pipe delimited file named “pipedelimitedinputfile.txt”.

To keep to a single HTML file I then wrote a python script to covert this data to JSON.
Using “pipedelimitedinputfile.txt” as input, this script begins like the previous script, except for breaking the first row out as column names. The column names have spaces in them, so I removed them to make processing easier later. This wound up creating a simple array JSON object. I just had to split each row of the pipe delimited file and then generate a named pair for each column. I had never generated JSON before without the use of a library, this was easier than I had expected. The output was saved to “alumniJSON.txt”

Using layout.html as a base I added an div tag for camerashy, picture data and camerashy data. I then copied the output of I then wrote the JavaScript to link the photos and data. On the page init I looped through the JSON object alumnilist and determined if the photo linked to data if it did I then appended an address icon to the div.

I then wrote the showdata function. If the input was “999_CameraShy” I called a function camerashydata otherwise I called finddata. The finddata function takes the input and loops through the JSON object. If it finds a match on the photoname it then clears the picture data div and appends the photo, name, email and address to that div. It then make the div visible.
The camerashydata function loops through the JSON object and looks for any items without a photoname. It then appends the data to the camerashy div.

Both the picture div and camera shy div have an onclick which calls closedata. The closedata function sets both of them to display none.

An example of the page can be found in my projects here.

The source code and example data can be found on my Github here.


One Comment on “Alumnilist”

Comments are closed.