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 it all together.
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 image was taken
- ISO speed
- Focal Length
- Aperture (f-number)
- Exposure Time
- White Balance
- Many others not needed by the client
So, there were two things I had to investigate even before I started working with the client.
- Is there a photo gallery system that will work well inside Teachable, and
- 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.
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 allowing access to the data stored in the image.
Creating a working EXIF system was fairly straightforward. The struggle came when getting this to work with the Juicebox gallery and then working in Teachable.
The client decided he’d like images to load quicker and as a bonus be easier to upload. (If you’ve ever tried to upload images 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.
- Custom code
Twelve templates were edited to get the desired look for Jerry’s site as well as over 850 lines of CSS.
A quick change to his DNS settings allowed his school to be accessed from his custom domain.
Visit his amazing photography tutorials at http://ghionis.com