Jerry Ghionis Courses – Photography Training

Getting Started

I was fortunate enough to start working with Jerry Ghionis on his new Teachable site in the 4th Quarter of 2017. He already had a vivid idea of what the website should look like but needed a developer experienced with Teachable to bring his Jerry Ghionis Courses site altogether.

His main feature request which pretty much decided if he was going to use Teachable or continue with his bespoke but hard to use existing eLearning website, was the ability to display EXIF data selectively over the top of any image within a gallery system.

EXIF data, if you’re not photography savvy is data embedded inside the photograph’s file and usually contains such things as:

  • The date and time of the image
  • ISO speed
  • Focal Length
  • Aperture (f-number)
  • Exposure Time
  • White Balance
  • Many others not needed by the client

Research

So, there were two things I had to investigate even before I started working with the client.

  1. Is there a photo gallery system that will work well inside Teachable, and
  2. Can I implement a working EXIF system over this gallery and also get it working on Teachable.

Additional design features requested by the client were:

  • Option to turn on / off the EXIF data
  • Full-screen gallery option with EXIF data also available in full screen.
  • Fast loading times for images (we used Amazon Web Services for this).

Jerry had already used a photo gallery called Juicebox. It seemed like as good a place as any to start. The support pages stated that it had EXIF support but after doing a bit of digging the gallery only supported showing filenames. I was not able to find another gallery system that had EXIF features built-in.

Implementation

I created a test gallery on my Teachable school and got everything working nicely. Fortunately, the gallery is highly customizable and looking through the API; I was able to identify a few things I’d need going forward with any EXIF system. One thing to note, we needed to use the Pro version of the gallery.

I found a promising, free to use EXIF system on Github. Simply called exif-js, it allows checking an image for the EXIF data then granting access to the data stored in the photograph.

Creating a working EXIF system was fairly straightforward. On the other hand, the struggle came when getting this to work with the Juicebox gallery and consequently working in Teachable.

The client decided he’d like images to load quicker and as a bonus be more straightforward to upload. (If you’ve ever tried to upload media to Teachable to use elsewhere, you’ll know what I mean.) To do this, we used Amazon Web Services S3 storage. Each gallery created would have a new folder structure on AWS S3.

Creating galleries to upload on the site were somewhat awkward the first few times, but I created an instructional video that explained each step of the process.

Summary

The JavaScript libraries used in this site:

  • Slick
  • Exif-js
  • Juicebox
  • Flipbox
  • Custom code

We made edits to Twelve templates to get the desired look for Jerry’s website and over 850 lines of CSS.

I was able to quickly update his site’s DNS settings to allow access to Jerry Ghionis Courses from his custom domain.

Visit his amazing photography tutorials at http://ghionis.com

Leave a Reply

Your email address will not be published. Required fields are marked *