Ideas for the outdoors - Landscapeideas.com

dheeer - October 16, 2008 - 13:09

Landscapeideas is a community website that provides a platform for different suppliers and contractors to display their products & services. Suppliers and Contractors are provided with a dedicated page where, along with their contact details they can mention company details, services as well as display a photo gallery of their products or services. Product suppliers can provide details about their products while Contractors can provide details on services and Testimonials from their existing clients.

Home Page

The site is targeted to contractors and service providers who can fill in their profile with their logo, showcase their products and services and their contact information. It provides resources for the landscape industry by way of tutorials on different topics such as Gazebos, Irrigation, pools, outdoor living etc. The site was designed with keeping its users in mind who were customers / services providers that might not be well-conversant with computers or its terminology. The site was designed to make the user experience fulfilling and easy whether it is accessing the different parts of the site or posting content to the site.

Drupal was considered to be the ideal choice mainly because of two major reasons, one because the client, The Ideas Media Group Inc., had already had good experience with Drupal (www.concreteideas.com was built with Drupal 4.7) and second was the fact that the site had special features and an aggressive deadline for completion. Drupal 6.x was the natural choice since it had the latest features of drag and drop administration, updated core modules, advanced security features and a much more flexible approach to themeing a site.

The development of www.landscapeideas.com initially started with Drupal 6.1 but as the Drupal upgrades poured-in, it was migrated to Drupal 6.2 and all the way to Drupal 6.4. The requirements of Landscapeideas were quite unique and as a result a major part of the site is built with custom modules.

The challenge in building the site was the availability of modules in Drupal 6x, several modules were either not available or were not full functional. Hence the team decided to migrate or develop custom modules or resolve issues of current available modules.

Other very important features of the site included the Amember integration for user signup, use of Location module for finding contractors/product suppliers based on country, states, city and zip code. Use of an Ad module was again critical for the client since advertisements were a primary source of revenue for the client.

Simplenews module and simplenews roles module were customized according to the requirements of the client, to allow visitor to signup for the newsletter.

User Roles: The site has two user roles i.e. Contractor and Product Suppliers. Both are further categorized on the basis of services and products offered. Administrator role is also there to manage the site.

The site has several sections, these are listed below:
1. Articles Section
2. Blog Section
3. Find a contractor section / Products and Supplier Section
4. Featured Profile Section
5. User Signup with Amember
6. Advertisements
7. Image Gallery
8. Newsletters

The following are the different sections of the site. Each section is described in detail followed by its structure and modules that were used.

Articles & Information Section

Article page

The section consisted of articles on different categories such as Build, Entertain, Landscape etc. The sub categories are related to these main categories like, Gazebos, Pest Control, Lawn and Yard, Pool and spa etc. These articles are basically tutorials which also have images that opens in Lightbox. "Share This" module was used to implement the "Share This" bookmarking utility on articles. This facilitated submission of articles to the major Bookmarking sites such as Digg, Newsvine, Technorati etc. Article is a content type made using CCK module.

There is a Block of "Recent Articles" displayed below the Articles Section. This section displays a list of the latest '5' Articles along with their images. The images coming along with the article can be changed by changing the order of images in the articles section. By default the first image attached in the article comes in the "Recent Articles" section.

 

Article


Article Structure

Title - Title of Article
Taxonomy - Select a category for the Article from a specified list of categories
Article Content - Main content area of the Article
Summary - Brief Summary of the article. Summary will appear below Articles of each category in the Recent Articles Section.
Image - While creating an Article, it is mandatory to attached an image.

Important Modules Used:


CCK
- 6.x -1.0 - alpha - Modules was used to create/edit/organize articles and add images to it. It also gave the power to give permissions to users according to their roles. It consisted modules that includes Content, Content Copy, Content Permissions, Field group, ImageField, Link, Node Reference, Option Widgets, Text, User Reference


Share This
- 6.x-1.2-1 - This module was used to share the articles among different social networking sites such as Digg, Facebook, Newsvine etc.


Lightbox
- 6.x-1.7 - The module was used to display the images in articles in a decorative manner.


Imagecache
- This module was migrated from Drupal 5.x to Drupal 6.x. The module provided the functionality of creating and displaying images of multiple dimensions at multiple location within article section.


Taxonomy breadcrumb
- 6.x-0.1-beta - Enables taxonomy based breadcrumbs and allows for node assosciations with taxonomy terms.

Blog

Blog was an important feature of the site but its appearance was required to be very different from other parts of the site. Hence, a different theme was used for it and a Wordpress Blog look & feel was given to it. Features that were also added to the blog include comments, "Share this" feature, Archives, Categories and Recent Posts.

Blog Structure

Title - Title of the Blog
Blog Categories - Mention the categories to which blogs belongs to.
Body Content - Main content of the Blog

Important Modules Used:


Views
- 6.x-2.0-beta4 - Created custom blocks of Archives and Categories on the right hand panel of the Blog Section. It also uses other modules namely, Views, Views Exporter, Views UI.


Five Star
- 6.x-1.12 - This module was used to give rating to Blogs posts.


Share This
- 6.x-1.2-1 - This module was used to share the articles among different social networking sites such as Digg, Facebook, Newsvine etc.

"Find a Contractor" section

Step 1

Find a contractor section formed the "Inner Core" of the site and a custom module was built in order to complete its special requirements. Primary requirement of this section was to provide a Location wise search over different services. Search could also be performed based on the ZIP code provided in a field.

After choosing a Category i.e. Services , say "Arborists and Tree Services", the user can choose a location (state) from which the contractor related to the chosen services needs to be found. This search provides a lists of cities from the selected state which has contractor of the said services. Location (API, module) was one of the module that could implement this functionality but as it was not in Drupal 6, the same was migrated from Drupal 5.x. This module can generate states and cities for country specific organizations for different nations, but since it could not implement a necessary functionality, customization of the module became apparent.

Step 2

Finally choosing from a set of cities would list down a set of companies that provides the selected services. This page provides a brief listing of companies along with their profiles. Selecting one of the companies would take to a dedicated company page, which is a "Profile Page" that displays details the company including its Services, Testimonials, About Us Section and Gallery.

Step 3

 

Products and Suppliers Section

This section is very similar to "Find a Contractor" Section where the procedure for finding a supplier is the same. The difference is "Profile page" of a Supplier where "Products" are displayed instead of "Services" and "Information" in place of "Testimonials".

final step

 


Structure of "Find a Contractor"/ Products and Suppliers

flow

Image Upload

A helper of the Image upload module was created to allow multiple image upload on single submit. Administrator used to decide on number of images to be allowed in an gallery.

As one of the requirements was that the images should easily get indexed in the search engines, this module included the functionality to create a node of any image that is uploaded on the site. Any image uploaded in the gallery of the site also becomes a part of the main gallery which has different categories or "Services/Products" and images are aggregated into each of the categories.

Modules Used:

Taxonomy - 6.4 - Taxonomy module was used which enabled the categorization of content. This helped in creating complex structure & navigation of the "Find a Contractor" Section


Taxonomy Image
- 6.x-1.3 - This module was used to accomplish a unique requirement of the client to associate images with taxonomy terms.


Imagecache
- This module was migrated from Drupal 5.x to Drupal 6.x. The module provided the functionality of creating and displaying images of multiple dimensions at multiple location within article section.


Lightbox
- 6.x-1.7 - Images appearing on Suppliers and Contractors pages were opened in a decorative manner using lightbox script.


Location
- Migration from 5.x - 6.x- One can search either products and suppliers or contractors across different countriess, states and cities. Only those countries can be searched which were enabled in the location module. It also provides a facility to search on the basis of Zip Codes. The module was migrated and stabilized from Drupal 5 to Drupal 6 and customized to meet our requirements and functionalities.


Fckeditor
- 6.x-1.3-beta2 - FCK Editor was used in place of TinyMCE for all rich text editing purposes since Tiny MCE was found to have bugs as compared to FCK Editor. FCK Editor was found to be simple to configure and use. In FCK Editor, a patch is applied, which enables any image in rich text, to be opened in a lightbox throughout the site.


External links
- 6.x-1.6 - Adds icon next to external links on the site which will open all external links in a new window when clicked.

 

Profile Section

LandscapeIdeas provides a dedicated page to contractors and Product Suppliers to showcase their services or display their products respectively. Profile section provides the contractors/suppliers the options of gallery, testimonials, services, about us section. Profile section used Jquery and Advanced CSS that allowed users to click on tabs such About Us, Testimonials, Gallery etc without refreshing the page.

Profile page

Since the content has to be uploaded by contractors /suppliers, Form Defaults module was used to provide them easy instructions to complete their profiles.

Modules Used:

Profile - Core optional patched - Drupal Version 6.4 - A patch for the Profile module was developed and submitted at http://drupal.org/node/19014. A specific requirement in the Profile module was of Category selection. A user while creating his profile can select the services or products which he desires. He can opt for a multiple services such as "Concrete Contractor" or "Landscape Designing".

 

Taxonomy - Core - Drupal Version 6.2 - Taxonomy module was used to enable the categorization of content. Since the site was heavily categorized based on contractors who provided different types of services and Suppliers who provided different types of products, it was imperative to categorize the content.

 

Customization of Profile Module

 


Lightbox
- 6.x-1.7 - Lightbox module was used to display the images placed in the gallery to open using the lightbox script.

Custom Module - Multi Avtaar Module - This module was used to create a User Gallery which in turn can upload multiple images in a single time. Images in turn are created as nodes and become a part of the main gallery of the website.


Form Defaults
- 6.x-1.0 - The target users of the website were people who were not very well conversant with the technical language. Form Defaults module was used to make the language simple by modifying help text and descriptions on any form used in the site.


User Read Only
- 6.x-1.x-dev - Module was migrated from Drupal 5 to Drupal 6.x version where the Drupal 5 version was also not working. This module was used to provide access to different fields according to the roles. For example, if 'Information' is present in Products and suppliers but not in Contractors, the module can be used for giving these kind of access and restrictions.

Contact Module - Core - Contact module was used so that a registered/anonymous user can directly visit the profile of a contractor or a supplier and can contact them via the contact form.

Amember

The registration process requires users to pay for registration. This is done through Amember and the roles are desginated during the registration process. Amember update module (a paid module obtained from Amember) is used for integrating the Amember registration process with Drupal site. Through this module, the registered users in Amembers automatically becomes a member of the site and then he can choose to select the services/products which he wants to display.

Advertisements

Advertisements was a very critical part of the site and since it was one of the source of revenue for the site, the Ad module was used.

Ad module is a powerful advertising system for Drupal-powered websites. It supports the random display and tracking of graphical (banner) and text ads. Ads can easily be displayed in themes, blocks, or embedded in site content. The module records comprehensive statistics about when and how often ads are viewed and clicked, including a plug-in module for generating graphical time-based reports.

Ads can be assigned to multiple owners, each of which can be assigned their own set of permissions. Installation is simple by design. An API is provided allowing the development of additional functionality and integration with other Drupal modules.

The Ad module was there in Drupal 5.x but not in Drupal 6.x and the development team was faced with the task of migration the module.

Image Gallery

The Image aggregates all the images that are uploaded across the site. The images are categorized based on different categories and each information such as the no. of images in each category and the date on which it was last updated is mentioned.

Image Gallery Structure
Title - Title of the Image
Image - Attach an Image
Category (Taxonomy) - Option to place the image in the profile and categorize it into different galleries

Newsletters

The administrator of the site may choose to distribute its newsletters to its member.


Simple News
- 6.x-1.0-beta3 - This module was used to send newsletters to subscribed email addresses.


Simplenews roles
- This was a customized module developed for the Newsletters where a new user gets automatically subscribed to a particular type of Newsletter depending on the role that is chosen.

The site was developed by Openkick Technologies. On behalf of the development team I would be more than happy to answer your queries.

Very nice

Michelle - October 16, 2008 - 18:32

I loved the detailed write-up. It really helps to see what goes on under the hood of a site.

BTW, the link on the front page for "Advertise on this site" goes to a 404.

Michelle

--------------------------------------
See my Drupal articles and tutorials or come check out life in the Coulee Region.

Thanks Michelle

dheeer - October 17, 2008 - 04:14

Thanks Michelle for bringing the broken link to our notice. Its now resolved.

Hi All, This case study was written in October 08

dheeer - June 25, 2009 - 04:18

Hi All, This case study was originally written on October 16, 2008. Since that time, several of the modules listed in the article, as well as Drupal core, have had newer versions released. Landscapeideas was one of the website that adopted Drupal 6.x as their preferred platform when several modules were in dev or rc release state.

At that time this site was developed as a stand alone drupal website. Client already had their site http://www.concreteideas.com which was running on Drupal 4.7. The Client wanted to see the stability & performance of Drupal 6.x platform before lying down future plans for his other projects.

As of today, satisfied with the performance, usability & scalability of Drupal 6.x platform, concreteideas.com has been moved over to Drupal 6.x. Both the site now utilize multi-site capabilities of Drupal and share code base with different databases. The client is excited with the recent implementation of multi-site environment for his websites and after the success of http://www.concreteideas.com and http://www.landscapeideas.com, he has plans to come out with more sites in this multi-site environment. Watchout for following domain names as they get ready to attract visitors.

I would come out with small blog post on the challenges on migrating Drupal sites into Multi-site environment very soon.

Drupal is Rocking for The Ideas Media Group Inc.

Ideas Media Group & Landscapeideas

dheeer - July 3, 2009 - 07:24

Here is the rest of the story http://drupal.org/node/508042

 
 

Drupal is a registered trademark of Dries Buytaert.