>>> Blog

posted on 3.15.17
Gallery Update

My latest project, a navigable image/flash gallery, is now live at www.sourapplestudios.com. It likely would have taken me less time to use an existing framework, but I wanted to do it from scratch for the sport of it, and to be able to address all of the client's needs. The client wanted to be able to:

  • Seamlessly switch between images and flash animations.
  • Add a description and title to each image.
  • Add a 'vulgar' flag to an image, which visually warns a user before the image is displayed.
  • Add a vertical scrollbar to images marked as 'tall'
  • Assign several images to a 'comic' sequence, so that if the user navigates backwards and stumbles on its last page, he's taken to the first one instead.

User-specified image data is stored as JSON, parsed using 300-lines' worth of PHP code, and converted to HTML elements with 'data-' attributes. This, in turn, is interpreted and displayed using jQuery whenever a tile is clicked on. The flash animations are displayed using swfobject, a JS library. All-in-all, the conversion process looks something like this:

And when clicked, the tile expands into this:

(There's only so much that can be related through MS Paint flowcharts and bad writing, so be sure to visit the link for the full experience)

Granted, I could have just employed jQuery and AJAX to fetch and parse through the JSON data, but I wanted to get some practice parsing through JSON and addressing edge-cases using PHP. Building an API to address the former scenario would not have scratched that itch. Plus, what better way to distinguish between the back- and front-end code than to have it written in different languages?

The code's also got a number of features that will probably never see the light of day but are shiny nevertheless. Among other things, the PHP part checks against missing but crucial parameters -- like filenames and flash animation dimensions -- and assigns default values/logs errors accordingly; I imagine this is a common-sense practice for everyone in the biz, but was a learning experience and a sense of pride to me personally. In addition, JS and PHP work together to automatically detect a tile's characteristics and adjust the display accordingly. Does the JSON data specify an image title? Show it, then. Is there a description, too? Stick in an 'info' icon to let the user know. Want to keep the JSON title/description in place for reference, but suppress it for the user? Change a couple of flags in the JS file.

The only problem I've found with the gallery is that it's a bit clunky on mobile when an orientation change takes place. My guess is that the problem is rooted in window dimensions, which probably change when the device is flipped. I developed a sort of brain rot while trying to get the images to load and re-size correctly, so this is something I might come back to later.