Trinidad Guardian

The Trinidad Guardian, one of 3 popular newspapers in Trinidad, re-launched their website on New Years Day 2009 using Drupal 5. The site has a simple design done by their in-house graphics designer Ms. Maxie Navarro. The Drupal developer behind it, Shivan Jaikaran, would like to share his techniques as a tech case study.

Why was Drupal chosen?

The old site was a plain html site and did not provide much (if any) flexibility in terms of multiple updates, RSS, scheduled workflow or fostering a community website with features such as comments. Drupal was decided upon internally as the CMS of choice to overcome such drawbacks. It was imperative that the editors be allowed to update the site simultaneously, remotely and without much programming skills....features that were not possible with the old site.

The Homepage

The homepage has a different look from every other page on the website. This was done using a custom page-front.tpl.php and Panels. The main sections of the website (the same as their print edition) are the main menus (or the primary links). The colors corresponding to the menus correlate to the print editions as well. The colors (on hover and active) were done using simple CSS.

The Internet editors needed to decide which articles go exactly where in the centre column of the homepage. For this, Nodequeues were used extensively.

Data Architecture

Trinidad Guardian Article Node
All news articles on the site are of the same content type. They are all "articles" after all. And as with all newspapers website, they have more or less the same kind of fields (strap, slug, drop, byline, title etc). The editors wanted the ability for each article to have a main image. This was simple: use a image CCK field. However, their request was that sometimes the image might be a vertical one (where the body text would then wrap to the left of the image as shown in the example to the right) or the image might be a horizontal image (where the image would stretch the full width and all body text starts underneath it). To get this functionality done, I had to use two imagecache presets. But how then would Drupal know whether a horizontal or vertical image was uploaded? After I beat my head around this for a few hours, I finally came to a dirty solution that did the trick. I simply added another CCK drop down field called "Stretch" with two preset values Yes and No. "Yes" would mean stretch the image horizontally and No would mean the opposite. The code inside template.php looked like this:

if ($vars['node']->field_stretch[0]['value'] == 'No') {
  $stretch = theme('imagecache', 'article_main_image', $vars['node']->field_main_image[0]['filepath']);
}

else {
  $stretch = theme('imagecache', 'article_main_image_stretched', $vars['node']->field_main_image[0]['filepath']);
}
$vars['stretch'] = $stretch;

Not too nice, but hey it worked! If you have an easier solution to this, I'd be interested to know so you can always leave a comment.

Scheduling

Deep thought went into what scheduling technique to use. The editors wanted to be able to create the stories from the day before and schedule a time for it to be "published". Initially, it was thought that the Workflow module was overkill for this and that a simple combination of Views and CCK date fields can handle this. But in the end it was easier to use the Workflow module and its built-in scheduling of transition states were used quite successfully. I ran across this bug, but a simple fix became available soon after.

Caching Strategies

It was quite obvious from the forefront that this was a high traffic website and that caching strategies had to be thought about at some point. During testing it was realised that the site became sluggish with the surge in traffic during peak hours. In keeping with the existing web hosting set up at the time, a combination of different caching strategies were used.

Of course, Drupal's built-in pagecache and minimum cache lifetime values were set.

CSS aggregation, MySql Query Cache and Panel's Simple Cache were used.

Even with the above implemented, it was still sluggish. At that point eAccelerator, an increased HTTP KeepAlive and Memcached were the major players that turned a sluggish site into a fast responsive website.

Managing Spam and Inappropriate Content - the easy way

Spam is a nightmare for most websites, especially where end users are allowed to contribute via web forms such as this particular website. Mollom took care of most of that. With a few other smaller modules, I was able to ease the work load of the web administrators and pass this onto the end users of the website.
Comment mail was used to email the web team all the comments posted. Additionally, comments were set to be approved immediately. As most comments were generally OK, there was no need for the comment approval queue and any comments that were submitted that were deemed inappropriate were caught by at least one person via the email. The flag content module was used as a backup so that end users can flag comments that may have been missed.

Using this strategy, coupled with Mollom, literally shifted away the work load from the web team allowing them more time to concentrate their efforts elsewhere.

Module Highlights

Without the Drupal community contributed modules, none of this would have been possible. A great fat THANK YOU goes out to each and everyone of you.

  • Node queue - This was used extensively throughout the site on the homepage as well as in each section page. This allowed editors to easily put a node into its correct queue right after the node was created. The queue, coupled with Views and Panels, then handled where the content was placed.
  • OpenX Adserver Integration - On their old site, OpenAds were used, so this module came in very handy for the new site. The Ad module was a bit primitive at the time of development. That module could not handle flash ads which was a major requirement for their site.
  • CCK - this site uses about 40 CCK fields and I can't personally imagine any Drupal site that does not use CCK.
  • Feedback - This module is used to get the feedback link to the top right.
  • Imagecache - Again, used extensively basically anywhere you see an image. This allowed the flexibility for the editors to upload any dimensions, and then Drupal takes care of scaling and cropping the images so it fits nicely into the theme.
  • Service links - This module provided a basis for the Article tools section of every article.
  • Pathauto - This is a must have module for any site that cares about Search Engine Optimization.
  • Views - Again, I can't imagine any site that does not use Views, especially for a newspaper site where content is mangled and twisted almost beyond the stretch of your imagination.
  • Autonodetitle and Token. These little modules helped automatically title the nodes in a user friendly way...something which can be overlooked with many news sites.
  • Mollom - I knew right away spam would be a problem from the start and it still is. But this module took care of about 99% of the spam that is coming through.
  • Comment notify was used to foster community contributed comments with replies going back and forth between interested (subscribed) readers.

Miscellaneous Modules

  • Devel - Very useful module for module and theme developers.
  • Flag content - Used to allow users to flag content that is deemed inappropriate but not necessarily spam. I would really recommend this module for community driven websites to ease the workload of web administrators having to constantly monitor user contributed content.
  • Tagadelic - Used to create the typical tag cloud so that users will see the most popular content by their tags and weights.
  • Webform - Used for all of the forms on the site except the contact form (which comes with core).
  • Weather - Used to pull weather from an external source for display on the homepage.

Drupal 5 or 6?

Right now this site is running Drupal 5. There is absolutely no reason why this site cannot be upgraded to Drupal 6. During the business proposal stage of this project important modules were still "iffy" or in the Drupal 6 alpha stage and wasn't quite ready for a production site, so hence the reason for choosing to go with Drupal 5 in the proposal. There was a significant time lapse between when the actual project started to when the proposal was written as well. Right now though, the upgrade path to Drupal 6 is pretty straight forward.

Challenges

Well in case you missed it, there was only ONE Drupal developer that worked on this site and the timeline was 3 weeks! That meant many hours a day, no sleep and plenty Drupal bandwidth.

  • As usual IE6/7 is always a pain and required their own CSS hacks.
  • The site had to be developed keeping in mind that it should be accessible to persons with disabilities. With that said, every effort was made to make the code XHTML Strict.
  • The old site consisted of Archives that are in plain HTML format (static files). There was no easy way to transfer this into the new Drupal site to my knowledge.
  • The secondary links background had to be changed depending on what section the person is in. This required a dirty hack in template.php to add special CSS classes based on the path. Took me a while to come up with this solution after trying out other solutions that didn't quite cut it.
  • Some of the Panel pages would have "No Title" in the breadcrumb, so I had to do a bit of custom breadcrumb in template.php for most of the main section pages and 3rd level pages.

Newspaper sites and Drupal

As you can probably tell, Drupal is becoming the CMS of choice for newspaper websites. You can join the Newspapers Group if this topic interests you.

Contacts

Comments

Dark_Adder’s picture

The site is very user friendly and the theme is nice to look at.
Drupal is indeed the way to go for newspaper sites.

vermario’s picture

Nicely done :)

As for the "one developer, 3 weeks", I feel your pain mate! :)

thanks for the writeup, the solution with imagecache is a smart one which I hadn't thought of.

Konstantin_by’s picture

I like drupal in all way. Thanks for that product

http://daadaa.net

jinlong’s picture

cool,great drupal,great work,great site!

---------------------------------------------------------------------------
Drupaluser.org--I am the master of my Drupal

shawn.sh’s picture

Nice work guys, the site looks great, and the writeup was awesome, very insightful. Good to see a Trini site on the drupal home page.

--
Shawn Gregg

gmndesign.com - portfolio
shalosophy.com - blog

seutje’s picture

nice writeup, giving an overall view without going too much in-dept, but providing a few in-dept explanations where appropriate

kudos!

roemasa’s picture

Very nice and quite simple design. Does the design like that (quite simple) or is it because the site still new and thats why don't have many menu?

------------------------------
About Drupal

http://www.drublog.com

wedge’s picture

Great job, and it's always great reading this writeups. They are very useful as inspiration.

Dig1’s picture

I just scanned the new website and it looks really 'together' and easy to read. I like the way it follows the layout of a hardcopy newspaper.

Congrats

Digby

itsallhell’s picture

For the placement of the images, have you consider using Image Resize filter http://www.lullabot.com/videocast/effortless-inline-thumbnails-image-res....

Thank you for the write up.

xamount’s picture

Actually this is the first time I am seeing this module....it seems to have come out around the time of development as well which would probably explain why I missed it. Thanks for pointing this out, I'll look into it.

derekhu’s picture

Very nice write up. Thanks.

aac’s picture

It may be a nice "model case study" which involves only one designer and with a very small time frame. This type of web design in such a small time frame is possible only in Drupal. Anyway thanks for nice information.

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

Anonymous’s picture

Hi, very nice work.

A question: I notice that using the search, there is a tab for 'Google AdSense for Search'. What is the purpose of that tab?

My understanding of the function is that Google AdSense will deliver ads relating to the search terms, but I thought that was something that should be 'silently' integrated into the normal search. Why would that tab be exposed to the users?

Again, awesome job!

----------
My Blog
SunriseWebDevelopment.com

hhaidoura’s picture

Again another great News success added to drupal account,
But the challenge issues include serious thing that should be treated:
"# The old site consisted of Archives that are in plain HTML format (static files). There was no easy way to transfer this into the new Drupal site to my knowledge."

I mean for a news paper the archive is a very important content that powers ur users search ur google indexing, etc..

But from all aspects, its a brilliant work. CLAPS CLAPS !!.

xamount’s picture

Thanks....also what do you suggest for the archives? I mean they are already in a state that is not really transferable. Google indexes it and searches will end up in the search results though....

spxero’s picture

Have you thought about using the Scheduler module for setting a node-publishing schedule? If you have the JSTools module working, you can just click the date and time that you want to schedule your posts.

xamount’s picture

Well actually, there is whole entire workflow set up for node publishing and the scheduled publishing built in the workflow module handles this.

kesmeby’s picture

I just wanted to thank you for sharing your experience setting up this site. I liked your image stretching hack within template.php. Nice work.

samperez’s picture

Nice web site and cool design.

Hope to see more of that in the future.

--
Travel to Peru

laredo’s picture

HI

Great write up thanks!

I noticed in your "Challenges" you said

"The old site consisted of Archives that are in plain HTML format (static files). There was no easy way to transfer this into the new Drupal site to my knowledge."

Since your still at 5 I wanted to point out a module I have used to to import literally thousands of static html files over the last couple of years.

http://drupal.org/project/import_html

BK

xamount’s picture

hey laredo, thanks for this link, I think its definitely worth checking out!

hhaidoura’s picture

[Its a theory]
what you really care about in those html pages is the following (date,title,body .... no idea about the images :S)
you setup a new Drupal DB (dump ur site structure and restore it into a new one and call it the big DB)

what if we took this html_import module to load those html files into the big DB.
and you set up solr to index this DB.
with the multi site search feature in solr, you will be capable to search all these data from your website.

its archive man, so its needs this mass of work.

chasz’s picture

How do i do the menu on the left? where the categories/taxonterm's are listed with the lastest 5 title, plus the "more" link

xamount’s picture

Well the answer to your question is hidden in your question itself. That particular block you are talking about was done via the Views module.

Anytime you want to "lists" some content, more than likely the Views module can do this.

MiMe’s picture

Great to hear that more and more websites are using Drupal!

andrewsuth’s picture

Thank you for the interesting write up, you gave me some good ideas for how to handle some issues in my current projects! I've downloaded nodequeues and will get started tomorrow...

You mentioned the following:

It was quite obvious from the forefront that this was a high traffic website and that caching strategies had to be thought about at some point. During testing it was realised that the site became sluggish with the surge in traffic during peak hours. In keeping with the existing web hosting set up at the time, a combination of different caching strategies were used.

An avenue that you didn't seem to have taken extensively was to improve the page loading performance. Here is an article from Dries giving an overview of the Yahoo! YSlow addon for Firefox and what it analyses: http://buytaert.net/yslow

And here is an excellent, in-depth article from Wim Leers going over how to improve your Drupal site using the output from YSlow: http://wimleers.com/article/improving-drupals-page-loading-performance

Having analysed your front page, there is definitely some alterations you can make to it in order to improve the page loading performance. Here is the output I got - grades are from A (best) to F (fail):

Performance Grade: F (35)

F - 1. Make fewer HTTP requests
F - 2. Use a CDN
F - 3. Add an Expires header
F - 4. Gzip components
A - 5. Put CSS at the top
F - 6. Put JS at the bottom
A - 7. Avoid CSS expressions
n/a - 8. Make JS and CSS external
A - 9. Reduce DNS lookups
F - 10. Minify JS
A - 11. Avoid redirects
B - 12. Remove duplicate scripts
F - 13. Configure ETags

In an afternoon you could probably bringing your overall score from 35% to somewhere in the 70's - producing a noticeable difference in user end loading performance. The only point above that you could not improve with a minimal amount of effort/money is number 2, using a CDN.

Andrew

xamount’s picture

Thank Andrew for your feedback. I will look into this and consider it for other projects as well.

andrewsuth’s picture

I look forward to hearing your feedback about this performance improvement and the difference it makes to the site. Keep me in the loop.

Andrew

xamount’s picture

Hi Andrew, as the site was already handed over to the client, there is not much I can do at this point. Sorry.

bigtonkertoys’s picture

Very good ideas and recommendations.