returncontrol

How do you build a modern news Web site that gives editors the tools they needs to serve San Francisco with in-depth reporting on important local issues — all without spending millions of dollars? You use Drupal.

That’s exactly what the nonprofit news organization SF Public Press did when it built SFPublicPress.org.

Although the startup focuses on the stories that other news organizations aren’t covering, it still has to compete for the attention of today’s tech-savvy readers who have many options for receiving news.

To do that, SFPublicPress.org offers much more than news articles on the Web. Among other things, the site features:

• audio and video to help convey what text can’t;
• an interactive media gallery that gives readers new ways to dive into stories;
• easily-accessible bio pages for reporters and editors so it’s clear who is behind each story;
• RSS feeds to keep readers informed as soon as news hits the site.

With all these features and more, it’s hard to believe that building the site took fewer than 60 development hours. (It’s hard to believe even for me — and I built it!)  But that’s the power of the Drupal content management system, and that’s why I recommend it as the platform for many of my clients’ sites.

How We Did It

Analysis: When SF Public Press was formed in 2008, originally as The Public Press, the staff launched a blog-style Web site on Drupal 5. By the time I met with them in Spring 2009, they had expanded their coverage and were ready to move away from the blog format.  They also wanted to add multimedia features so they could tell stories with more than just text.

But they weren’t sure whether to do that by adding modules to their existing site or starting over on a pre-assembled Drupal distribution designed especially for news sites, like ProsePoint or OpenPublish.

So the first step was to install and review both ProsePoint and OpenPublish.  While both showed a lot of promise, the staff ultimately felt that either option would require a lot of deconstructing of unwanted features and customizing of others to make the site truly “theirs.”  Instead, they opted to build on what they had and incorporate the components they liked best from ProsePoint and OpenPublish and other news sites.

Upgrade: To get started, the site needed to be upgraded from Drupal 5 to Drupal 6 so we could make use of improved functionality in the latter version, such as Views 2. So I began with a full audit of the site’s modules, uninstalling the ones that were no longer needed and researching the upgrade paths for the ones we were clearly keeping.

Fortunately, the process is well documented.  Unfortunately, it’s tedious.  After upgrading the core, I upgraded each contributed module one by one, thoroughly testing for problems after each update.  The Views needed to be rebuilt as we were going from Views 1 to Views 2.  But ultimately, I didn’t run into any unexpected problems.

Design/Theme: The organization didn’t have the resources to hire a designer, but the staff had liked ProsePoint’s theme, which was based on a Wordpress theme called The Morning After. Since the theme is freely available under the Gnu Public License (like Drupal), we used it as our starting point for the new SFPublicPress.org.

Through iterative changes to templates and stylesheets, the current theme manages to be unique while maintaining many of the clean, authoritative elements of the original theme.

Featured Articles: Good news sites, like good newspapers, draw a reader’s attention to the most interesting or most important articles each day by giving them top billing.  But when the blog format was in place on The Public Press site, all articles had the same “weight”.  New articles simply appeared at the top of the homepage and were pushed down as the staff published additional articles.

The new site gives editors much more control, thanks to the Nodequeue module.  The “queue” we set up lets editors select up to four articles to feature on the homepage.  The articles can be placed in any order and can stay in the queue as long as editors feel they’re relevant.

Images, Video, and Audio: The staff is well aware that, to go beyond traditional news presentation, news on SFPublicPress.org must be a multimedia experience.  So we used CCK to add a full set of media fields to the article creation form in Drupal.

Authors and editors can upload multiple images and apply captions.  With the help of Imagecache and Views the images are then automatically resized and displayed in a neat column to the right of the article body.  Clicking on an image pops up a larger version, thanks to Thickbox.

For video, we used the Embedded Media Field module, which allows editors to easily insert videos from YouTube, Vimeo, and other video sites.  And for audio, we used SWFTools to insert an audio player directly into article pages.

For articles with multiple media attached, editors can determine which item gets promoted in the teaser on the homepage.

Media Gallery: The site’s media gallery provides an additional means, besides headlines, to draw readers into stories. Much like “pull quotes” in a magazine, the thumbnails on the homepage catch a reader’s attention and invite them to click and explore further.

Building the gallery was an interesting challenge because it was important to the staff that the media gallery not only include images from the stories, but also videos.

Normally, this would have been easy with Drupal’s Views.  But the site’s use of embedded videos rather than uploaded videos meant that Views didn’t recognize the videos as files.  To intersperse embedded video thumbnails with standard image files required the development of a custom, complex SQL query to pull together all the needed components.

Other than the code needed for this, and the modifications made to the theme, the site uses very little custom code overall.  The majority of the site’s functionality is provided by contributed modules.  This is a testament to the power of Drupal.

Topic Navigation: Another entry point into the articles is the topic navigation just under the header.  The navigation is based on the “topic” taxonomy that the staff uses to categorize articles.  Readers can use the dynamic menus to drill down to a specific subtopic of interest (thanks to the Nice Menus module).

In particular, SF Public Press’s navigation shows how a Web site can use its taxonomy to set itself apart.  Whereas traditional news media often have taxonomies that feature “Sports”, “Business”, “Entertainment”, and so on, SF Public Press features clearly local topics like “Civics”, “Streetscape”, “Schools”, and “Diversity”.

Migration: Because editors continued to publish articles to Public-Press.org while SFPublicPress.org was being built, we had to deal with a common content migration problem: how to get the published articles into the new site with as little manual data entry as possible.  Likewise, new user accounts had been created on Public-Press.org that needed to be moved.

The solution involved taking a snapshot of the node, node_revisions, and users tables from the database of the old site and loading them into the new site’s database.  The staff still needed to go through the articles on the new site to manually “massage” each one — for instance to move images and video into the new media fields. But having the article records already in the system with the titles and body text in place helped ease the burden and provided a foundation to build on.

An Iterative Process

One of the wonderful things about working with SF Public Press is that the organization sees the development of its Web site as an iterative process rather than a monolithic construction project.  No doubt this is one of the factors in the project’s success.

Instead of specifying an exact feature or solution, project leaders often describe a “problem” — for instance,  needing a way for editors to insert videos into articles.   Because Drupal has such a broad base of freely available contributed modules, there are usually one or more “solutions” that can be prototyped without writing any custom code (such as the Embedded Fields module).    The staff then tests the solutions and notes the changes they’d like to see.  This allows them to add new features to the site rapidly and at low cost.

Indeed, SF Public Press continues to look for ways to improve the site.  It will soon be conducting focus groups with readers to find out how the new site is working for them, and there are sure to be changes as a result.

If there is one thing a news organization can’t do enough of these days, it is adapt.  With Drupal under the hood of its Web site, SF Public Press won’t have any problem with that.