Code Revue: Page Control

Title Freytag's Page Control
Span 06/2012 – 01/2014
Kind Development
Format Web Application
Role Developer
Context Page CMS, custom-built

The abridged story of the first content management system I've ever built, named "Page Control", for the Smoker Lounge, formerly presented at the Fields of Night. First entry in the "Code Revue" series, inspecting the ups, downs and experiences of past projects.

The Smoker Lounge (SLSL) was a personal portfolio site I built for a good friend of mine around 2011, an independent musician, photographer and filmmaker. It was the successor project to IBA that had produced its first sparks in the year before. The purpose of the site was to display and introduce a visitor to current news, planned album releases, offering preview tracks and linking to all other sites. It should offer announcements, have a proper feel of up to date information, allow for preview songs, videos or demos and have space for custom features or landing pages to promote new studio releases.

Early draft with base appearance, not published

A first draft for the site featured an early concept for the planned LP release "Studies of the Measurement of Time" (later recompiled and publicly released as "Hometownorchidtree" in early 2013) alongside two poster tests for the "Nature's Obsession" series, featuring acoustic performances of three tracks in total. While the overall design is arguably questionable, the content structure demonstrates what was eventually combined into the first public version, showing a selection of most recent works and giving a sense of more from first glance. These components were merged into a more modern appearance in later drafts, putting the news entry into the centre, keeping a number of two images leading to more content and subpages.

Front page, most prominent version, published from 2012 to 2014

This shot shows the front page in a version that was up for the longest time — from its creation for about two and a half years. It went through a lot of feature changes but kept its appearance rather consistent throughout its lifetime. On the left-hand side is the 2013 studio album "The Desert", the second release through Osnabrück-based independent record label Timezone Records. On the right-hand side, we see a recreated promotion shot from the poster for Autun Express, a small-scale summer break music video for an acoustic version of the track Autun, recorded during a live performance at KaufBar in Brunswick. The site had a total of 36 backdrops that were selected at random for each page visited. This was a rather hefty choice for bandwidth use, as each image was on average 500KB in size. The random selection on each visit was intended to provide a fresh look for recurring readers.

Various backgrounds, used in rotation

The backgrounds were based off a series of Polaroid 103 and 600 instant film shot mostly in 2010 in various settings. Besides scaling, cropping and applied gaussian blur, there were no further adjustments made. As all the photographs were shot by Steve himself, it forms in itself the first "gallery" of the site and presents a first visual style passively, besides the central content. The different shots gave each page a tint and helped returning visitors to find something seemingly new. New images were added over the years the site was online but held on to their initial style.

Album detail page, draft for release "We Were Hundreds"

When selecting an album for the "Hear" section, the site featured a custom-made audio player nicknamed "Peter Balden" with an outlandish design for its interface. Its usage though, was rather straightforward. If they aren't immediately obvious, the buttons from left to right are for Play/Pause, Rewind, Pop-up as an external player and controlling volume. The player shows title and artist information and has a special additional feature.

One of the special features of the site was the custom audio player nicknamed Peter Balden, a player with live lyrics that ran automatically while playing. While listening to previews and extras, the player could serve texts line by line with correct timing. Of course, behind the scenes, the lines and timing had to be recorded by hand, though this would in a best case only take as much time as copying a song from one cassette to another, more than a single run was often not necessary. Years later, the music streaming service Spotify started to offer a similar feature, pairing up with Musixmatch at the time, though the feature was later discontinued after they had broken up their partnership. These texts and timings were supplied by the community and had a generally low quality, were often incomplete or for a different song altogether.

Page Control login form

At the heart of the site was the prototypal content management system called "Page Control" with a touch of personal branding. It opened to a kind of control panel for almost all site content, allowing access to the landing page's short blog articles, albums, tracks, videos and photographic galleries. A central menu allowed access to different create, edit and delete options for the managed contents within. The entire lounge was written in PHP5 at the time and used a simple MySQL database, no frameworks to be found. As far as I remember, the only component with JavaScript was the audio player.

Editing view for front page
Editing view for news articles

As highlighted before, the site's audio player was able to display lyrics in time with played songs, helping out visitors with the urge to sing along. Text lines and timing could be recorded for any track on the site (and indeed were added to most uploaded songs at the time). The step was called "Associate lyrics" and started with adding songtexts separated line by line. After adding all lines, the next step was the lyrics timing recorder, an interactive module built specifically to allow the easy capture of correct timings for each line, very similar to a subtitle editor where the user advances to the next line with a keypress or click. After the timing was added, the recorder had an instant preview option to check for errors.

While no code from Fields of Night was used in later projects, the concept of Peter Balden and the live lyrics display was picked up and developed again for Luxembourg Records in new garments. The controls were streamlined, retaining some of its outlandish charm but fitting a more modern site. Instead of one player for each track in any release, Records used a single player and a playlist selection below. Years before work on Records, though, playlist-like playback in sequence was also possible by a coordinator nicknamed Edward Balden that allowed for the next track to start after the preceding one finished.