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.

I used Stanford University’s Open Framework as a base theme, to help with such things as layout. This uses Twitter Bootstrap, which I had some familiarity with and which has some similarities to how things are moving with the main University CMS.

A library called Final Tiles Grid Gallery provides a nice dynamic (and responsive) JavaScript grid layout. One of the features it supports is “infinite scrolling”, where batches of images can be loaded using AJAX. This was ideal as we have a lot of images, and all at a high resolution, so loading 10 images at a time avoided slow page load times. In the interests of fairness, the order of images on the page is completely random, so I dealt with this by creating a session variable with an array of the images, and each image is removed from the session array as it is displayed.

The main Content Types created were for the Gallery and the Portfolio pages. As well as the main gallery of all images, there are gallery pages for each school which essentially act as a filter. We also added a gallery page for each Programme of Study. Portfolio pages support embedding of media such as Vimeo/YouTube/SoundCloud, which are displayed in place of the image used for the gallery. The node pages were styled straightforwardly, by editing the template and CSS files in the child theme.

http://www.degreeshow.eca.ed.ac.uk/2014

 

School Page

School Page

 

Portfolio Page

Portfolio Page

 

Programme Page

Programme Page

 

Leave a Reply

Your email address will not be published. Required fields are marked *