Love the Garden

LoveTheGarden.com was an existing website with over 1,000 pages comprising articles and product information. Our major goals were to:

• Migrate the existing content (including HTML pages, images and other files) from Textpattern to Drupal
• Implement an entirely new, responsive design
• Ensure support for multiple languages

Each decision we made in the planning of the website was with forethought to rolling out in multiple regions, with different content each time. We wanted to ensure that the architecture was flexible to avoid making time­consuming adjustments per region.

With this in mind we planned out the data structure and content types in detail before even beginning to code.

Detailed planning of Drupal content types

Approach

The website is heavily taxonomy­ based. Each of the main menu items is a top­-level term within a category vocabulary. A second vocabulary determines who should have access to each page (be it a node or a term).

Options on each term determine the method used to render the term page and, separately, how the pages of nodes within the term are displayed. The options for the rendering of a node can be set on a top­level term and inherited by nodes of child terms for straightforward and efficient configuration.

Our end goal in taking this approach was to produce a system where choosing how to present content (and to whom) is as accessible as producing it. The custom interfaces and methodologies we developed enable editors and administrators to manage sections of the website without needing to access the disconnected configuration of individual modules.

Permission systems

A key requirement of the brief was the ability to create areas of the site which are only accessible to certain users. We created a system around Taxonomy Access Control which allows us to define access permissions on whole sections or categories. A permission inheritance system was developed to easily propagate permissions to whole sections of the site with ease.

With this ability to define sections and permission via categories and contexts, we are able to create completely custom areas of the website, each can have it's own unique theming or 'colour way' and can also have permissions and access granted to roles. We use this to create bespoke consumer and retail sections of the site, and these permissions and content rules are also propagated to Solr search we use throughout the site - this means we can have localised, section specific search in various areas of the site - all of which can be configured by site administrators in a really simply way.

Great care, attention and fine tuning has been employed to avoid users hitting 'access denied' pages, instead they are redirected to an appropriate login or sign up page.

Click image to enlarge

Site structure, section and category planning

Our development process was Feature­-based: the Panels, Views and content types that form the backbone of the website are defined in code, allowing us to make good use of version control.

Mobile and tablet responsive design

Challenges

Strict guidelines were provided for the website’s HTML markup, requiring us to do away with all of the markup usually produced by Drupal and contributed modules. We took advantage of Drupal’s excellent theme and template overriding mechanisms to make the necessary changes and support the nature of a fully responsive experience.
A responsive base theme was developed in HTML5, this contains the main structural elements of the site.

We use child themes of this for each region to create unique styling for each country. All CSS for the project was developed using SASS and we have employed many of the micro data formats recommended at http://www.schema.org.



Shortcodes

We needed the ability to insert teasers for content inside nodes and blocks, surrounded by other content. Additionally, we had to ensure the teaser would be current, and use the current active language. We found no contributed module to handle these requirements, so created our own powerful content short codes. Using the Drupal short code module https://drupal.org/project/shortcode as a starting point, we extended the functionality to suit our requirements.

Using it, we have the ability to:

• Insert one or multiple nodes or terms into a node or block with an arbitrary display mode.
• Restrict which nodes or terms are included by specific ID numbers or categories.

This removes the need to create and place blocks generated by Views where you require a list of nodes, so long as a suitable display mode is available. We use this content shortcode in the body of the home page so that arbitrary HTML can be placed amongst article teasers (e.g. for special promotions), and in the footer of the site to produce columns of the latest blog entries and news articles with customised markup.

We aim to contribute some of our work in this area back to Drupal, but to date our implementation is very site specific and will require additional work to make it widely available. Those wishing to implement similar solutions should look at the documentation provided with the Drupal short code module or try these two modules which reproduce some of the functionality we desired. https://drupal.org/project/insert_block, https://drupal.org/project/insert_view

Responsive slideshows

For the slideshow used on the homepage and elsewhere, we wanted a Views plugin that was fully responsive and performed correctly even in the face of being resized on the fly during demonstrations. We settled on using the excellent and minimal ResponsiveSlides and created a Views plugin to make use of it.

Each slide is a node which has been associated with a term - the slideshow - in­ the slideshow vocabulary. We use a combination of the Bean and Viewfield modules to allow administrators to create blocks that display a slideshow using our plugin.

Competitions

We were required to transfer a concept of multiple-choice competition forms from the existing Textpattern website. Unfortunately the Competition module for Drupal is no longer maintained, so we produced our own.

In our implementation, a competition is a field type. This allows us the ability to attach a competition to any entity and position the entry form by changing the weight of the field. Administrative interfaces are provided for displaying entries, and the data collected can be exported in CSV format.

Additional custom modules

Other modules we created to solve the client’s requirements include:

• Table of content plugin for Views, which creates links to groups of results. This can be seen in use on the top­-level categories from the main menu.
• WYSIWYG plugin for SublimeVideo, allowing editors to easily insert responsive videos into content.
• The ability for users to manage their email subscriptions, interfacing with ExactTarget.

Weather widget

There are some good Drupal weather modules that exist already, https://drupal.org/project/weather and https://drupal.org/project/wunderground_weather. Initially the weather module looked like a good fit, but had many features that we would never use, so we decided on a light weight approach using Yahoo weather service to retrieve the inspiration we needed. Our module uses location services or an IP address lookup to gather and display local weather to site visitors. If neither of these methods returns useful values, we display the weather in the capital of the country.

Store locator

Each of the sites have detailed product listings and we offer visitors the ability to use a one-click store locator to find local suppliers. This also uses either browser or mobile location data, or failing that, a postcode look up to determine location.

A product page with one-click link to the store locator

We plan to release some of these modules back to the Drupal community this year.

Results

LoveTheGarden has launched on Acquia Cloud, which provides us with an excellent development and staging process for ongoing development. For the end user, Acquia’s Drupal­-tuned Varnish and Memcached configuration equate to rapid page loading times, and the responsive nature of the entire website make for an engaging experience on any device.

As of today we have migrated three out of four sites and are currently adding more.

UK http://www.lovethegarden.com
Germany/Austria http://www.liebedeinengarten.de
Benelux http://ilovemygarden.be

Our clients are incredibly pleased with the results of this project and we are already working on a number of other Drupal related projects which we can hopefully announce soon.