Music Box Theatre, powered by ExpressionEngine, gets an overhaul

While upgrading from EE v1 to 2, we restructured the web sites’ data, streamlined the templates and CSS, added new design elements, and sharpened the typography.

Since Engaging built out the Music Box Theatre and Music Box Films web sites in ExpressionEngine 1.x in 2009, not only have the sites grown but so have Music Box and ExpressionEngine themselves, to the point where it was time for an overhaul.

Back then Music Box was acquiring a fine new independent or foreign film every year or so; now they’re doing nearly one a month. The Theatre was holding a special event once in a while; now these occur regularly and are increasingly varied. ExpressionEngine has moved on from v1.x; now 2.x is the standard with a plethora of powerful and mature add-ons. And as the editors have requested new functionality, the sites have grown piecemeal, making the codebase more complex and the design increasingly haphazard.

Moreover, a couple of structural choices made back then were in retrospect mistakes. The two sites are powered by a single EE install using Multiple Site Manager, and because a film is a film is a film, we had a single Films channel to power both sites placed in the MBF site. But since posting new content to the MBT site usually requires posting new films, the editors had to switch back and forth between the two sites, which was irritating. So we began the overhaul by creating a new Films channel in the MBT site and transferred all films to it except MBF’s own. Since the two Films channels are in different sites they cannot share the same field group, but their fields can be named identically and thereby handled similarly in templates.

The second structural mistake was with film stills and reviews. Because each film could have a number of these, and in order to maintain maximum flexibility, we set Stills and Reviews as their own separate channels. Over the years however, despite many requests for additional functionality, there were never any for displaying reviews or stills separately from their film; this flexibility had proven to be overkill. And it came at a price: extra work for the site editors, who for each still and review had to think up a title (not even displayed) and select the film from among hundreds in the relationship field pulldown. For the overhaul, we replaced the Stills and Reviews channels with Stills and Reviews matrix fields within the Films channels.

The most significant development however has been what we dubbed the capsule codebase. The initial build had been quite complicated: There are screenings and there are films screened, and in most of the various lists of future screenings — Now Playing, Up Next, Coming Soon, Special Events, Midnight Movies and Matinees — we obviously don’t want to show every screening. Rather, each film should appear only once in the list, but we do want the sort to be chronological by screening and sometimes for each film to list all its subsequent screenings. Achieving this required a surprising number of embedded templates, and only Midnight Movies and Matinees shared code, so there were a number of somewhat complicated codebases to maintain. The new capsule codebase consolidated all these various lists of future screenings into a single extended SQL query. EE2’s new snippets functionality enabled placing the bulk of this query into a single snippet, leaving only the query’s final few lines, which differ for each list, in each list’s template.

The capsule codebase powers not only these lists but also Showtimes and the sidebar’s new Today’s Showtimes, which unlike the others do show every screening.

As well as making the site immeasurably easier to maintain and develop, the new codebase also hugely improves the site’s performance by relying on a single large query instead of the hundreds and occasionally thousands of smaller ones generated previously by the myriad of relationship fields in nested templates.

Innards done, we improved the presentation. We streamlined the CSS and strictly defined the various type styles for film titles, credits, showtimes, descriptions and collections. In order to promote MBF at MBT we changed the latter’s header, subtly mimicking the marquee outside the theatre itself. To better promote the theatre’s neighborhood partners, they now appear in the sidebar as a user-operated slideshow. And the codebase streamlining is carried through all the way to the presentation, so that film capsules appear consistently throughout the site.

With this overhaul, the code is now more maintainable for the developer; the system easier to operate for the editors; and the site faster, more informative, consistent and visually pleasing for users.

Third-party add-ons:

[Update, 2012 May 28] The Music Box Films site has been split off, redesigned by others, and is now no longer running on EE.