Adding Images to Static Sites From Dropbox

  • @gridgiant

Adding Images to Static Sites From Dropbox

01 Jun 2015

The Joy and Pain of Static Sites

While static sites offer a number of significant advantages there are also a number of disadvantages chiefly in the ability to post content from mobile devices. Now this problem really becomes apparent when moving away from Wordpress, or Squarespace based system, especially for users who have been working with the mobile access apps.

But it most have a picture

Many website audiences expect large images and graphical content to accompany content. This immediately presents a problem to the text file driven static site system, which generally offers no tools and expects the user to use there text editor of choice and file system for content.

A solution to this problem can be found using a build server with Dropbox and some bash scripting.

Where to put a build server

I always recommend setting up a VM for the build server which can either be hosted online or even within the users home network as Dropbox will handle the inbound communications leaving the build serve only needing external access. This also means that the image upload process can be hidden away from users while they still have copies of all the site content.

The system works by moving content from a nominated Dropbox folder to the web server via appropriate image processing and cataloguing. For ease of management and security you should create a new Dropbox account for the build server.

Setting up Dropbox

After setting up a new Dropbox account you should install the Dropbox command line tools program onto the build server. Having done this use the Dropbox web site to create a shared folder and share it with anyone that you want to be able to add images to the website. Doing this means that in the future you can rescind image upload access by cancelling the shared folder status within Dropbox.

The User Perspective

From the users point of view only a single action is need, they accept the shared folder invitation and from that point any images they place in the folder will be uploaded to the website.

Meanwhile Back On The Server

On the build server a temporary folder is required. Files are then copied from the Dropbox shared folder and replaced with an empty file. After they are copied out of Dropbox two different size versions of the image are made (using mogrify) and then uploaded to the web server. The bash script I use, icss, can be found online on github.

This script can be run as required or by a user cron script.