Adding the “wow factor” to Eden Project

When Nomensa started working on a new responsive site for Eden Project (www.edenproject.com), one important aspect of the brief was to add some “wow factor” to the website. Our research found that showcasing Eden’s wealth of attractions, their beliefs and their values was important both to new and returning visitors, as well as to the Eden team.

We quickly settled on a very visual approach to the site design, relying heavily on strong imagery, especially on the homepage. In fact, the content of the homepage was kept to a minimum. We wanted to use some striking photography to express the Eden Project’s goals and values and provide “wow factor”. The finished designs for the homepage simply featured an image carousel, the Eden logo, the menu and a search form. That seemed quite straightforward.

However, there was a catch though when we came to building it.

The technical challenge…….

The problem was that the ratio of the images displayed on the homepage changes across devices, to ensure they always take 100% of the viewport’s height and width, regardless of the device’s size or orientation.

This meant that on smaller devices each image had to be cropped and only a part would be shown on screen. But which part of an image is most important and should always be visible, and which parts can be cropped off? Most of the images have their focal point in the middle, but that’s not always the case. For example, let’s have a look at the image below:

The focal point in this picture is the little girl’s face, however the girl is not right in the centre of the image. Cropping this image based on the assumption that the focal point is in the middle would result in something like this:

This is obviously not ideal.

We were therefore faced with the following technical challenges:

1. Foreground images used in the homepage carousel needed to be cropped on smaller devices to ensure they fill the entire viewport;
2. Because the carousel consists of many images and potentially each of those images can have a focal point in a different location, we had to find a way to define a focal point for each image and ensure it’s was never cropped out;
3. As the images in the carousel were to be managed through the CMS (Drupal), we had to allow content authors to not only add images to the carousel, but also make it possible for them to set a focal point for each of those images.

The jQuery

First of all, we needed a script which would allow cropping images based on a user-defined focal point. Luckily, such a script already existed. It’s called jQuery FocusPoint, and is available on Github (https://github.com/jonom/jquery-focuspoint). The FocusPoint plugin dynamically crops images to fill available space and allows the user to define the position of the focal point to ensure that regardless of the image’s size this point is always in the centre.

Now we had to find a way to incorporate this plugin into the Drupal interface, to allow content authors to set a focal point for each individual image added to the homepage carousel.

The Drupal module

As existing Drupal modules could not deliver the functionality required, we created a new module which allowed us to add a field formatter for image fields. On the fields where this is enabled we append an image focal point selector which allows the user to select a focal point once the image has been uploaded.

This information is then used by adding a wrapper div around the image with the data-focus-x and data-focus-y attributes which are then used by the jQuery plugin to do its magic.

Nomensa’s Imagefield focus point Drupal module is currently under development on Drupal.org and we’re looking to release a dev version shortly. (https://www.drupal.org/project/imagefield_focus_point)

The end result is a carousel where every image is focussed on what is important, regardless of device size or orientation. The power of each image is not compromised, even on a mobile screen, thus providing a responsive site with “wow factor”.