icons images

First Release of Landscapeideas Case Study

I had been working on Landscapeideas Case Study for quite some time and so before posting it on Drupal.org i thought of posting it on my Blog and see its response. User feedback is very important and this might help me in improving the case study.


Case Study of Landscapeideas

 


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

As the site is targeted to contractors and service providers, it provides resources for the landscape industry such as 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 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.

www.landscapeideas.com was initially being built in Drupal 6.1 but as the upgrades started coming in, it was gradually migrated first to Drupal 6.2 and finally 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.

As work started to develop the site in Drupal 6.1 many of the modules were not available or were not fully functional and hence the team decided to either migrate or develop custom modules or stabilize the current modules.

The site is divided into 7 main parts:
1. Articles Section
2. Blog
3. Find a contractor section / Products and Supplier Section
4. Featured Profile Section
5. Advertisements
6. Company Display
7. Image Gallery

Profile Section which gave an opportunity to a contractor/product supplier to showcase their services/products was the key feature of the site. Profile section used Jquery and Advanced CSS that allowed users to click on tabs such About Us, Testimonials, Gallery etc similar to a website. The profile section was for 2 different roles i.e. Contractor and Product Suppliers and was categorized on the basis of services/products offered.

The profile Section also gives an option for the company to put their logo, provide contact details, display services/products in which they deal in, website link, and also provide an email link to contact them.

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

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 selected pages such as articles. This helps the articles to be listed on 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" that comes at the end of the Articles Section. This section will display 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, one image is compulsorily to be attached along with the article.

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 specific manner.


Imagecache
- This module was migrated from Drupal 5.x to Drupal 6.x. The module provided the functionality of displaying any image size to a particular size in article section. User provided different size of images and this in turn would effect the layout.


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 uses the following modules i.e. Views, Views Exporter, Views UI


Five Star
- 6.x-1.12 - This module was used to give rating to different 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 and then stabilized. 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
Step 3

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, also known as "Profile Page" which provides a detailed profile of that company along with details of its Services, Testimonials, About Us Section and Gallery.

 

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" is mentioned 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 which will upload multiple images in the Profile Page. No. of images that can be a part of the gallery is a configuration that can be done by the Administrator.

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 - Since the content was categorized to a higher extent because of the extremely complex structure of the "Find a Contractor" Section, Taxonomy module was used which enabled the categorization of content.


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 displaying any image size to a particular size in article section. User provided different size of images and this in turn would effect the layout.


Lightbox
- 6.x-1.7 - Images appearing on the listing of different Suppliers or Contractors opens in a lightbox.


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 through which are enabled in the location module. It also provides a facility to search on the basis of Zip Codes. The module 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 page

Simplenews module and simplenews roles module were customized according to the requirements of the client. Simplenews roles was still in Drupal 5.x and since we needed in Drupal 6.x it was migrated and stabilized.

Since the content has to be uploaded by contractors /suppliers who do not know the computer terminology, Form Defaults module was used to guide them to complete the profile page.

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 to sell. i.e. in our case, he could 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 open in a lightbox.

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.


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


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.


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.


Amember

The registration 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 the client had a successful experience with Ad module, the same was required to be applied for Landscapeideas.com.

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 Openkick was faced with the task of migration the module to the latest version of Drupal on which Landscapeideas was being built.

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