Philip Guo (Phil Guo, Philip J. Guo, Philip Jia Guo, pgbovine)

JSON Photo Gallery


All photo galleries on my website are powered by the JSON Photo Gallery project. For example, here is my Boston gallery. The raw data for each gallery comes from a JSON file (e.g., JSON data file for my Boston gallery). The data is rendered into an ordinary HTML webpage using JavaScript, so no server-side scripting is required.

I created the JSON Photo Gallery in June 2010 as a successor to my 5-year-old XML Photo Gallery, since my old code was starting to show its age. Web technologies have gotten far more sophisticated in the past 5 years, so what was once a somewhat-innovative gallery now appeared prehistoric. Hopefully my JSON Photo Gallery will last for another few years before it too starts to look outdated.


  • First and foremost, looking good on contemporary computer monitors

  • Background pre-fetching of images while you browse through the gallery, to ensure snappy responses

  • Instant switching between thumbnail and filmstrip views

  • Scales to galleries of ~100 photos

  • Does not require any server-side scripting

  • Renders properly on Firefox, Safari, Chrome, and IE

  • Works decently on tablet devices too

Source code

If there is sufficient demand, I will provide more detailed documentation, but for now, please look at all the files in my photos/ sub-directory for the source code of this project. Unfortunately, I haven't yet had time to nicely package up the code, so some components are still hard-wired for my personal website configuration.

The Python script uses the Python Imaging Library to create 800x600-pixel full-sized photos and 130x100-pixel thumbnails from a directory of JPEG images. (In my experience, these dimensions strike a pleasant balance between photo quality and loading time.) That script also creates a skeleton JSON data file, which you can augment with metadata like titles or captions.

The HTML gallery file (json_photo_gal.html) takes a mandatory JSON filename (without the .json extension) as a parameter. It then tries to look for the specified JSON file within the photos/json-files/ sub-directory, load the file, and render the specified gallery. For example, the exact URL for my Boston gallery is:

Notice the boston query string after the HTML filename. Given that query string, the gallery will look for a JSON file in this location:

and render the gallery that it specifies. At the moment, the photos that the JSON data files refer to are all in sub-directories within my new-galleries/ directory: e.g., new-galleries/boston/ for my Boston gallery (but you can change that setting by modifying the JavaScript code).

Subscribe to email newsletter
Donate to help pay for web hosting costs

Created: 2010-06-30
Last modified: 2010-07-04
Related pages tagged as software: