Switch to Reading Mode

Sunset - Advanced Image Gallery

Updated: November 21, 2017 17:36:09 • By Natasha L. • 831 words
  • URL: GitHub
  • Started: September 2016
  • Role: Solo Developer
  • Tech: Django/Python, CSS/SCSS, JavaScript

Dependencies

Finding a web image gallery that suits my needs and preferences has always been a challenge. On the old PHP versions of Lupinia.net, I tried almost a dozen different options, ranging from friends' undocumented independent projects to popular applications like Coppermine and Gallery2. For many years, Gallery2 was the best fit, but as time ticked on and its third-party developer community moved on to other things, it became less reliable. Its successor, Gallery3, lacked several key features I had come to rely on, so when I made the decision to rebuild Lupinia.net using Django instead of PHP, I decided to eventually replace the legacy image gallery application with a Django app that could directly integrate with the rest of the site. I initially kept Gallery2 as-is, running on the old server via reverse proxy, but I spent countless hours planning and researching its successor, and in September 2016, I was able to build and implement it.

The result of that effort, Sunset, is a full-featured image gallery, with several key features not found in any other Django app (and certainly not all within the same one).

Current Features

  • Generation of resized image assets performed in background. Instead of performing this operation live upon upload, it runs as a background process/management command, which allows the use of resampling algorithms that are slower, but yield cleaner results. This also allows for an unlimited number of different sizes to be defined and generated.
  • Metadata parsing and storage. The management command that builds resized image copies also uses ExifTool to parse all available metadata, storing it in the database. Most of these go into an image_meta table, but some are specially marked for use as primary attributes of an image object. For example, if a JPEG file contains a value for the EXIF:ImageDescription or IPTC:Caption-Abstract metadata keys, that value will be used in the body field of the image object. Meta keys can be set to public display or not, or they can be marked "Ignore" to exclude them from being parsed.
  • Watermarks on image resizes/assets. In addition to simply re-sizing the original as defined in the app's settings, any of those resizes can optionally have a watermark applied. For example, this allows the watermark to be added to primary display sizes, but not to thumbnails.
  • Dynamic page backgrounds. This feature was added by merging another app I built specifically for Lupinia.net into Sunset, and expanding upon it. Image objects can be marked "Featured", and/or be assigned to one or more background tags (separate from the sitewide tagging system in DeerTrees), and the site's base template will randomly select one that matches the criteria of the current view. For categories and tags that contain image objects, this system selects from the Featured images within the current category or tag; for all others, it selects an image from the current background tag (either specified in the current category, or manually specified in the template file that extends base.html). Once it selects an image object, it uses the background-sized asset as the page background, and adds the image's title to the footer, with a link to the image's detail view.
  • Batch import of images uploaded to folders on the server. This is one of the key features of the system. Images can be individually created, but Sunset also offers the option to define a folder to import images from, with pre-populated fields (category, tags, title, description, custom metadata, etc) added to each image in the folder. Sunset will then monitor that folder for newly-uploaded images, or modifications/replacements for existing images, and process all of them in bulk, without user interaction beyond uploading the images and defining the folder's parameters.
  • Justified thumbnail grid. Implemented via a third-party jQuery library; thumbnails are cleanly arranged in a grid that retains the image's original size ratio (no cropping) with a minimum of blank space.
  • Map display for images with GPS coordinates. Implemented via Leaflet and MapBox; images with embedded GPS coordinates/geotags show an interactive map underneath the image.
  • Custom HTML tag and context processor for embedding images/thumbnails into other content. This is currently integrated into DeerTrees and DeerBooks, but it could be added to anything. Instead of needing to manually type out the <a href=""><img src="" alt="" title=""></a> sequence, I can now just do <sunset type="icon" id="" />, and it's parsed at display time. This way, it saves the amount of code I need to type/paste when I'm writing, but it also keeps the HTML code and attributes up to date if I change the title, image file, category, slug, or even the media root URL. Further future development of this feature may include a browsable thumbnail grid on admin views that inserts the relevant code with a single click.