Inlux Proofing

Inlux Proofing

A Self-Hosted Photo Proofing System

The Challenge

While I had succeeded in unifying the portfolio site and blog with my Inlux Photo site, there was still one major piece of the business front-end that required a third-party system - proofing. If I could somehow create my own proofing system, I would have completely unified the professional photographer front-end.

Proofing is the process by which a client views their images, and is a critical part of the business.  On the web, it involves providing a client a system to browse and view all of the finished images from their job, and order prints and files. In our case, finished image counts regularly exceeded 1,000 photos, and shopping is complicated, so it made sense to use a proven third party system.

There were, and still are, many prefab system available to achieve this. They have gotten quite good, but at the time this was built, only one system, Smugmug, was not using Flash to deliver the images to the browser, and therefore offering any type of mobile support.  The design of their and all of the available systems offered little customization, and were in many cases very incongruent from the main site and blog. What's more, they were all super expensive, I was paying upwards of $200 a month at one point to host my proofing galleries.

These problems were deal breakers for me, so I decided to take what I had learned in my Inlux Slideshow project to the next level, and create a single page proofing app.

My Solution

First, I needed to put the back-end pieces in place to be able to upload, sort and deliver 1,000+ images. While this would be much, much easier now in Craft CMS, at the time Expression Engine didn't handle uploads all that well, and certainly not thousands of them.  I added DevDemon's Channel Images plugin, which supported huge batch uploads and S3 hosting, solving a majority of the back-end issues. 

I then needed a shopping system to integrate my front-end with.  I landed on Expresso Store, which would allow me to create limited products, eg 4"x6" print, 5"x7" print, etc, and then pass the image filename to the cart as a custom field.  This meant very minimal cart upkeep.

Finally I went on developing the hash-driven, single page app that would grab and display thumbnail grids of multiple subfolders in a job, and display a mobile friendly modal and slideshow.

I built on my javascript and jQuery knowledge by learning the fundamentals of manipulating the url, and using that data to grab the appropriate sections and images via ajax.

Although not on Github, you can see the js file here.