How we built Transition Network website
By Ed Mitchell 8th March 2011
Massive thanks to Jim Kirkpatrick for this fantastic outline of how we built this site using which drupal modules and why.
Ease of administration
Moving around and managing a big site like this one can be a chore – so many options and pages, so many little tasks to be automated… These modules are a must to take the hassle out of administering the site:
- Administration menu – a black drop-down menu bar giving almost instant access to the whole administration area. Without it Drupal 6 is a pain but I reckon even the nicer to use Drupal 7 benefits from this one.
- Revision Deletion – Enabling automatic revision creation on your bigger content types is essential to avoid those, “Oh no, it’s gone!” moments… But lots of users who can edit – some of which with heroic OCD levels – mean the revisions stack up and the database grows without this module. It automatically removes older revisions to keep your site bloat-free.
- Taxonomy Manager – If you have a lot of free tagging on the site, or you want to move your vocabulary terms around, or enter 10 at once, this module is handy.
- Nodequeue – Allows admins to create lists of nodes with an arbitrary order. We use it, amongst other places, for the ‘Featured’ content on the homepage and keeping a list of good articles for the newsletter.
- Backup and Migrate – Make and restore database snapshots with a little more intelligence than a plan SQL dump. More a developer tool, but nice to be able to take a snapshot right before an update and know you can just roll back if something goes bad.
Better content entry
Entering content out the box on a Drupal site is rather sparse but simple. However, once you have dozens of extra fields and options flying around, or more media, or need a bit more integrity of data, these will certainly help:
- Automatic Nodetitles – Some content just doesn’t need a user to be able to change the title, because it’s derrived from data on the page or follows another rule. This module removes the title field from certain content types and allows Tokens or PHP to be used to fill it instead. We use it to ensure people’s profiles match their actual first, middle and last names.
- Autosave – Editing a long form like Initaitive or Project profiles can take time and risks the accidental loss of your input. This module keeps seamlessly automatic saves of an incomplete form for safety or review.
- Better Formats – Extends Drupal’s input formats by adding per-content type defaults for each role. We use it lots to ensure, for example, only ‘Basic HTML’ is allowed for comments by normal users, but Administrators can use ‘Full HTML’ on their content.
- Multi-column checkboxes radios – arranges checkboxes and radios into colums, rather than a long vertical list.
- Node limit number – prevents more than a certain number of nodes being added by a criteria – E.g. A user can enter only one Initiative.
- Unique field – Stops duplicated fields by criteria – E.g. a user cannot enter an initiative with the same name as one already on the site.
- Hierarchical Select – Allows hierarchies to be selected, but all nice, like.
- Wysiwyg – Allows various editor profiles to be associated with input formats so, for example, ‘Basic HTML’ gets TinyMCE with bold, italic, bullet list and link buttons, while ‘Full HTML’ gets FCKEditor with all the bells and whistles.
Images & files
- IMCE (with IMCE Wysiwyg API bridge) – Allows selection, upload and thumbnail creation of images to be integrated with our WYSIWYG editor.
- Insert – Allows images in Image fields to be inserted into the WYSIWYG editor.
- Image Resize Filter – After one selects an image (via IMCE or Insert), this filter ensures that if the user resizes it, a proper derivative image of that size is created. Handily avoids than the classic HTML faux pas of people just squeezing a 2Mb digital camera photo into a 200×150 pixel space and assuming they’ve made a thumbnail.
- ImageAPI – Allows lots of modules to use and manipulate images in a consistent way. Boring but essential.
- ImageCache – Great module that uses pre-sets to create derivative images automatically from image fields, caching them for later. E.g. ‘Logo’ field allows images up to 1000×1000, but logos are always displayed scaled and cropped to 300×300.
- Lightbox2 – A nice lightbox/slideshow effect. works great with ImageCache so, for example, an uploaded image has a thumbnail made that links to a lightbox to display the original.
- iTweak Upload – makes the process uploading images and their eventual display all nice and stuff.
Custom content types & fields
Adding new content types with custom fields is the bread and butter of a good Drupal site. We need to represent people, initiatives, projects, news, groups, events, resources, topics and more so we need these bad boys:
Content (CCK)
You need this to add fields of various kinds. It provides many handy sub-modules, both built in and added-on, like:
- Fieldgroups – groups fields and things.
- Email – validated email addresses.
- FileField – attach files to nodes with metadata.
- ImageField – upgrades FileFields to handle images and their special meta data.
- Link – HTML links, both internal and external, with titles and validation.
- Option Widgets – User interface for various fields – essential.
- Number – with custom decimal places, formats and pre/suffixes.
- Date – a whole collection of date-related modules, essential to do powerful stuff with dates.
- Calendar – provides calendar views with the Date module.
Connecting data
Modelling the relationships between nodes, users and other nodes provides a truly powerful information system.
- Node Reference – relates nodes to nodes – E.g. a project with its related initiatives.
- User Reference – relates users to nodes – E.g. an initiative with its primary point of contact
- Corresponding Node References – need references from one node type’s field to stay in sync with another node type’s field? This makes sure that if I, say, edit the ‘related patterns’ field on a resource, the ‘related resources’ field on the appropriate pattern updates automatically – and vice versa.
- Node Hierarchy – Allows hierarchy for pages, e.g. ‘About us’ -> ‘Our staff’ etc. Required as Drupal 6 is a bit weak out the box for this with only the core Book module doing this job, and only doing it clumsily…
Location & mapping
Having the system understand mapping and be able make sense of postcodes and addresses is really helpful for localised data and searching.
- Location – a suite of modules allowing international addresses with their coordinates to be associated with nodes, taxonomy terms and users.
- GMap – Allows the data held in Location to be used to create Views displays on Google Maps. Also has the advantage of being able to use Google’s location power to get the coordinates for an input address, postcode or town.
Navigation, user access & user interface
Getting around a site and prsenting information in a consistent, compelling way to users is essential.
- Menu Block – Turns sub-trees of menus into blocks. Hence navigation that would otherwise be deep inside a drop-down or hierarchy can be presented at the level the user is at.
- String Overrides – Allows individual strings in Drupal’s UI to be changed. E.g. ‘Flag as abusive or spam’ can become ‘Mark as nonsense’. Any module using Drupal’s t() method (and they all should) can have its string overridden.
- Node access user reference – Extends a CCK user reference to allow the referred users to have view, edit or delete rights over a node. Used by this site for ‘Initiative profile also editable by’ field, amongst others.
- CCK Private Fields – Allows any CCK field to be given the option of being made ‘Private’ by a user, so that users can choose whether to reveal it or not. Puts privacy control in user’s hands.
- Custom Breadcrumbs – Allows views, node, panels and taxonomy to be given their own Token-generated breadcrumb trails.
- Locale, Content translation – Allows Drupal to know what location a user or content belongs in, and then use different user interface language and formats (date, money etc) accordingly.
- Custom Error – Overrides Drupal’s ‘404 Not found’ and ‘403 Access denied’ errors with more human-friendly ones.
- jQuery UI – Used by date picker and Panels inline editor… Interactive UI candy.
- Web Widgets – Allow Views to be made into little widgets of script so other sites can show the latest projects, initiatives or views on their own site.
Security, privacy & anti-spam
Administrators want certain information private, and users want their private data kept hidden. On top of that are the lurking t*ssers that ruin the internet for the rest of us – you know: spammers, trolls and hackers.
- Abuse – Allows a user-, post-moderated process so users can say ‘This is nonsense’ and administrators get alerted and check it out. Part of the front line against spammers and trolls.
- Content Access – Extends Drupal’s permissions and node access to allow fine control over what roles can see, edit and delete various content types.
- Content Permissions – As above, except uses Drupal’s permissions to give every CCK field added its on per-role edit and view permissions.
- Private – Allows a user to say ‘make my profile private’ and hide it altogether.
- Secure Pages & Hijack Prevention – Ensures admin sections and sensitive pages (registration, user accounts etc) use an SSL encrypted HTTPS connection to hide content from prying eyes.
- (re)CAPTCHA & Mollom – We use both these anti-robo spammer tools. They add the wibbly ‘type the letters in the image below’ challenge to sensitive forms. Mollom is like captcha, except it’s a much more powerful because it’s a smaller target (in that it has many less installations worldwide) and also performs textual analysis on the content being posted as an extra line of anti-spam defence.
- Terms of Use – Adds a ‘Terms of use’ link and checkbox to user registration.
Drupal core, development tools & Swiss army knives
There are a set of modules that I personally add to pretty much every install. They either give Drupal lots of power or fix a yawning gap in the core system’s abilities.
- Chaos tools – seems to do nothing (in that it has no real UI of its own) and everything (in that many many modules require it). Kind of a uber-reusable content and utility tool kit hoojamaflip. You need it, trust me, even if you don’t think you do.
- Views – Need I say more? The true Swiss army knife of Drupal.
- Views Content Panes – Allows views displays to be dropped into Panels (below) and customised within Panel’s admin pages… Means 1 view display can often do what 3 could before since they’re customisable at the point of display.
- Views Custom Field – A PHP block as a field within a view with data access to the current row being rendered… Very very handy for all those little odd jobs.
- Panels – Allows you to override layouts, connect views, reuse content and blocks, build multiple variations of page views AND puts that power in the hands of normal, non-techy editors and admins. Has really come of age in the last 12 months.
- Custom content panes, Custom rulesets, Page manager, Stylizer – Allow panels to have its own ecosystem of content generation, styling and intelligence that hooks right into your own pages and layouts.
- Context – Really good for saying ‘This is the
section of the site’, and then doing things according to that. Best used for showing certain blocks on certain sections and providing theme and CSS variables at handy moments. - Rules – Adds a dollop of automated intelligence by getting Drupal act when certain criteria are met. E.g. “When user creates a new initiative profile, email administrators” or “Non-admin users can only create 1 Initiative Profile”
- Pathauto – custom path rules for taxonomy, users and content types… E.g. “people/jim-kirkpatrick” is much nicer than “user/2462”
- Token – Simple yet effective, allows tokens (e.g. “[node-tite]” to be placed in fields to facilitate easy data-driven strings.
- CacheRouter – not really a tool as such, but takes load of the database by caching common queries to disk. Also works with Memcache and other server-side caching nerd-tech.
- Feeds, Job Scheduler – The former is a powerful aggregation toolkit for grabbing a few blogs we import as first-class nodes on the site – like Rob Hopkin’s blog… The latter makes the former all schedule-y.
Users & groups
Every site needs users – and they need to be able to communicate, congregate and cogitate collectively.
- Blog – Multi user blogs, like a big bucket of simplified WordPress installs for users with the ‘blogger’ role.
- Content Profile – Replaces Drupal 6’s funky smelling Profile module with an actual CCK-enhanced content type. Hence all person profiles are nodes on this site.
- Organic groups – Allows the Community Microsites and Workspaces to group and manage many related users. Provides each group a nice workspace with their own features.
- Advanced Forum – Enhances the core Forum module with a bunch of nice features
- Author Pane – needed by Advanced forum, but handy for showing a user’s summary and online presence.
- LoginToboggan – A collection of nice tweaks to make the login and registration process better, like being able to log in via email or username. Also uses a role ‘pre-authorised’ which means a user is registered and gets a few more rights than anonymous people, but still needs to validate their email address before becoming a first-class registered user.
- Nodeauthor – A little bio block for the bottom of posts. We use it in blogs mainly.
Messaging, comments & notifications
Commenting is a key part of any interactive site, but so are notifications of changes to the site to keep users up to date.
- Contact – Both the name of the core module and a drop-in replacement with a few improvements. Allows users and the site as a whole to be contacted.
- Comment – Allows, erm, comments.
- Comment upload – Allows files to be attached to comments.
- Mime Mail – Allows messages to be sent via HTML, and users to opt in to plain text only.
- Mailchimp – Connects the site to our Mail Chimp account so that people can register for our newsletters from within Drupal.
- Messaging, Notifications – These two work in harmony to allow users to receive messages about related to their subscriptions. These subs can be to content types, authors, or threads they’ve been involved in. Messaging handles everything from plain emails to Twitter and SMS integration.
Searching & SEO
Need to find stuff inside and outside your site?
- Search – Core search module. Indexes new content and allows users to type what they want.
- XML sitemap: automatically creates a XML Sitemap document for the search engines to eat. This means they know what’s changed because we tell them, rather than them trawling every page to find out. The result is much faster updates in the search listings.
- Google Analytics: really good anonymous statistics aggregation, very helpful for seeing what people like and do on any site. Google isn’t evil quite yet but might become so at any moment… We therefore might change to an alternative statistics system sometime this year. Strongly recommended for those without a pet sys-ad, or a tinfoil hat.
Transition Network specific
We wrote – or generated – these modules to do Transition-y stuff…
- Transition Sharing Engine Client: talks to the Sharing Engine and provides a panel pane that can return all news within a certain radius of a geographical point. Used for the Community News pages, the Transition Near me page, and the ‘Stories from
‘ block on initiative pages. - Transition Extras: a few tweaks to Drupal’s behaviour. Only a couple of dozen line of code but doing sterling work nonetheless.
- Features: (Initiatives Directory, Transition Events, Transition import blogs, Transition import news, Transition News, Transition People, Transition Themes) – These use the Features module to wrap up views, permissions, content types and fields into a mini module. Our features are presently very out of date, partly because we were using them right at the beginning when Features was young and wet behind the ears, and partly because we want to let it all settle before spinning these of into proper modules to be eventually used by other sites.