PhotoFloat Tweet

A Web 2.0 Photo Gallery Done Right via Static JSON & Dynamic Javascript

PhotoFloat is a new open source web photo gallery aimed at sleekness and speed. It keeps with an old hat mentality, preferring to work over directory structures rather than esoteric photo database management software. Everything it generates is static, which means it's extremely fast. Read the blog entry about it.

How It Works

PhotoFloat consists of two segments – a python script and a javascript application.

The python script scans a directory tree of images, whereby each directory constitutes a folder. It then populates a second folder, known as the cache folder with statically generated JSON files and thumbnails. The thumbnails that are currently generated are 75px square, 150px square, 640px proportional, 800px proportional, and 1024px proportional. The scanner extracts metadata from EXIF tags in jpegs. It is smart about file and directory modification time, so you are free to run the scanner script as many times as you want, and it will be very fast if there are few or zero changes since the last time you ran it.

The javascript application consists of a single index.html file with a single scripts.min.js and a single styles.min.css. It fetches the statically generated JSON files and thumbnails on the fly to create a speedy interface. Features include:

• Animations to make the interface feel nice
• Separate album view and photo view
• Album metadata pre-fetching
• Photo pre-loading
• Recursive async randomized tree walking album thumbnail algorithm
• Smooth up and down scaling
• Mouse-wheel support
• Metadata display
• Consistant hash url format
• Linkable states via ajax urls
• Static rendering for googlebot via HtmlUnit conforming to the AJAX crawling spec.
• Facebook meta tags for thumbnail and post type
• ZenPhoto URL rewriting
• Link to original images (can be turned off)
• Optional Google Analytics integration
• A thousand other tweaks here and there...

It is, essentially, the slickest and fastest, most minimal but still well-featured photo gallery app on the net. Try it.

Source

• Released under the GNU General Public License v3
• Browse the repository
• Clone the repository:

  $ git clone http://git.zx2c4.com/PhotoFloat

• Download a tarball or zip

Installation

The code base is new, and things will become easier over time, but here's a general overview on how to get things setup.

1. Download the source code from the git repository:

   $ git clone http://git.zx2c4.com/PhotoFloat
   $ cd PhotoFloat

2. Change or delete the Google Analytics ID tracker from my own:
   • To delete:

     $ rm web/js/999-googletracker.js

   • To change:

     $ nano -w web/js/999-googletracker.js

     Modify the part that says UA-XXXXXX-X and put your own in there.
3. Change the title of the web page so it doesn't say my name:

   $ nano -w web/index.html

   and then edit the title section accordingly. (Note: these last two steps in the future will be more generic and set from a global config file.)
4. Build the web page. This simply runs all the javascript through Google Closure Compiler and all the CSS through YUI Compressor to minify and concatenate everything. It also compiles a tiny Java wrapper around HtmlUnit that generates static html for googlebot. Be sure you have java installed and then hit:

   $ cd web
   $ make

   Note that you may optionally strip out HtmlUnit all together if you don't want it. Or if you want something faster and sleaker, PhotoFloat also integrates with my own Qt-based ServerExecute program.
5. Now that we're in the web directory, let's make a folder for cache and a folder for the pictures:

   $ mkdir albums
   $ mkdir cache

   When you're done, fill albums with photos and directories of photos. You can also use symlinks.
6. Run the static generator (you need Python≥2.6 and the Python Imaging Library):

   $ cd ../scanner
   $ ./main.py ../web/albums ../web/cache

   After it finishes, you will be all set. Simply have your web server serve pages out of your web directory.
7. Optional: Add the static generation command (from the root PhotoFloat directory: scanner/main.py web/albums web/cache) to a cron job or to your photo upload scripts so that the gallery is updated.

Mailing List & Suggestions

If you have any suggestions, feel free to contact the PhotoFloat community and I via our mailing list. We're open to adding all sorts of features and working on integration points with other pieces of software.

Donations

Dig the work done here? Want to help support it? Feel free to donate.

© Copyright 2011 Jason A. Donenfeld. All Rights Reserved.