The Landscape Architecture Foundation (LAF) is a nonprofit charitable organization founded in 1966 with the mission to protect, improve, and enhance the environment. LAF invests in research and scholarships to increase our collective capacity to achieve sustainability through landscape solutions. LAF already had a main website, created by TOKY, but wanted to build out the Landscape Performance Series — a section of their existing site comprised of information and innovations from research, industry, academia, and professional practice — into an independent microsite.

The Landscape Performance Series microsite was designed and developed by TOKY, a firm specializing in Web and print work for clients in architecture, arts and cultural organizations, education, premium experiences and world-changers.

Landscape Performance Series Home page
Why Drupal was chosen: 

Drupal was the go-to choice for this project because of the capabilities of Views, which allowed us to build out more robust search and filter functionality for the Case Study Briefs, Fast Facts Library, Benefits Toolkit, and Collections sections. By combining Views with the entity architecture of Drupal, we could easily display different content types in a multitude of ways, including full-page view, sidebar view, and two search results views.

It was also important for us to have the ability to migrate content from the previous CMS, a custom solution, to avoid spending countless hours on content entry. We accomplished this effortlessly with the Migrate module. The fact that the previous solution, our own proprietary CMS, was also PHP/MySQL based (like our Drupal install) made the transition smooth as well. Overall, the previous CMS was somewhat similar to WordPress.

Describe the project (goals, requirements and outcome): 

Knowing that the content of the Landscape Performance Series was a major driver of organic traffic, LAF saw the potential to turn this content into a standalone resource for industry information. The central goal of the Landscape Performance Series microsite was to create the go-to resource for architects, engineers, nonprofits, state agencies, and corporations looking to make the case for executing landscape architecture projects. To achieve this goal, TOKY focused on improving the overall content experience by making content easier to find and read, as well as increasing the average time on site by pulling in related content.

We introduced sophisticated search and filter functionality that makes even the smallest piece of information easy to find. Users can now use multiple filters — whether location, budget, size, or otherwise — to quickly find specific content.

LAF knew from analytical data that many users visited lafoundation.org to find one piece of information, and then left. To increase average time on site, TOKY built a “related content” feature into the site to help visitors discover pertinent information that they otherwise might not find.

The microsite also has a Collections feature, which offers yet another way for visitors to discover new content. Themed Collections are curated by LAF staff and leading industry thinkers, and provide a thoughtful, humanized approach to comparing projects, challenges, and solutions.

Development

In terms of development, the site took approximately 2.5 months to complete. We used agile project management and had milestones every two weeks to review and test specific sections of the site. We staggered milestones with a front-end developer working on the HTML/CSS/JavaScript while a back-end developer worked on the Drupal integration of their finished work from the previous two weeks.

By far, the most difficult challenge we faced was tying together the Views, Better Exposed Filters, Views Block Exposed Filter Blocks, and Views Block Area modules. We then used theme hooks to get those modules to look the way we wanted on the landing pages for case study briefs, fast facts, benefits toolkit entries, and collections, as well as the LPS Search landing page. We used our own custom author, source, and location filters to connect to Views via the hook_views_query_alter() function and then again with the hook_form_views_exposed_form_alter() function. The end product is a system that remembers filter settings for each landing page and also shows only the options available to the current result set.

The final task in our development process was to import three types of content from a custom CMS into Drupal. We created a custom module (posted on GitHub https://github.com/tokybd/eero_migrate) that leverages the power of the Migrate module's API to import case study briefs, fast facts, and toolkit entries with the click of a button.

Technical specifications

Drupal version: 
Drupal 7.x
Why these modules/theme/distribution were chosen: 

The theme we created for LPS sits atop of a base theme that TOKY built to combine our favorite parts of the Zen, Zentropy, Boron, and the Boilerplate themes.

Automatic Entity Label (auto_entitylabel): The Automatic Entity Label module was used on a few taxonomy vocabularies to combine a first name and last name field to create the term title. This allowed us to more easily sort by either the first name or last name fields individually when needed.

Better Exposed Filters (better_exposed_filters): The landing pages for Case Study Briefs, the Fast Fact Library, the Benefits Toolkit, Collections, and the LPS Search page use the Better Exposed Filters module for filtering, along with some heavy lifting by the theme layer to get things to look and work exactly how we envisioned.

Block Access (block_access): Rather than allow site editors to move around the site navigation and other integral blocks that should really never be moved, we used the Block Access module to restrict access to only the sidebar and main content area blocks.

Custom Publishing Options (custom_pub): The Custom Publishing Options module has become our go-to module for flagging content. Editors can check a box to determine whether content should be featured, or whether a node should or should not show up somewhere such as the Sponsors section in the sidebar, or the footer, or both.

Date Popup Authored (date_popup_authored): We knew blog posts would be future- and backdated, so we used the Date Popup Authored module to provide a better user experience when performing this action.

Entity Reference (entityreference): We used the Entity Reference module to easily connect content across the site. The site editors have the ability to manually override related content for case study briefs, fast facts, benefits toolkit entries, and collections using this module. The Entity Reference module is also used to curate content for the individual Collections pages themselves.

Field Collection (field_collection): Field Collections were used for faster site building so that components could be added to multiple content types, but then adjusted on just one site administration page. We used the Field Collection module for related content, callouts, collections, and other groups of content.

File Entity Inline (file_entity_inline): Using the File Entity Inline module, we were able to add caption and credit fields to images. This was mainly used on individual case study briefs.

Gravatar (gravatar): We used the Gravatar module for displaying user pictures automatically when participating in the comment areas of the site.

ImageCache Actions (imagecache_actions): We used the ImageCache Actions module to automatically add a green overlay to featured images on the Home Page, Case Study Briefs landing page, and the Collections landing page. This module saved the site editors the step of adding the overlay manually in Photoshop.

Media (media): The media module is the backbone for all media management throughout the site, from the Home Page banner to media added through the many TinyMCE WYSIWYGs.

MediaElement (mediaelement): We used MediaElement.js as our front-end solution to local audio and video file playback to ensure that this media would work on touch devices.

Menu Block (menu_block): Certain pages display second-level section navigation below the main navigation for easier browsing. We used the Menu Block module to make this possible.

Metatag (metatag): Along with allowing the client to fine tune their meta description and search-related information, Metatag also lets them adjust their Open Graph meta tag values per entity.

Migrate (migrate): Case study briefs, fast facts, and toolkit entries had to be imported from the original website at lafoundation.org, which uses a custom CMS. The Migrate module helped to streamline the migration of over 200 individual pages by writing a small amount of code.

Mollom (mollom): Since the blog allows comments, a SPAM prevention system was essential. Mollom automatically handles this task for us.

Smart Trim (smart_trim): The Smart Trim module is a small but very helpful module that allowed us to very precisely handle the display of larger chunks of text such as the fast facts on their landing page.

Typogify (typogrify): The Typogify module converts the site’s pesky dumb quotes into smart ones.

View Unpublished (view_unpublished): The View Unpublished module allowed the client to compose blog posts, case study briefs, fast facts, and other pages without publishing them immediately. The module also allowed them to have multiple contributors for the same piece of content.

Views (views): The Views module handles the display of the Case Study Briefs, Fast Fact Library, Benefits Toolkit, and Collections landing pages as well as the Blog landing and filtered pages and the LPS Search page.

Views Block Area (views_block_area): With the Views Block Area module we were able to insert a content manageable block into the header of the Case Study Briefs and Collections landing pages, which are Views pages.

Views Block Exposed Filter Blocks (views_block_filter_block): On the LPS Search page we use the Views Block Exposed Filter Blocks to create blocks from our Views pages' exposed filters.

Views Data Export (views_data_export): On the Case Study Briefs landing page there is an option to download a CSV version of the content. This is made possible by the Views Data Export module.

Organizations involved: 
Team members: 
Project team: 

Eric Thoelke, Executive Creative Director
Jay David, Interactive Creative Director
Logan Alexander, Designer
Daniel Korte, Developer
Kathy Sprehe, Developer
Melissa Allen, Senior Web Producer and Strategist

Browse
Case Study Briefs
Renaissance Park (Case Study)
Living Architecture (Collection)
Sectors: 
Non-profit
Urban planning

Comments

jackenmail’s picture

nice theme

Good Taofiq’s picture

which themes is this

Daniel Korte’s picture

This is a custom theme developed specifically for this website.