LCDTV.net is an online magazine dedicated to LCD TV information and LCD TV Reviews. It employs several journalists to stay up to date with the latest technology news related to LCD televisions, has a large database of the latest TV specifications, and offers enthusiasts the opportunity to write in-depth TV reviews receiving full byline credit getting paid for their efforts.

PropDrop Web Development and Marketing completed the installation, configuration, and custom theme development for the Drupal site. PropDrop is a Louisville Web Design company that specializes in Drupal for small businesses, and also manages a portfolio of various topical websites. For most sites, PropDrop works almost exclusively in Drupal. For LCDTV.net in particular, where we needed robust user management and permissions, tightly defined and unique content types, and easy ways to group and manage that content, we knew Drupal was up to the task to ensure fast development and ultimate success.

Organization and Content

The site had to accommodate a vast breadth of information and be easy to find. As a result, we ended up making use of Drupal’s core Taxonomy system more than we ever had on a previous site, but still combined it with practical uses of CCK Node Reference fields.

There are three key content types: TV Series, TV Models, and TV Reviews.

A TV Series (like the Samsung 9000 series of televisions) has a "Brand" taxonomy term. TV Models (like the Samsung UN46C9000) have a node reference field that references the correct TV Series. Likewise, the TV Review content type references a specific TV Model node.

We also used taxonomy vocabularies for TV Models for certain specifications that were important for shoppers looking for information, like TV Size, HDMI port numbers, Resolution, Price Range, and Features like Internet connectivity. CCK fields picked up the slack for a majority of the specifications.

To get a handle on the taxonomy display, we overrode the default taxonomy display URLs with a simple view that displayed node teasers. This way we had more control on the ordering of nodes within a term (thanks to the nodeorder module), how many nodes to display per page, whether to use ajax. To dictate what exactly shows up for each node teaser on a taxonomy page, each content type has a customized .tpl.php theme file with only certain fields allowed to display if ($page == 0).

The only part we didn’t have control over were the taxonomy page headings. Because of the robust Page Title module, the actual HTML page title was fully under our control, with each term and vocabulary having a unique title. Because we were using a views override, the term name could be included, but displaying nodes by Brand, TV Size, or News categories each call for significantly different headings, both from user experience and SEO standpoints, and Views doesn’t allow this by default.

The solution was easy, if a little inelegant. Within the custom theme’s page.tpl.php, we checked the URL structure to determine if it was a taxonomy page, and then added the appropriate heading suffix based on the vocabulary.

           <?php if (arg(0) == 'taxonomy' && arg(1) == 'term') {
              
$term = taxonomy_get_term(arg(2));
               if (
$term->vid == 2) { ?>

                 LCD TV Listings
               <?php } elseif ($term->vid == 1) { ?>
                 Size LCD TV Listings
               <?php } elseif ($term->vid == 8) { ?>
                 Questions
               <?php } elseif ($term->vid == 10) { ?>
                 LCD TV News
               <?php } elseif ($term->vid == 11) { ?>
                 Related LCD TV News
               <?php } ?>
           <?php } ?>

Archiving

New television models come out every year, and the site will always need to be weighted toward newer releases, while still maintaining all of its old content and model information. The answer was to have a vocabulary for the year the model or series came out. And then we limit the taxonomy view to only this year and the last. This is something that won’t come into play for a while, but we wanted to have the process in place and prevent major changes when the time came. This solution is simple and allows the old content to be hidden easily while still existing in the archive, all by just changing the filter on a single view.

Expert Reviews in a Certain Format


In depth, user-submitted reviews would be one of the critical pieces of the site. But in order to keep quality up and maintain the content in a format we wanted without investing heavy editing hours, a simple solution was required.

We wanted writers to provide their thought on four aspects of the TV model they were reviewing: Picture, Audio, Features, and Value. And then have an Overall section where they can sum up their thoughts. Each section also needed a number score on a scale of 1 to 10. The overall score is calculated with a hook_nodeapi call when the node is saved, creating a number that is the average of the other four ratings, with the picture rating triple-weighted.

Text areas are powered by a rich text editor using the WYSIWYG module, and they can insert and manipulate images with the Insert and Image Resize Filter modules.

To allow a bit more flexibility, we also added 2 optional sections that users can fill out if they so desire. One was an introduction section so they can lead into the review, a text area. The other is a strengths/weaknesses section, where they can list out quick bullet points of highlights of the review. These are CCK text fields that allow for unlimited entries, that are then printed out in the theme as bulleted lists, as you can see in this review.

All of these are then arranged and printed out in the correct order in the review.tpl.php file. Other than punctuation and slight grammar mistakes, no editing is required on our part. No rearranging content, no renaming sections, no emailing the reviewer asking for additional info.

This may seem rigid and laborious, but we have had good feedback from some of our reviewers. Because there is very little ambiguity, they know exactly what is expected, and it saves them time in the long run.

When reviews are saved, they default to unpublished. This is done for editing purposes and screening of basic quality, and to help minimize spam.

For the star ratings displayed on the review, we do some CSS and Javascript transformation based on the numeric rating.

Javascript:

$.fn.stars = function() {
   $(this).each(function() {
       // Get the value
       var val = parseFloat($(this).html());
       // Make sure that the value is in 0 - 5 range
       val = val > 10 ? 10 : (val < 0 ? 0 : val);
       // Calculate physical size
       var size = 17 * val;
       // Create stars holder
       var stars = $('<span class="expert-stars"><span></span></span>');
       // Adjust stars' width
       stars.find('span').width(size);
       // Replace the numerical value with stars
       $(this).replaceWith(stars);
   });
}

$(document).ready(function() {
$('span.expert-stars').stars();
});

CSS:
.node span.expert-stars, .node span.expert-stars span {
   display: block;
   background: url(img/stars-gray.png) 0 0 repeat-x;
   width: 170px;
   height: 16px;
}

.node span.expert-stars span, span.expert-stars span {
   background-position: 0 -16px;
}

Why not use VotingAPI and Fivestar? Well, we d: for the quick reviews on the actual model pages, and it works great as usual. And it was possible to use them, with Fivestar CCK fields and multiple voting axis, but we still felt that the scope we were going for was outside the bounds of the modules. We wanted reviewers to just enter a concrete integer, and have reviews sortable by those integers in Views. But we also wanted control of the styling and color of the stars, making them a different color than the quick reviews. Fivestar’s stylings, by default, effect all instances, and that’s not something we wanted to wrestle with at this time.

To prompt user and make them aware that they can write a review on a particular model, we display text and a link telling the visitor that they can write the expert review if a published review is not found for the model they are viewing. If an expert review has already been written, the overall rating as well as a link to the review is shown. We do this with a quick database call in a custom module, as the Nodereferrer module seemed a bit of an overkill for our situation. However, for those who do not want to write custom code, Nodereferrer would fit the bill for this problem.

To Forum, or Not to Forum

Besides commenting on reviews and news stories, we wanted another way for users to interact. The most obvious choice is using Advanced Forum, and this has served us well on some other sites. However, several active and large forums already exist that cover LCD TVs, and we didn’t want to be seen as their competition, as they could eventually become a great source of cross promotion.

So we decided to do a Yahoo Answers type of functionality. Users can ask questions, receive answers, and vote on those answers.

This was possible with Userpoints, the Vote Up/Down module, and the Userpoints Karma module. Vote Up/Down can add VotingAPI powered forms to comments for certain node types (in this case, Questions), and User Karma ties into Userpoints so every vote for a comment adds a certain number of points to the comment author.

The only thing missing after all of this is sorting comments by vote. Given that core only let’s you sort by comment post date, we again had to override the comment display with a view to get access to the needed sorting. But how to replace the default comments on nodes with this view? Enter the Comments In a View module. All you have to do is enable it to get it working.

Managing a Multi-Writer Team

When you have multiple authors writing about the same topic, and they don’t each have a separate and specific "beat", there is a risk that they will duplicate work on stories that are similar or the same.

To help obviate this, we created an Upcoming News view, that only displays unpublished news items. Writers are instructed to first create the news item with the title of the news story they are working on, so it will show up in this list. Likewise, before they begin working on something extensively, they need to check this list to make sure no one else has already claimed the same thing.

But having unpublished nodes creates a permissions problem. Only roles with the "administer nodes" permission can view unpublished content, and we don’t need news writers to have full access. So we used the view_unpublished module which gives us granular control over what roles can view unpublished nodes of a certain content type.

The Future

Real world users and browsing patterns are needed before adding additional pages, or changing the structure. As traffic rises and we collect more data, we will be able to add additional groups of relevant content and more useful sidebars.

And as users begin adding quick reviews and asking/answering questions, we will be able to add more incentives, like a Featured or Top Users list, and then allow them to use their earned karma to trade in for free stuff. Given Ubercart’s integration with Userpoints, this will be relatively simple.

Conclusion

Yet another success for Drupal and the community. Even with needed functionality that Drupal core lacked, there was usually a module to fill the gap quickly and help manage a site that will have a large amount of content in the future. The power of the Views module, in particular, never ceases to amaze me and continue to reveal additional power on each subsequent use.

Comments

sovarn’s picture

Great website and great writeup.

In the LCDs by size block on the front page, when you mouseover the sizes the links show the path not the aliased path. Looks like the links were hardcoded in...

emilorol’s picture

Just a question: Why for the ratings you didn't use a numeric drop down instead of a text field or text box? This apply to "Picture Rating", "Audio Rating" and "Feature Rating"

Emil Orol
"In the computer business you’re either a one or a zero and I am determined never to be zero."

jazzdrive3’s picture

That was something I planned to do after making sure everything worked, but then it got pushed aside and forgotten. Thanks for the reminder.

--
Help Princess Hiccup! - My daughter requested a story about a princess with hiccups...and so I created this Kickstarter.

Maung Maung’s picture

Thanks for sharing your development experience.
I like the idea of using views slideshow as a TV player, on home page.

I think, the slideshow will be more beautiful and attractive, if a TV screen image is put as a background picture. Then the view slideshow looks like a TV showing "LCD TV Reviews". So the visitors can get more feeling about LCD TV. (But not enough space there. Just my 2 cents.)

How about to add a "read more" link in "Recent LCD TV News" view? Even though we can click the Title and Image to see full article, a custom "read more" link also useful and visual for the readers (also for screen readers).

I really like the whole idea of using Drupal to create a review site.

Best Regards

Life is too short, love it, be happy, don't waste your time with sorrow, anger and upsets. :)
Drupal and web knowledge sharing, Personalize Drupal training in Singapore

palik’s picture

nice looking website, but one fail is that when i click "Write a quick review" i'm moved to login page with no link to register form (there is a link up there but not really visible). A bit misleading i think... anyway great showcase :)

--
Using Drupal since 2005
Sous chef at Polish Drupal Community - http://drupal.pl
My Drupal blog - http://blog.elimu.pl/category/drupal/
My personal site - http://palikowski.net

jazzdrive3’s picture

Ah good catch. I'll rectify that.

Thanks.

--
Help Princess Hiccup! - My daughter requested a story about a princess with hiccups...and so I created this Kickstarter.

jsequeiros’s picture

Un Excelente trabajo con drupal.

TapSkill’s picture

Nodereferrer does look quite interesting. I only recently delved into Nodereference, though. It isn't really something I've had to use often. I think it's nice you're sharing your experience with the community.

---
I have created and maintained countless Drupal-powered sites and have made heavy modifications to modules on a site-by-site basis. I am an illustrator, a game developer, and a web developer.

aac’s picture

Good website and great writeup.
Thanks for sharing it with community.

---~~~***~~~---
aac

figs’s picture

Nice site. Thanks for taking the time to documenting it too. One comment, it would be great to see dates on the guides (even month/year) as there is currently no indication of this. No point reading a LCD vs plasma guide that isn't up to date...

suneethar’s picture

It's a nice site.I had a walk through in the site. I found one link is leading to "Page not found'-http://www.lcdtv.net/category/story-terms/lcd-guide when I clicked "LCD Guide" link which is placed down in the page http://www.lcdtv.net/guide/lcd-vs-plasma. Other than that the site was superb and sharing your development experience helps others and newbies alot.

Thanks,
Suneetha.

SuneethaR

jazzdrive3’s picture

Thanks for pointing that out. I didn't have that vocabulary checked on the view. It's fixed now.

--
Help Princess Hiccup! - My daughter requested a story about a princess with hiccups...and so I created this Kickstarter.

paolo12’s picture

Very good site, I like design. And info is useful, it was always interesting for me which TV is better - plasma or LCD and i've found an answer!

eminkel’s picture

Great insight as to how you accomplished your project with Drupal. It's always interesting to read these. Thank you.

Only peeve is the text in the footer is very dark under the About LCDTV.net and difficult to read.

adamdicarlo’s picture

Regarding the page.tpl.php code snippet shown—that's what preprocess functions are for. In this case, the logic could go in your THEMEHOOK_preprocess_page() function (and should, IMO). For a more flexible approach you might consider creating a content type called, say, "<vocabulary> Info" -- associate one node with each term, and, in your preprocess function, grab the page title from that node. (That way you keep those strings easily editable.) That will be especially important for maintainability if you end up associating more than just a page title with each term.

xplan’s picture

i'm very interested in your star rating ,can you tell what file to edit with javascript code ?
thank for advice

jazzdrive3’s picture

It was a custom jquery script I just added to script.js.

Instead of telling you myself, check out this stackoverlow solution to the problem:

http://stackoverflow.com/questions/1987524/turn-a-number-into-star-ratin...

--
Help Princess Hiccup! - My daughter requested a story about a princess with hiccups...and so I created this Kickstarter.

xplan’s picture

thanks a lot