Even the best sites need to be upgraded over time. Mediacurrent initially built the Emory Michael C. Carlos Museum in Drupal 5. Over time we've done maintenance releases and feature enhancements for Carlos, but software as well as websites have a limited lifetime. As 2012 rolled around we noticed that most of the 5.x modules have reached their end of life and certainly no new 5.x modules were being created. This lack of updated and new modules severely limited what new feature sets Emory could incorporate into their site.
Part of our responsibility as Drupal developers is to keep our clients advised of the latest and greatest solutions, as well as, advising when we think is the optimal time to upgrade. We spoke with Emory and determined that it was time to upgrade their website. This time we did something different; since it was such a large leap from Drupal 5 to Drupal 7 we decided to start with a fresh install of Drupal 7.
Freed from the confinements of upgrading from Drupal 5 to Drupal 6 to Drupal 7, we rebuilt the site from scratch using new modules and modern theming techniques. We did base the look and feel of the new site off of the old site. In fact, we had to look at the source code when we updated production to make sure that it was in fact running Drupal 7.
- Upgrade the site to Drupal 7 without losing the current functionality
- Keep the same look and feel of the old site
- Using Drupal best practices, develop the site to ensure a long lifetime
- Create an open architecture that allows the site to grow as the museum does
As the previous site’s presentation was being reproduced, our goals in theming the site were to minimize the styling and template work. At the same time, we wanted to maximize the flexibility for future needs, including changes in width for higher resolution support as well as mobile support. To this end, the Omega theme was used with the HTML5 starter kit.
We successfully reproduced the old site’s presentation with only two minor differences:
- The site’s width was slightly reduced so the default 960 grid could be used.
- There were several cases where images were displayed flush with the left side of the content area. To avoid adding additional styling for this, the default padding used for most content was used for these cases as well.
During theming, it became apparent that the width of the left column needed to be increased to better accommodate the reduced page width. Due to Omega’s ability to alter column widths within its settings, this issue was resolved in a matter of minutes without any CSS work whatsoever.
Key Modules Used
- Views were used throughout the site for: section content lists, the front page image rotator, and the front page items.
- JCarousel - As the previous site used Flash for its slider, it was decided this HTML-based approach would be used due to general flexibility, views integration, and better mobile support.
- Context - Block placement was done strictly with Context. During development, this made it possible to provide section-specific menus and header images without any code or theme-based solutions. During QA and post-launch, several one-off pages which required unique menus were needed and Context allowed them to be added via configuration changes alone.
An interesting thing to note about this site: it uses no custom modules. Every module used on this site was downloaded from drupal.org. The only coding needed was for CSS.
Our overall goal in this project was to create a site that was familiar to the end user as well as easy to maintain for administrators. Leveraging Drupal 7, as well as community created modules, allowed Mediacurrent to deliver a fully upgraded site within a short timeframe.