CoolFords.com - Ford Enthusiast Website

CoolFords.com is a community and media site centered around Ford automobiles and the Ford enthusiasts who drive them. Website visitors are encouraged to log in and create a unique Ride page for their Ford automobiles and then to upload & assign photos and videos to their Ride page for all to see and talk about. Rides are categorized by Ford models so that viewers interested in a particular type of automobile can search the database for specific results. The goal of the site is to become “The Premier Website For Ford Enthusiasts” and to create an all encompassing website that is more than just a forum site.

The site was conceived by my passion for being a Ford enthusiast. I was aware of several competing Ford enthusiast websites that share information about the Ford brand or specific Ford vehicles but I believed that many of these sites are still stuck in the nineties and there was room for competition. Some sites are just forums, and most are just static html. There are a couple of sites that offer great information and articles, but absolutely no user interactivity, built for one and done searchers and not for building relationships. A large portion also seem to be stuck in the realm of older vBulletin configurations. The goal for CoolFords.com was to build a site to match the passion of the demographic while harnessing the power of Drupal.

This was a unique project because of the duration of the build. CoolFords.com is a hobby project that has been pieced together over several years. What was originally started in Drupal 4.7, evolved through Drupal 5 and now is currently running on Drupal 6. My knowledge for php is very limited so I had to hire several Drupal freelancers over the years which created a major challenge by itself. As some coders took short cuts others made things more complex then it needed to be. Fortunately I found a freelance coder named Petr Vacha who was able to see my vision and take a more lead role throughout the development and create what you see today, he also helped me put together this case study.

Popular Site Features:

Photos & Video – An integral part of the website, Ford owners love to show off photos & videos of their rides. To many hardcore enthusiasts their automobile is like a member of the family. So an easy way to upload and share media was a must for the site. We are using Image FUpload module to allow users to upload up to 100 photos at once. For user's albums we are using Taxonomy terms with custom module which limits users to post only to their albums.

My Garage – When a user is logged in, this area of the website ties everything together. It is the central place where a user can navigate and see site activity from their friends, it's similar to the “NewsFeed” section on Facebook. We utilized the Facebook-style Statuses module and tweaked it to fit our needs.

Ride of the Month – One ride is chosen each month and featured on the homepage as "Ride of the Month". Users are empowered to rate individual rides based on several categories: Performance, Suspension, Interior, Exterior, Audio & Video to name a few. The ride with the highest rating and quantity of votes is crowned the winner.

Top Rides – As users rate rides on the variety of categories, the Top Rides page lists the highest rated rides in each of the categories. The list spans all rides on the website regardless of model and variant.

Ride Search – With a steady database of user submitted Ford vehicles an extensive vehicle search by model and variation of the model was created. There is also an advanced ride search available to search rides with specific modification and part installed, the advanced search also includes brand of part installed and general location of the rides.

Social plugins – To generate interaction and utilize tools from popular social websites, the “Like” and “Tweet” buttons were incorporated on nearly all node pages. With almost 30,000 photos and 100+ videos on the site a fair amount of traffic is generated from simply using Social Plugins.

Behind the Scenes

The site uses a custom module which calls Views to generate output. We couldn't use simple Views Page as we needed to combine different sorting with different filters based on user's choice which Views itself didn't allow us to do. (Example: Photo page where user can browse by: Most Recent, Most Viewed, Top Rated, Most Discussed and Top Favorites)

Theme:
We made a custom theme based on the Blueprint Module. Making it with different parts was challenging in two ways.

1. Design changed during development, many times it happened that some parts needed to re-done from original plan.
2. Some design requests were not as compatible with the way Drupal works. Quick example is node links, where we combined standard node links with other elements like Fivestar voting widget and moved other elements like ‘Add to favorites’ or ‘Add to any’ widget to different place.

Drupal's amazingly flexible template system with pre-process functions allowed us to make such changes, but the question was if it was worth the time.

Video Encoding – Heywatch:
For video section we are using CCK node type with file field for uploaded video, text field for url of encoded video and imagefield for thumbnail. Core of video encoding is Media Mover module. During cron run all unprocessed videos are harvested from CCK file field, then uploaded to Amazon S3, and Media Mover Custom Command action tells to Heywatch service which video to convert. When video is converted Heywatch pings our web server and video thumbnail are downloaded and attached to the node.

1. User uploads video to CoolFords.com
2. Media Mover module saves original video file on Amazon S3
3. Media Mover Custom Command (module we contributed on drupal.org) sends request to Heywatch.com to convert uploaded video to flv
4. When Heywatch.com converts video it pings our website with encoded video id
5. We then download thumbnail and save it to the video node

I removed some site specific data, but it should give you an idea how to do it:

For Output file for Custom Command we used:
http://___NAME_OF_BUCKET___.s3.amazonaws.com/video_[nid].flv

The Code we used:

require_once "HTTP/Request.php";

$video_url = $file['storage_file'];
$video_url = str_replace('https://', 'http://', $video_url);
$nid = $file['nid'];

// We want to encode in Flash format
$format_id = "31";

$title = "video_{$nid}";

// The encoded video will be uploaded to this FTP location$s3 = "s3://___S3_KEY___:___S3_KEY____@___NAME_OF_BUCKET___";

// You'll be notified when all the process is done
$ping_after_encode = "http://www.our_domain.com/path/{$nid}";

// You'll be notified if there is an error during the process.
$ping_if_error = "http://www.our_domain.com/path/{$nid}";

$req =& new HTTP_Request("https://heywatch.com/download.xml");

// Authenticate via your HeyWatch login / password
$req->setBasicAuth("___USERNAME___", "___PASSWORD___");

// It's a POST request
$req->setMethod(HTTP_REQUEST_METHOD_POST);

// Add all the needed parameters
$req->addPostData("url", $video_url);
$req->addPostData("format_id", $format_id);
$req->addPostData("title", $title);


// Force encoding after the download is complete
$req->addPostData("automatic_encode", "true");
$req->addPostData("s3_directive", $s3);
$req->addPostData("ping_url_after_encode", $ping_after_encode);
$req->addPostData("ping_url_if_error", $ping_if_error);
$req->addPostData("watermark_image_url", $watermark_url);
$req->addPostData("watermark_position", $watermark_position);
$req->sendRequest();

Variable $ping_after_encode tells where Heywatch which address to ping after success convert.

Spam:
ReCaptcha Module was installed to combat automatic user account creations. For the spammers that manual create accounts, they frequently post spam links on their profile ‘about’ fields, so we made it that you have to be logged in to view the Details section of user profiles. Spammers then found a way to abuse the private message feature and the Private Message Limits module was used so users can only send 3 messages within a 30minute time frame. The Mollom Module was also installed to filter the forum and comments from spammer attacks.

Speed:
The website servers up many photos and videos and website speed is of importance. To provide better speed for downloading photos and videos we are using Cloudfront module to save files from different Imagecache's presets to Amazon S3. We are using Linode server with Mercury installed for our web hosting.

To lower number of requests during page loading we are using Drupal built-in feature to aggregate CSS and JS files and also we put together many background images used in theme into a sprite image.

To optimize speed for authenticated users we wanted to use the potential of the Views built-in cache, but at the same time we wanted to have our updated content visible. Views module offers time based caching. Problem with time based caching is that if user posts new content it will not show it immediately. So for example if you set cache to 6 hours and if any user will post something, it can take up to 6 hours to show content. On the flip side we didn't want to have cache time too short as some parts of the site are not used so intensely. Solution for us was to set cache to 6 weeks and make custom module which flushes cache of relevant view as soon as there is new content.

So if there is no new content Views are regenerated every 6th week, but if user posts anything related to the View it will reflush cache, so new content will be visible there and View will be cached for another 6 weeks or till new content will be added.

Lessons Learned:

Many hours were wasted by re-doing things in theme after unexpected design/features changes/bad coding. So it is useful to make a good list of expected features and prepare wire frames before development starts and don't allow too many big changes after development starts.

Also as mentioned in the theme section, some theme changes are too time consuming, so it should really be considered if it is really worth the time to go for it.

Conclusion:

Drupal is an awesome tool. The hook system together with template engine allows you to build all kinds of feature rich websites. I also want to thank the guys at Nextide, Inc. for their help with the My Garage feature and for general website updates. I hope you enjoyed reading this case study, please visit the website at www.CoolFords.com to see it in action.