billk2

The most loaded question in the workplace, "How busy are you right now?"

Earlier this year the Money Observer editor wandered over to my desk. I knew this was going to be a good one, "It's just we're rebranding the magazine and we'd like to update the website at the same time. Oh, and the new-look mag hits the newsstands next month."

Money Observer is the UK's longest established personal finance and investment magazine. It started out in the 70s as a supplement to Sunday's Observer newspaper eventually becoming a separate publication. We acquired them from The Guardian Group in 2008 to complement our existing print publication Moneywise magazine, which is more targeted at the personal finance market.

At this time, Money Observer had an existing simple website and as we were already happily running a number of sites using Drupal it made sense to get it switched over. We did a quick and dirty theme build and had the Drupal version up in a few days.

Since then the site hadn't received much attention. 'Low maintenance' would be a polite description. Every month the production guy would cut and paste a couple of articles out of Indesign into Drupal.

So what impact would the redesign have on the site? Judging by new the magazine, just a new logo. Fine, a ten second job in Drupal. Actually, it was a bit more than just that. Our designer had been working on it for a few weeks. I knew it was on the radar, but hadn't realised how fast we were moving or that someone had planted a stake in road ahead. Not a stake so much as a steel reinforced concrete pillar.

So, where to start? Fortunately, the site was already running under Drupal and perhaps while we were at it we could add some extra cool stuff. The mock-ups provided by our designer was the logical first step, as building a theme is self-contained task and extra requirements can been sorted in parallel.

The main consideration when creating a new Drupal theme is where you want your regions. The mock-ups were very straightforward in that respect and eight regions were identified. The fun part for me is getting the HTML to look like the Photoshop mock-ups, which is beyond the scope of this talk and would need to be talk in itself to explain.

So once the theme is done everything looks a lot easier. The next step is to build the views. There's various ways to do this, but as we knew this site wasn't going to have a full-time editor we went for a more rigid approach. The page layouts are fixed with views supplying the content listed in date order.

Wow, the site's looking nearly finished maybe there's time to play and add some new stuff.

Money Observer had no simple way to take advantage of the daily stream of content that's created by the various writers we employ across the group. Thankfully, along with the redesigned site Money Observer also gained a part time web content editor. So we needed a simple way to allow them to pick and choose new stories and publish them to the site. This was achieved by using the feedapi module to tap in to the Cap Acc RSS feed to populate the Money Observer site. The stories are added to the content page and the editor can publish the ones they fancy.

Taking advantage of Cap Acc's video production team, a collection of Money Observer video interviews had been built up over the intervening years, so a similar process was also used to populate the Money Observer video section of the site. The videos are published to Brightcove, a third party video streaming service, and a resulting RSS feed is used to publish any new videos to the site. This was done using feedapi in conjunction with feedapi_mapper and media_brightcove.

Since before the Cap Acc acquisition, subscribers to Money Observer magazine have had access to 'Digital editions'. These were managed by a company called Dovetail who also maintain the print subscribers fullfilment. The digital editions were in turn hosted by PageSuite, who convert the print ready Money Observer PDF and convert it to a web based Flash application that allows subscribers to browse an archive of past issues as well as the latest issue before it hits the newsagents. This has been replaced using the ipaper module.

The ipaper module works with Sribd, a site that's easiest described as Flickr for documents. Users can upload and share documents, books, presentations and magazines. The ipaper module allowed us to create an integrated interface to our back issues and circumvent the need to use Dovetail and PageSuite. It also gave us the possibility to easily allow public access to older back issues and thereby give the magazine's older content greater distribution.

Another legacy product we have is a weekly email newsletter. Up until the redesign, this consisted of a text-only email that was written every Monday and posted using Insterspire, a web-based email marketing tool. Using a combination of views, node reference and a custom page theme we were able to create a simple process that allowed the site editor to compile, sort and rearrange a collection of stories from the past week. The URL of the resulting page is posted directly into Interspire, cutting the production time down to a matter of minutes.

To make the job easier for the web editor, we've used the wysiwyg module to help with content creation. Now, instead of writing using a word processor and pasting the resulting text into the form, they happily write their copy directly into Drupal. We're also working on a module that will do a price look-up from our shareprice.co.uk site.

The Money Observer site supports advertising using the OpenX adserving service. Rather than putting the various embed codes directly into the theme templates, they're rendered using a simple module that creates a few blocks that can be positioned where appropriate. This allows some flexibility over which pages support ads and to which users.

We also wrote a simple module to allow users to subscribe to the email newsletter. A form that posts a subscription request to Interspire and renders any responses within the Money Observer site.

So we made it. Literally. And by all accounts everyone's very happy with it. Of course there's plenty of other stuff we'd like to add soon: integrating the Scribd search API into Drupal search, deeper integration of the Shareprice content, two-way integration with Interspire, the inevitable iPad app, etc. But on the whole, thanks to Drupal I think we got away with it.

Modules mentioned

Views

http://drupal.org/project/views

FeedAPI

http://drupal.org/project/feedapi

Feed Element Mapper

http://drupal.org/project/feedapi_mapper

Media: Brightcove

http://drupal.org/project/media_brightcove

iPaper

http://drupal.org/project/ipaper

Node Reference (CCK)

http://drupal.org/project/cck

Wysiwyg

http://drupal.org/project/wysiwyg

Other notable

Nice Menus

CSS/jQuery drop-down, drop-right and drop-left menus to be placed in blocks

ImageCache

Dynamic image manipulator and cache.

Imagecache Canvas Actions

Actions for manipulating image canvases layers, including watermark and background effect. Also an aspect switcher (portrait/landscape)

Twitter

Adds integration with the Twitter microblogging service.

Webform

Enables the creation of forms and questionnaires.

Complete list of modules used

Administration

Administration menu

Defines selection, check box and radio button widgets for text and numeric fields.

Environment Indicator

Adds a coloured strip to the side of the site informing the user which environment they are in (Development, Staging Production etc).

CCK

Content

Allows administrators to define new content types.

Embedded Audio Field

Defines a field type for displaying third party music, podcasts, and other audio, such as podOmatic and Odeo.

Embedded Image Field

Defines a field type for displaying images from third party providers, such as Flickr or Photobucket.

Embedded Media Field

Provides an engine for modules to integrate various 3rd party content providers, such as Video Neighborhood, Image Neighborhood, and Audio Neighborhood.

Embedded Media Thumbnail

Allows custom thumbnails for Embedded Media Fields.

Embedded Video Field

Defines a field type for displaying third party videos, such as YouTube and Google Video.

FileField

Defines a file field type.

ImageField

Defines an image field type.

Node Reference

Defines a field type for referencing one node from another.

Number

Defines numeric field types.

Option Widgets

Defines selection, check box and radio button widgets for text and numeric fields.

Text

Defines simple text field types.

Core - optional

Contact

Enables the use of both personal and site-wide contact forms.

Database logging

Logs and records system events to the database.

Help

Manages the display of online help.

Menu

Allows administrators to customize the site navigation menu.

Path

Allows users to rename URLs.

Poll

Allows your site to capture votes on different topics in the form of multiple choice questions.

Profile

Supports configurable user profiles.

Search

Enables site-wide keyword searching.

Taxonomy

Enables the categorization of content.

Upload

Allows users to upload and attach files to content.

FeedAPI

FeedAPI

Provides feed aggregation functionality, a feed management interface and an API. If you enable this module, enable at least one item processor (e. g. FeedAPI Node Item) and one parser (e. g. SimplePie parser).

FeedAPI Node

Creates nodes from feed items.

SimplePie parser

Provides an XML parser for FeedAPI modules. Uses SimplePie library. Requires SimplePie 1.01+.

Common syndication parser

Provides an XML parser for FeedAPI modules. Requires PHP5.

FeedAPI Inherit

Passes on group and taxonomy information from feed to feed items. Requires FeedAPI Node processor.

FeedAPI Mapper

Maps feed item elements to node fields.

ImageCache

ImageAPI

ImageAPI supporting multiple toolkits.

ImageAPI GD2

Uses PHP's built-in GD2 image processing support.

ImageCache

Dynamic image manipulator and cache.

Imagecache Canvas Actions

Actions for manipulating image canvases layers, including watermark and background effect. Also an aspect switcher (portrait/landscape)

ImageCache UI

ImageCache User Interface.

Media

Media: Brightcove

Embedded Video Field provider file for Brightcove.com.

Other

AddToAny

Helps readers share, save, bookmark, and email your posts and pages using any service, such as Facebook, Twitter, Delicious, Digg, and over 100 more using the AddToAny widget.

Author Taxonomy

Identifies authors using terms from a vocabulary. Supports multiple authors.

Backup and Migrate

Backup or migrate the Drupal Database quickly and without unnecessary data.

Better Formats

Enhances the core input format system by managing input format defaults and settings.

Custom Breadcrumbs

Allows administrators to define custom breadcrumb trails for each node type.

iPaper

Embed and publish iPaper documents through your Drupal site.

Menu Block

Provides configurable blocks of menu items.

Menu breadcrumb

Allows you to use the menu the current page belongs to for the breadcrumb.

Nice Menus

CSS/jQuery drop-down, drop-right and drop-left menus to be placed in blocks

Path redirect

Redirect users from one URL to another.

Pathauto

Provides a mechanism for modules to automatically generate aliases for the content they manage.

Taxonomy hide

Hides and groups vocabulary terms in node views.

Token

Provides a shared API for replacement of textual placeholders with actual data.

Twitter

Adds integration with the Twitter microblogging service.

Webform

Enables the creation of forms and questionnaires.

Statistics

Google Analytics

Adds Google Analytics javascript tracking code to all your site's pages.

User interface

Wysiwyg

Allows users to edit contents with client-side editors.

Views

Views

Create customized lists and queries from your database.

Views Bulk Operations

Exposes new Views style 'Bulk Operations' for selecting multiple nodes and applying operations on them.

Views UI

Administrative interface to views. Without this module, you cannot create or edit your views.