Excel at Drupal 8 structuring

For large-scale Drupal projects, one of the tools we use at the requirements-gathering stage is a build spec document. Previously, we used the one from palantir.net’s blog post. But with the arrival of Drupal 8, having Media in core, and the Paragraphs module, we needed an updated version.

Drupal 8 Build Spec 1.0

Although this is a technical document, mainly for use by developers, producing it at an early stage helps to inform the whole project by raising questions about how the system will work. For example:

  • “What page templates do we need?” – By listing likely content types, as well as views, we have an idea of what templates will need to be designed, and what fields are likely to appear.
  • “Is this vocabulary really a content type?” – If you find that a vocabulary is being given fields and is likely to have its own templates, you might consider making it a content type instead.
  • “Should the banner image in news/events items be mandatory?” – If clients don’t have appropriate images, will they be able to use default images, or will the design need to accommodate items without images?
  • “Can programmes belong to more than one theme?” – If the design uses colour-coding, what happens if an item can have more than one theme attached (or none)? Can the design accommodate this?
  • “How will the site be structured and what should URLs look like?” – In addition to sitemaps, there’s a philosophical question of how to structure paths and where each item of content should live. By nesting destination pages under a theme, you risk limiting the flexibility of these pages and creating unwieldy URLs. Defining simple paths based on content type is often cleaner and more flexible.
  • “Should this intro text include HTML?” – The intro text in a design may be plain paragraph text, but will users want to use simple formatting?
  • “What image styles do we require?” – How should the system scale and crop images, and will content editors need to find images in specific dimensions?

This is a sample of the types of question that are prompted by filling in the spreadsheet, and all require input from clients, copywriters, designers, and front-end and back-end developers. For this reason, it’s useful to complete the spreadsheet early in the process. Whilst the document itself is technical and geared towards Drupal developers, it can be shared with all parties, alongside other requirements documentation such as a more traditional functional specification document (with MoSCoW prioritisation) or user stories.

Discover the ECA Advent Calendar 2015

The ECA Advent Calendar 2015 takes up where the 2014 calendar left things.

Discover the ECA Advent Calendar 2015

This year’s calendar includes offerings from students at Edinburgh College of Art, in varied programmes such as Animation, Music, Film & TV, and Textiles.

Like in 2014, there is a wide variety of content, and lots of humour and talent on display.

ECA ADvent Calendar screenshot


CHSS Research Impacts Site is live!

Every now and then a project brings the whole team together and combines everyone’s knowledge and expertise.

It’s always extremely rewarding to see a final product so we’re very excited to announce the launch of the University of Edinburgh’s ‘Research Impact’ site. Going live today after months of planning, building, recording and editing we’re pleased to say it looks great! We will be adding new case studies and improving the website over the next few months but are very happy with announcing what’s in place to the big wide world. And so without further ado… (drum roll please…) here it is!


Humanities and Social Science Research Impact websiteResearch Impact website As a world leading university much of the research that goes on in Edinburgh is helping to change world politics, law, economics, social thinking and practises (to name a few!). Here at the uni we felt that the impacts of many of the research studies in the College of Humanities and Social Science were so outstanding that they had to be showcased. The Research Impacts site has taken some of the biggest personalities and most impactful studies and given them a platform. From rebuilding the face of an ancient Egyptian mummy to the impact of neuroscience on The Church of Scotland, the topics and staff featured are vast and all equally fascinating. Building the website, and in my case producing the video features, was (and is) a huge task given that even though these academics are leaders in their fields they can be far too modest or, heaven forbid, camera shy!

Continue reading

Waiter, there’s a Baboon in my Drupal! Or how to use Drush in Windows with Babun to manage your Drupal site

I was struggling to find a robust solution to install and run Drupal’s Drush in Windows with MySQL and rsync all playing along nicely.

I run virtual machines to get around this for the larger, more sophisticated sites, but it’s nice to be able to fire up Uniform Server (my preferred wamp stack) now and again and just run things locally. I have tried a  lot of solutions, but the cleanest so far has been to make use of Babun, a rather cool package developed by Tom Bujok and Lukasz Pielak.

Drush command being run on the Babun shell

Babun (pronounced Baboon) is a pre-configured Cygwin with a lot of addons and lot’s of other bells and whistles including a zsh/bash shell and Git. You can download and install the software via:


Continue reading

Integrating a Drupal 7 website with the University’s EASE authentication service

ease1In the web team we recently took over the technical maintenance and development of the Edinburgh College of Art (ECA) website. Part of this development work involved integrating the University’s standard authentication service (EASE) with the Content Management System (CMS) used by the ECA website, Drupal 7.

Although the Drupal CMS has been used for many years throughout the University, it has not been widely used with EASE. The only exceptions that I am aware of are work I did myself in collaboration with Colin Higgs on the School of Engineering website to implement EASE authentication on a Drupal 6 plaftform in 2010, and which has subsequently been updated to Drupal 7 by Billy Rosendale, and http://www.projects.ed.ac.uk, built using Drupal 6. The University Website Programme (UWP) are currently developing Drupal 7 for use as the main University CMS and part of this development process is support for EASE authentication – and this EASE integration work was used by the web team as a model for the ECA website.

Continue reading

ECA Degree Show website

The Edinburgh College of Art Degree Show opens on 24th May, and we were tasked with developing a new website for it. In many ways this is a dream project, as there is so much fantastic content! When you have such rich content, the job of the website is simply to showcase it with an unobtrusive design. Nicky Regan at ECA produced attractive designs, based on the new ECA branding, and we brought it to life as a Drupal website.

Home Page

Home Page

Drupal was chosen mainly as it’s what the new ECA website is built on, and will ultimately be the CMS for the new University website. It made sense to give admins a similar interface as the ECA site, and it was also an opportunity to further our own technical knowledge of Drupal.

Continue reading

Building websites with ‘lightweight’ GIS functionality

Drupal and OpenLayers

In the web team we have been experimenting with and building some web-based geographic interfaces that enable websites to collect, store and display content that has a geographic element.

This content is typically things like buildings in an urban environment, content which has an important location-based dimension and thus requires geographic data-handling techniques.

Drupal OpenLayersAPI mapWe have built a website using the Drupal 7 Content Management System (CMS) and the OpenLayers API which supports the ability to build interfaces to collect and store geographic data, and to visualise that data (see image to the right). OpenLayers is a very useful open-source JavaScript Geographic Information System (GIS) tool that is not a formal part of the Drupal CMS but has been imported into Drupal with the OpenLayers module.

This module allows a Drupal website to:

  • use the full functionality of OpenLayers to display dynamic map data (using ‘tiles‘ from a WMS server) as a ‘basemap‘ in an interface (or ‘widget’) on a website
  • make use of the standard features and behaviour of current web-based mapping provided by Google Maps (satellite and topographical basemaps, ‘dragging’ the ‘slippy’ map) or OpenStreetMap (or any other ‘public’ or locally-managed WMS-compliant server) that users are familiar with
  • overlay the basemap with a data ‘layer‘ consisting of Drupal node content that has been ‘tagged’ in Drupal with latitude/longitude and placename geographical or ‘spatial’ data
  • use the OpenLayers API to easily build map interface options such as a scale bar, zoom and pan icons, marker icons, popup windows and a basemap data layer selector

Storing the data model in the Drupal database (we use MySQL) in this way (as ‘spatial’ data) allows:

  • proximity search query interfaces to be built (e.g. find all data within 10km of a supplied location)
  • graphical map interfaces to be displayed with markers that show the location of the Drupal node content (with special icons for data that is spatially ‘clustered’ together)
  • spatial data to be associated with non-spatial (‘attribute‘) data such as images, dates and textual descriptions

The Drupal OpenLayers module is used with the Drupal Views module to achieve this. As well as the Drupal OpenLayers module this ‘spatial’ functionality is also enabled with the Drupal modules Geofield, geoPHP and Proj4JS.

Alongside the graphical map interfaces for this website we also built a gazetteer interface – the gazetteer uses the Drupal core Taxonomy module to create a hierarchical list of 1380 city, town and county (local authority) placenames from the Ordnance Survey ‘official’ list (the OS 1:50,000 Gazetteer database, available from Edina’s Digimap service), and uses a Drupal view to allow the user to expand the hierarchical tree and scroll through the placenames to find Drupal content that has been tagged with the associated placenames. It is also possible to support with this system ‘alias’ placenames (such as alternative historical placenames).

Google Charts

We’ve also used the Google Charts API for data visualisation. The Google Charts suite of tools contains the Geochart visualisation tool (along with lots of other useful types of visualisation) – and because the emphasis with Google Charts is on numerical data visualisation, this is not strictly speaking a formal ‘map’ (in the way that Google Maps or OpenStreetMaps are, for example), this matches more closely with the requirements of some websites in which the focus is on the data and not necessarily the ‘map’. Google apparently calls this interface a ‘Geochart’ rather than a ‘map’, to make the distinction.

We have built a website that has these requirements and uses some numerical student data, specifically the numbers of students from a country of origin, and displays this data using the Google Charts API (see image below).

Google Charts API mapThe Google Charts map tool offers a basic world basemap (which is a SVG image) and the ability to display a data layer on this map. It’s a good compromise between functionality and ease of setup combined with simplicity of use. It’s not a web-based map of digital ‘layers’ in the way that Google Maps or OpenStreetMap is, with multiple hierarchical raster/vector map data layers that are retrieved dynamically from a WMS server and which can then be zoomed and panned, but it allows the data to be ‘visualised’ in a more ‘lightweight’ way much more simply and with little technical overhead – we experimented with using circles whose diameter and colour was proportional to the numerical data being visualised.

This works very well and it can be set up very simply – there is no requirement to sign up for a Google Maps API key, the interface does not set cookies on the client browser, the data can be stored on a locally-managed server (this is useful for managing DPA issues) and it just uses a Google JavaScript class library and some simple JavaScript configuration for all the functionality. It is also very easy to embed this map into a Polopoly CMS web page.


These websites that we built are not strictly speaking offering fully-featured GIS functionality such as that supported by applications such as ArcGIS (that offers the ability to perform complex spatial queries and visualisations using sophisticated spatial data storage and indexing techniques), but they offer some GIS functionality for relatively little technical and licencing overheads.

Twitter Bootstrap

Twitter BootstrapHere in the College web team we have been experimenting recently with building websites using the Twitter Bootstrap toolkit.

Bootstrap offers a very lightweight set of tools (it’s perhaps overkill to call it a ‘framework’) to set up a functional website in a very short space of time, that does everything that you might expect a modern website to do. With it, a website can be created very quickly that offers ‘out-of-the-box’ modern browser-based client-side technologies such as JavaScript jQuery interface components (e.g. navigation toolbars, tabbed or drop-down menus), and conforms to modern web development guidelines and standards such as the use of valid HTML (and HTML 5), CSS, accessibility, SEO and cross-browser support.

In particular, Bootstrap v3.0 offers the ability to easily build a Responsive Web Design (RWD) website so that the same codebase can be used for multiple browser/hardware client platforms of all sizes, including tablets and smartphones, without too much effort.

We’ve also been experimenting with using Bootswatch to theme (fonts, layout, formatting and colours) the default interface template offered by Bootstrap, and using the Drupal v7 Bootstrap module to integrate the functionality of Bootstrap into a Drupal v7 theme. The combination of the server-side PHP/MySQL Drupal Content Management System and the client-side jQuery/CSS Bootstrap toolkit is a very powerful one that allows a relatively sophisticated website to be built very quickly.

Bootstrap fits in very well with a Rapid Application Development (RAD) methodology or even an Agile development methodology. It’s perfect for building functional web prototypes or basic small-scale operational websites, but perhaps its limitations should be recognised – like a lot of WordPress-based websites there is a danger that without some customisation, the website interface can be too much like any other Bootstrap-based website and becomes a boring ‘vanilla’ website. It’s also not really an option if a website is designed to conform to a demanding specification, such as an interface that will feature some groundbreaking functionality or attractive and unique design that perhaps will be used for branding and marketing an organisation or idea.

What is does do though is allow a web developer more time to concentrate on the advanced requirements of developing a website on the server-side without having to worry too much about building a ‘quality’ website on the client-side from scratch for every single project, to gather valuable user feedback at an early stage of development, and it offers a scalable platform for future development and customisation.