The system that manages and serves this site
This website is delivered by a home-brew content management system that allows me to make the site look and behave exactly how I want. There are plenty of open-source image gallery systems available, but none of them provide the customisablility that a dedicated system can provide.
Although it's a bespoke system, it's built from widely used and well-tested components. It's written in Python, using the Django web programming framework. It also uses Bootstrap, jQuery, Swiper, CKEditor, jQuery Lazy and SortableJS
Screen grab of the editor's interface 🔗
Here are some of its features:
- Web-based content management. All the content editing and management is done in a web browser.
- Mobile compatible. Image galleries support swipe navigation.
- Uses responsive images to adapt to the viewport size and screen resolution.
- Human-readable "clean URLs". Instead of URLs ending with something like
index.php?id=7352739438&x=9&p_q=b, you'll only see things like
/here-and-there/outback/mount-arckaringa-after-sunset. This is particularly nice if you want to send someone a link in an email
- Images can belong to more than one gallery or article. Each image knows about all of its occurrences and shows a "this image also appears in…" link.
- The site structure can be reorganised without breaking any links. The system allows pages and galleries to be moved around and renamed. The system keeps track of where everything has ever been and what it was called. Instead of returning "page not found" for old links, the system follows the historical chain of reorganisation and redirects the browser to the new URL.
- Linkable pages. Some image galleries display images in a pop-up that emerges from the gallery page in some animated fashion. The trouble with these techniques is that they often don't provide a way to create a link to a particular image page, so you can't bookmark it or create a link to it in an email or another web page. It also means that search engines can't refer to those images because there's no URL to go to that will make the image emerge from its gallery again. They often make the browser's "back" button misbehave too. Being able to link to things is an important part of the web - in fact it's fundamental to its operation.
- Built-in "What's new" functionality. Each page has an associated change-log that you can edit at any time. These change-logs are used to generate the "What's new" list on the front page, or anywhere else you'd like to put it. The change-log display can be restricted to those pages in a specific branch of the site, so you can have, say, a "What's new in Landscapes" list in the landscapes section of the site.
- Slideshow style image loop of selected images. You can put a looping slideshow of randomly selected images from one or more galleries on any page. You specify the galleries to take the images from and the number to loop over and it will randomly choose a subset to fade between. You can specify height and aspect-ratio tolerances so that the images in the selected subset don't differ in size too much from each other.
For the more technically inclined… 🔗
- All the text content and site structure is held in a SQLite database. All the images are stored as files. This makes it easy to have an offline copy of the site that you can edit at your leisure, which you can then publish to a live site by by using rsync to efficiently copy the SQLite database and image files. If you're on the road, you can update the live site directly, then rsync that back to your offline copy again when you get home.
- The URLs don't have any query arguments. This makes for shorter and more readable URLs and provides more opportunity for caching.
- Thumbnails are implemented as tiles. This cuts down on network traffic and cuts down on the number of URLs that need to be cached.
- Images are added to the site by dropping image files into a "feed hopper" directory on the web server. You then run an ingest operation which scales down the images to the desired sizes, watermarks them and puts them into an image queue. The name of the file that the scaled images were generated from is saved in the Xmp.xmpMM.DerivedFrom metadata field of the resulting JPEGs so you can find the original file if you need to.
- To add an image to the site, you navigate to the desired part of the site in the editor's interface and choose the "New page" tab. This presents you with the next set of images in the queue as the candidate images for the new page. You can skip ahead in the queue to choose a different image if you want. Once you've got the right image you can fill out the accompanying text fields, then hit "save" to pop that image off the queue and add it to the site in a new page. URLs are generated from the page titles, disambiguating them as necessary. Alternatively, you can append images and accompanying text to existing pages by using the "Edit" → "Add content" tab instead - roughly equivalent to appending a new paragraph to an existing page.
The image watermarking operation examines both the bottom left and right corners of the image to figure out where to put the watermark. It will choose the corner that has the least brightness variance (a reasonable surrogate for detail), and will use either a dark or light watermark depending on the average brightness of the chosen corner.