LoveTheGarden.com is the consumer website for The Scotts Miracle-Gro Company in the UK. The Scotts Miracle-Gro Company are a leading global manufacturer of lawn and garden care products for home and professional use. In Europe, Scotts have a variety of web sites in Benelux, Germany and France. These were all to be migrated to Drupal.
The UK based LoveTheGarden.com website supports their brands by providing high-quality written resources on subjects including planting, growing, and lawn care. Regular written content is provided by news and blog articles, and the website also provides details on The Scotts Miracle-Gro Company’s large range of products, allowing users to search for them online or in local stores.
Beginning in October 2012, Lightflows Creative Agency - http://www.lightflows.co.uk - worked in conjunction with Design Hive to develop each of these sites. This work is ongoing and having migrated the UK, Benelux and Central European (DE/AT) sites, we are now working on migrating the French website.
We were approached with the task of unifying The Scotts Miracle-Gro Company’s European web properties under one framework while continuing to support content written for multiple languages and regions. The existing sites were powered by a number of CMS's including, Typo3, Joomla and a custom Symfony build.
The previous implementation of LoveTheGarden.com was built on Textpattern, limiting its ability to scale and with no definitive solution for handling multiple languages.
Drupal was an obvious choice for its thorough handling of multiple languages within the core and through well-supported contributed modules. The concept of using a multisite installation, with a single code base powering multiple sites, meant immensely reduced difficulty in maintaining the web properties and represents large cost savings for the client.
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 timeconsuming 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
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 toplevel 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.
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
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
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.
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
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.
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.
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.
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.
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.
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.
To date we have contributed back the following modules. All currently in sandbox mode, we'd really appreciate feedback so these can graduate to full modules.
Each of these modules add additional functionality to the context module. They are:
Context taxonomy descendants
Condition plugin for Context that activates when viewing a node referencing descendants of the specified taxonomy terms.
Context specific taxonomy term page
Enables activation of a Context when viewing specific taxonomy term pages, or pages of descendant taxonomy terms.
Context menu active trail
Context condition activated when within the active trail of a selected menu.