New York Observer - a newspaper site
The New York Observer, a prominent New York City newspaper, has relaunched its web site using Drupal. The site features a gorgeous visual design by Randi Hazan which pays careful attention to typography and whitespace. The Drupal craftsmen, Moshe Weitzman and Barry Jaspan, want to share a few of their innovative techniques with the Drupal community.
Home Page and Channel Pages
The Observer site centers around its Home page and Channel pages. Each Channel page covers a major topic: Politics, Media, The City, etc., while the Home page of course covers the most important articles from all Channels. Just as with their print newspaper, the Observer has a team of professional editors that choose very carefully just how they want the Home and Channel pages to look. They decide exactly which articles go in each slot on the page, they custom-crop the article's lead image for aspect ratio employed in that location, and so forth.
Furthermore, the editors need to be able to create these precisely defined Home and Channel pages in advance, preview how they will look when published, and schedule them to be published in the future. For example, each Tuesday, they gather their new content, make editorial decisions about what to publish, and prepare the new version of the site all to be published simultaneously early Wenesday morning. They also release weekend editions which the editors create on Friday.
We considered Scheduler, Scheduled Actions, and Workflow modules for this previewing and scheduling capability but none were up to the task. Instead, we chose a simpler technique that we called editions. We created a CCK node type for Home Page Edition and another for Channel Page Edition. 
These types are mostly a collection of nodereference fields where editors place articles into various slots on the page. Since editors also need to customize article headlines when appearing on these pages (i.e. not same title as seen on article detail page), we added title text fields for each nodereference. Most importantly, we added an Effective Date field to each edition type. This is the date upon which this edition node becomes live.
This editions architecture provides several great benefits:
- Consistent rendering. We define a Home Edition node template (node-edition_home.tpl.php) file which renders any home page, be it current, past, or future, by using the node references in its CCK fields. Channel pages work the same way but they have their own template with a different look from the home page.
- Preview of any future or past edition simply by viewing the Edition node directly.
- Scheduled publishing. The Home and Channel pages use a simple menu callback function that selects the correct Edition node for that page by choosing the one with the newest Effective Date in the past. It then just calls
return node_view($nid). Simple. - Contributed modules. Since Editions are nodes, they can be easily affiliated with a Channel with taxonomy, listed in various ways by Views, cloned by clone.module (useful since often the editors make only small changes from one day to the next), and so on.
These advantages compare very favorably to using Scheduler, Scheduled Actions, or scheduled Workflow. Those modules rely on cron to make many small $node->status changes on lots of articles. If we went with that approach, editors would have to painstakingly schedule each article. If cron stops, or a wrong date is chosen for a article, the home page would look incorrect. More importantly, it is not at all clear how to preview a future or past edition of the home page using those approaches. The Editions architecture is simpler, more reliable, easier to manage, and meets all of the site's requirements.
Data Architecture
After the Home and Channel pages, the most important pages on the site are of course the articles. An article is a CCK node type with a variety of custom fields: subtitle, lead image, dek (sort of like a teaser), and more. Furthermore, Articles relate to several other CCK node types using node references:
- Author. Each writer or columnist is represented by an Author node. Author nodes are different than Drupal users because, typically, a writer delivers a story to an editor but the editor actually creates the Drupal node for it; however, it is the Author's name that should appear in the byline. Each Article may reference one or more Authors.
- Columns. A Column is a means of grouping articles together such as a series of articles by one author, a group of articles like "Book Reviews" by various authors, or any logical grouping. Columns are represented as nodes and each Article may reference one or more columns.
- Print Editions. Besides Home and Channel editions, the site also has a Print Edition node corresponding to each physical print edition of the paper. Articles can reference the Print Edition in which they appear, making it possible to review old print editions as a unit and implement the "In this issue" block.
Data Migration
The Observer's electronic archives date back to 1997 and we migrated all of them into the new Drupal site.
They had about 22,000 articles spread between a legacy Microsoft Access/ASP system and an XML format used for syndicating their content to other organizations. They also had six weblogs in the MoveableType system, some with thousands of posts and comments. Each article from each of these sources has one more Channel assignments, one or more authors, and one or more Columns, and of course the normal data fields such as title and body. Some of the articles appeared multiple times in the source data and the requirement was to eliminate duplicates during migration.
Because there was so much data and it was in multiple formats, it was not possible to load it all into memory at once. We could not, for example, determine the complete list of Authors and Columns and create those nodes ahead of time so when we migrated the articles they would already exist. Furthermore, we had a requirement to be able to migrate portions of the data one a time (for example, one of the Access databases, or just two of the XML files, or just three of the blogs) for site testing.
We devised a powerful and flexible system for meeting all these requirements that dynamically creates each entity and its dependencies (Article, Author, Column, Print Edition, Channel, etc.) as it is encountered and assigns the node references on the fly. For example, when an article needs the node id (nid) of an Author, it calls get_author_nid($author_name). That function returns the nid of the Author node if it already exists or creates it right then and returns the nid. All the entities are handled the same way so creating an Article can cascade into creating all of its dependencies as needed.
In all, about 26,000 Article, Author, Column, Print Edition, and other nodes were created during migration.
Block Control
Update: This is now possible using Block Page Visibility module.
This site uses a lot of blocks with complicated rules for which blocks should appear on which pages. We started by painstakingly visiting the configure page for each block and entering complex visibility rules. This became sufficiently painful that we switched to a data-driven technique. We constructed a single array in our theme template that, for every block on the system, stored the node types, Drupal paths, and "special boolean" on which that block should appear. The special boolean allowed some blocks to have very complex rules such as "appear on Article pages but only if the Article's referenced Column node is one of the six special columns designated as a 'blog'."
This centralization of block visibility became a terrific convenience and suggests a much simpler UI for block visibility as well.
Drupal Drives Flash via XML Feed
The top of the Home and Channel pages feature a slick Flash application which show thumbnails and a larger image from featured articles on the site. The content of this Flash varies by Channel and for home page. All of the content management for these Flash slots is handled in CCK node types. Editors schedule stories into these slots as part of Editions.
This same principal powers the ultra cool headcloud on the home page. Unlike most tag clouds on the web, this one weighs tags (i.e. people's heads) by recent read history. That is, tags which belong to very highly read articles are scaled larger. Thus, the head cloud is a representation of Who's Hot in the past 72 hours. Statistics.module's node counters measure recent hits for any given article.
Here is the XML file for the headcloud. Drupal’s format_xml_elements() function is handy for generating arbitrary XML.
Module Highlights
We are thankful to the Drupal community for these fine modules.
- Relatedlinks. This fine module powers the Related Articles block on an article page.
- Node queue. This fine module lets editors place articles into slots on various pages. We used this instead of editions when editors did not need scheduling capability.
- Service links. This module provided a basis for the Article tools section of an article page. Alas, we had to alter it significantly.
- Pathauto. This is a must have module for any site that cares about Search Engine Optimization.
- Views. This site offers loads of article lists sliced and diced all different ways, along with corresponding RSS feeds. Views is the only sane way to meet this requirement these days.
- CCK & Date/Link/Calendar/Imagefield/Imagecache. This site features a whopping 110 CCK fields. CCK has arrived, and helps us build sites quickly, and change them easily.
- Autonodetitle and Token. These nice little modules helped us automatically title our edition nodes in a sensible way.
- TinyMCE & Img Assist. In the land of the blind, the cross eyed is king.
- Clone. Editors often want to just change the home page by one or two articles. The clone module makes this process easy.
- Misc: Devel, Flag Content, Google Analytics & Sitemap, Paging, Primary Term, Simplemenu, Submit Again, Views Fastsearch
Challenges
Not surprisingly, we encountered several unexpected challenges in building the site, usually at the very last minute. Some of them included:
- HTML in titles. The Observer editors absolutely required the ability to put bold, italics, and
®symbols in node titles. Drupal, however, assumes all node titles are plain text. We hacked core and a couple of contributed modules to allow HTML in titles in a safe, controlled manner; we hope to discuss how to do this properly for Drupal 6. - Ordering within multiple value CCK fields. Since we didn’t have an easy way for editors to order multiple-value nodereference CCK fields, we had to create different fields for Breaking News 1, Breaking News 2, and so on. This led to considerably more fields than we wanted. It would be useful for multiple-valued CCK fields to be orderable.
- clone.module does not currently clone imagefields. Since each Article can have both a full-sized lead image and many manually-cropped thumbnail images for use at different aspect ratios, this is a big limitation.
- Internet Explorer compatibility is painful as always. We found that IE7 fixes some of well-known IE6 bugs but in general is no less painful to design for.
Newspapers and Drupal
Drupal is becoming the CMS of choice for the newspaper industry. If this topic interests you, please join the Newspapers group.
Contacts
- Moshe Weitzman, Cyrve LLC
- Barry Jaspan, Jaspan Consulting
- Aaron Welch, Advomatic (web hosting)
- Brian Kroski, New York Observer
- Randi Hazan, Multipod (graphic design)
Wow! Thanks for this very
Wow! Thanks for this very instructive tutorial on the great work you did! Looking forward to trying out some of these cool features. And yes it would be great if in Drupal 6 we could get html in titles!
newms
I agree
Thanks for the incredibly detailed overview. It means so much for the community here to have case studies / examples to learn from like that. I hope you get some more work out of it.
____UofL
Now that's a beautiful
Now that's a beautiful site.
This should rightfully prove once and for all that Drupal is the tool of the future and present.
I very very like drupal!!
------------------------------------------------------
中国邮箱网-国内领先的企业邮箱采购平台
:o
Wow this is impressive - a great inspiration to us all.
Just another URL to mention when someone wants to know what Drupal can do.
Thanks for detailed report.
Nice writeup
This is the kind of writeup that really shines - nice work.
The idea of "Editions" is a total stroke of genius to drive this type of site. Compliments.
--------------------------------------------------
FireBright :: http://www.FireBright.com/
Impressive What's the $$ for
Impressive
What's the $$ for customization like this ?
Marcel
http://computingnews.com
Drupal theme designers,
Drupal theme designers, please give us some public quotes. :)
Marcel
$300 for low end
I've seen $300 at the low end. You might do better to try hiring someone hourly (assuming they look competent).
_______________________
Jim jam and Sunny Forum
$300 is on the extremely low
$300 is on the extremely low end. That is only 6 hours of work at $50/hr, which is a low rate to begin with. Do not expect professional caliber work at that price.
Other rates
What rates have you seen? I'm just talking about making a theme. Is that what you're talking about as well?
___________________
About Sunny
Well, what's 'making a theme'?
Creating a Drupal theme requires three distinct skillsets:
If we're talking about two or three different individuals, that's two or three different rates.
Around where I am (Rochester, NY -- we have great designers, here, but they glut on the market and depress the rates a little) I'd guess that freelance rates for a good PHP coder or HTML geek would bottom out at $60/hr, ranging up to about $150, and freelance graphic artist/designer rates will tend to be around $80-$150, depending on the calibre and experience of the artist. My agency bills at a "blended rate" for all tasks that's somewhere in between, but definitely far higher than $50/hr.
As for 6 hours: I could imagine someone really experienced with Drupal theming and web presentation layers moving from a simple Photoshop composite to a simple, complete Drupal theme in six hours. That person should be charging more than $50, though. And by no means am I considering the changes that you'd need to make to the theme to accommodate the Observer's more exotic layouts. Just pulling this out of my butt, I'd guesstimate more like 24 hours, rock bottom, for the initial development, with extra iterations over time -- consider, when you're dealing with unusual configurations, you need to do a lot of testing and probably a lot of rework.
Beautiful theme, but
Beautiful theme, but unfortunately it's broken in Mozilla 1.7. :(
- Corey
Impressive
Very impressive - both the site and this post.
Thank you for sharing the knowledge with drupal community :)
Congratulations!!!
---
Drupal Themes Live Preview - themegarden.org
Beautiful
Now that's a beautiful site. This should rightfully prove once and for all that Drupal is the tool of the future and present.
very nice writeup
very nice writeup, like professional writers! :)
some people have mentioned that CCK can get slow with a large number of fields/content. Did you
have to make any modifications here or elsewhere to address speed issues?
thanks again for the excellent writeup, this sort of post is very helpful to those wondering
how they are going to implement their new project ideas!
-ks
no cck optimizations
we didn't do any speed optimizations for CCK. i decided to ignore performance tweaking until the end. this is usually a good idea - you can waste a lot of time on premature optimization. later i looked at a couple of slow queries and optimized them a bit (tag clouds). i was prepared to add lots of custom caching but it never became necessary. the site was performing relatively fast on its own. note that most visitors to this site are not logged, so they benefit from the page cache. thats already so optimized that there is no gain in tweaking further.
i did recommend to the hosting company that they enable mod_expires in our apache. surprisingly, that made a huge difference in the responsiveness of the site. Drupal's .htaccess looks for mod_expires and if enabled, instructs apache to send caching headers for images and stylesheets. for some reason, the apache defaults don't do that. so the browsers stopped requesting duplicate images on every request and the pages finished much faster (from the user's perspective).
the ony place cck can get you into performance trouble (that i know) is when used in a View and you've specified many CCK fields. if you use full node, teaser, or other View type you are fine. the trouble comes with all those fields and a table type because your query has lots of joins. the workaround is straightforward - only add nid Field to the View and do a node_load() to get the rest in your theme of the View. sorry - i can expand on this here. Ask the Views folks.
Excellent
Excellent work, this is a great inspiration for me personally to fulfill Drupal's potential on my own site.
Thankyou
on limitations...
Moshe, is it just the Table view that causes these limitations, or it the List view also problematic?
list too
list could also be problematic if you have lots of cck fields in the list
Amazing job
Congratulation guys! This is a very, very good job and an excelent initiative to publish this overview and semi-tutorial!
Thank you for share this!
Rafael Ferreira Silva - PHP Developer
http://drupal-br.org
http://rafaelsilva.net
Cool job, i am working on
Cool job, i am working on several news portal website, the one i use for my french website here in Morocco
http://www.biladi.ma
Thanks for the explanation it gives me some good ideas
Just wanted to say that the
Just wanted to say that the "Observed today" section is genius... I love it. : )
----------------------
Current Drupal project: http://www.ubercart.org
Looks Great!
It's sites like this one which brought me to Drupal to begin with, and consequently made me decide to learn PHP. I have a way to go in getting there--but I love reminders of what this CMS, and the community behind it, are capable of.
Gorgeous Site
The site looks really great. I noticed observer.com has a meaningful number of indexed pages and images. Some of the original paths are retained in the new site, but It seems many are not. For example. That's a lot of re-indexing. Was it not feasible/undesirable to preserve the old URLs (with a redirect/pathauto, or some other method)? I'm sure the site will be re-indexed in no time, but I can't help observing an SEO consequence.
Proton Cannon
Project management
I'd like to say good job to all involved and thanks for sharing your experiences. I am working on a project of similar magnitude and I would be very interested in any comments you may have relating to the project management of this project. What was your approach to conquering visual design, useability, workflow, tech architecture and development parts of the project? How long did it take from project approval to go live?
Wow
Great CMS + super developers = wow site. This just shows how drupal can go places in hands of talented developers. :>)
Thanks for sharing your experiences. Excellent article!
Abe
Weather
This probably seems like a trivial thing on such a huge site but I've been trying to find a weather indicator I like for my site. I'm curious how you did the weather bit in the header. Most of the weather sites have their name plastered all over their icons.
Thanks,
Michelle
--------------------------------------
My site: http://shellmultimedia.com
NOAA
i looked around at options and went with a roll your own approach. NOAA offers XML current conditions feeds for all of USA. so i implemented a cron hook to get the current conditions for NYC, and then parse it for the bits i need, and then store in the DB with
variable_set('observer_conditions, $conditions). thats like 15 lines of code. all thats left then is for the theme call a rendering function when it is time to show the weather in the header.NOAA even tells you if it is day or night at the specified location in the feed. So Observer has their icon designer make day and night versions of most conditions. NOAA supplies icons but they are ugly. Yahoo provides nice icons and a nice XML API but is not allowed for commercial use. So Observer had their designer make icons.
NOAA here, too
I also went with the NOAA, but I used their code to just pull their entire page into an iframe. I didn't realize they provided small icons and am using ones from another site and have it link to my weather page instead of theirs. Not an ideal solution. I'll have a look at the NOAA site again and see if I can find their icons. I'll have to deal with ugly as I'm a hobbiest with no design skills. LOL
Thanks for the info. I don't have the skills to parse XML right now but I'll file away that bit of "how to" and maybe at some point I will be able to do it and make a better weather page for my site.
Michelle
--------------------------------------
My site: http://shellmultimedia.com
simplexml
if you can use php5, then you have access to simplexml. that makes parsing XML dead easy. give it a try.
pathauto; cck
A great site and a great write-up. thank you very much.
1) you say most of your users are not logged in. Do you think your same approach would work on a site where most users are logged in?
2) You say you have 110 cck fields. Can you tell us what's the maximum number of fields one cck type has?
3) You say pathauto is a must. I'm surprised with 26,000 nodes it didn't create a problem for you. Can you address that?
4) is it possible to paste the code for putting html in titles? I'm quite fine with hacking core.
5) version 4.7 I assume?
thank you.
gosh no - 5.0
1) yes, same approach. might or might not need more attention to caching in that case. kinda depends on how much money the client has to burn on optimization.
2) article has about 50.
3) we actually did not pathauto the migrated data so there are not so many aliases. i don't think it would be a problem .that scaling problem went away 1-2 releases ago.
4) the hack went into check_plain() to transform [b] into bold tag and similar for italics. then a couple of other hacks to clean out the tags when plain text really was needed - node_feed() and email modules.
5) this is a drupal 5 site. we started building after 5 was released so the decision was easy.
Why do that? Just use the
Why do that? Just use the raw title in node.tpl.php and run it through filter_xss_admin instead.
<?phpfunction phptemplate_variables($hook, $vars) {
if ($hook == 'page') {
$vars['title'] = filter_xss_admin(menu_get_active_title());
}
if ($hook == 'node') {
$vars['title'] = filter_xss_admin($vars['node']->title);
}
}
?>
-- Merlin
[Point the finger: Assign Blame!]
[Read my writing: ehalseymiles.com]
[Read my Coding blog: Angry Donuts]
a few reasons
many modules use the title field directly and assume it is plain text. think rss feeds and emails. furthermore, a check_plain() gets on title field (i forget where). furthermore, i am seeing tags getting stripped upon node by some over eager validation. we need a cohesive solution - a naive one like this gets you some good stuff, but not ultimately where you need to be.
Really impressive!
Really impressive and very fast site!!
- Did you make any optimization to Drupal?
- Can we know what hardware/os does it run?
Thanks for sharing, knowledge is power!!!
-----------
Yes, I'm also very impressed
Yes, I'm also very impressed with the complexity of the website. When I once created a drupal site with a decent amount of CCK fields, and also, around 20 modules, the site became very slow. I don't know how you guys do it, but kudos to you! It's a great website, must have taken an afwul lot of time to get it done.
---
Breaking News: Yunar | Long live democracy! | Buddy 4 life: Prameya
Taxonomy Feeds
I notice the URL's for the category pages (eg: http://www.observer.com/channel/29563) are either aliased or covered by a callback in some way - however the Feed URL's are taxonomy/term/29563/feed (ie not aliased). Is this intentional?
Channel pages use Editions.
The channel pages use the editions architecture, so channel/ is a callback function that load the channel with the newest publication_date field that is in the past (so "tomorrow's channel page" is not shown until tomorrow).
The feed URLS just show the latest articles in each channel in a normal Drupal fashion. The feed is created by a View which overrides the taxonomy.module's taxonomy/term path.
Great Job!
Thumbs up, great job! A real showcase for Drupal.
Wouldn't it be great if more developers shared with us how they tackled their problems. Each and every time I start a new web site a have to plow through the hundreds of modules to find the right one for the job.
sIFR - module or not?
Nice writeup of a very real case use. I noticed the use of sIFR headers. Did you use the sIFR module or hacked your own version?
Not.
I embedded sifr directly instead of using the module. It was simple enough to do since we had a completely custom page template anyway and their font specifications are well defined and fixed. Also, avoiding "just one more little module" syndrome can often improve the speed and stability of a complex site.
Honestly, I also did not think to look for a sifr module until I had already embedded it directly. There is just so much contributed functionality it is hard to keep up with it all!
Question About The Tabs
Site looks great...Whomever worked on it should give themselves big pat on the back...As a new Drupal user, I love to see high quality, high profile sites being built using Drupal...It gives me hope...
Anyway, one of the things I saw is that you have those tabs in the MORE ON OBSERVER.com block...My questions are:
1) Are you using the tabs module from the JSTools module...
2) If not, which method are you using?
3) If you are, are you doing anything special that causes it to degrade so gracefully?
The reason I am asking is that I am using tabs for one section of a site I am developing using the tabs module from JSTools and it does not degrade the way it does on this site...On this site the tabs maintain the same look when javascript is turned off...They just function differently...This is exactly the same as I would like it to work for me...Unfortunately, I have yet to get it to work this way...
If you or anyone else for that matter can point me in the right direction, it would be much appreciated...
Again, great site!
James Hayton
Magic Tabs!
I'm glad you asked!
I developed a new module called Magic Tabs for this site. It lets you define a set of tabs and the callback function that provides them. You can also specify how to theme the tabs and the content area. For the "MORE ON OBSERVER.com" block, we have:
<?php
function observer_most_read_tabs() {
$tabs[] = array(t('Most Read'), 'views_build_view',
array('block', views_get_view('most_read'),
NULL, FALSE/*pager*/, 8));
$tabs[] = array(t('Most Commented'), 'views_build_view',
array('block', views_get_view('most_popular'),
NULL, FALSE/*pager*/, 8));
$tabs[] = array(t('Top Tags'), 'views_build_view',
array('block', views_get_view('most_tags'),
NULL, FALSE/*pager*/, 8));
return $tabs;
}
function theme_observer_most_read_tabs_tabs($items) {
return theme('item_list', $items, NULL, 'ul', array('class' => 'obs-tabs'));
}
function theme_observer_most_read_tabs_content($content) {
return theme('obs_round_box', $content, array('class' => 'obs-no-ul'));
}
?>
The CSS class obs-tabs and theme('obs_round_box') are responsible for the actual appearance; Magic Tabs just outputs a ul list and the content in a div. Then, to display the tabs (in a block, page, wherever), you just call:
<?phpprint magic_tabs_get('observer_most_read_tabs');
?>
This produces the tabs that work dynamically or via page loads. You can also specify a default tab. Multiple sets of tabs can exist on the same page, too.
I have not contributed the Magic Tabs module yet because I think it has a lot in common with the menu system and I have not figured out exactly how it ought to work in general. It is on my to do list, though.
oooOOOOoooo
Pretty! And helpfully magic tabs!
Thanks So Much...
I really like how this tabbing functions...Thank you for being soo generous with the code and everything...Best of luck and congrats again on the great site!
James Hayton
bjaspan - Magic Tabs
Really good, can't wait for your module contribution!
Yes Pretty Pretty pretty Please -- with sugar and cherries???
I would love the magic tabs module ... I am hoping to be able to create magic menus for Organic groups with this one .. nothing else seems to allow me to create a set of menus or tabs specific to the current group ...
You're site is beautiful, and thank you for your very detailed overview!
Julie
I need a module for ajax
I need a module for ajax tabs i think this module will be use full
Is the module published. Or Can u send me the module
Regards
Mehanathen N
JS disabled
I really like how you set up the most read tabs to degrade if JS is disabled. The current tabs module displays a list of the content in each "tab" if JS is disabled, and I prefer to have it degrade the way you did with your site.
I took a look at the HTML, and it looks pretty simple to build a theme function to output the appropriate href and onclick metadata. The only thing I'm not clear about is how ?observer_most_read_tabs_tab=1 works. How would I intercept and interpret this variable in the theme function?
EDIT: Problem solved. The variable can be accessed via PHP's $_GET['observer_most_read_tabs'].
Thank you for sharing the
Thank you for sharing the code. Unfortunately, this is not very clear for non-coders. I second the request to share with the module if possible, please.
Hi Barry, Can you please
Hi Barry,
Can you please take a look at: http://drupal.org/node/259134#comment-847284
How is that different from
How is that different from the awesome Quicktabs module ?
http://drupal.org/project/quicktabs
The Drupal Agency >> www.raincitystudios.com <<
Me on the Web >> www.couzinhub.com <<
Time...
According to the project page, quicktabs didn't come out until January 25, 2008, almost a year later.
Michelle
--------------------------------------
See my Drupal articles and tutorials or come check out life in the Coulee Region.
I'm not sure sure this is
I'm not sure sure this is what I asked you... I wasn't asking when these modules have been released... but what are the differences between each other ?
Like what is in one that is not in the other, or how not similar these two modules are ?
couzinhub, magic_tabs do not
couzinhub, magic_tabs do not preload the content of all the tabs. it uses ajax-load of content for only the particular tab, which is clicked.
magic tabs have two major
magic tabs have two major features that are not in quicktabs:
You can read more at the project page: http://drupal.org/project/magic_tabs.
Note: This project IS NOT related to NYO, besides being the inspiration, I wrote it from scratch, based on the explanation bjaspan gave here.
--yuval
Awesome job. More screen on
Awesome job. More screen on the backside would be awesome. Like how is looks when adding a new article
Impressive!
Moshe - you and your team are to be congratulated on this amazing site. I appreciate the design and implementation detail provided in your post. This is very helpful to others trying to achieve even a portion of the achievements this site makes. Great job, thanks for sharing it!
AmyStephen@gmail.com
http://OpenSourceCommunity.org
Classified Pages
Firefox, IE 6 Issues -
The classified pages are not centered like rest of the site.
Ads on classifieds are not staying to the right on all the pages looks like a width issue.
Other than that it looks really good and thank you for the great site overview.
Charlie
not drupal
The client opted to use a 3rd party for classifieds so you are not looking at Drupal there.
Looks great
Looks great guys! Can you give a rough estimate about how many hours/days/months you worked on this project? Or better yet, a break down of your time? Like 25% of our time went to migration, 40% of our time went to the theme, etc ....
timetable
Here are some wags (wild assed guesses):
Brian Kroski of NYO is to be credited for producing excellent wireframes before the project began. Good wireframes are, IMO, the key to a smooth running, cost controlled project. They are the only way that all parties can agree upon what is to be built. Long functional requirements documents are nearly useless.
The importance of wireframes
I don't know if that should be a poster or a tattoo on the forehead of every web developer.
The site is just splendid. Great, great job!
I agree
Does anyone have suggestions for creating practical wireframes in an interactive fashion that is not overly time consuming?
Also, how much wireframing is too much or too little...?
Web Design & Development in Nottingham by Kineta Systems
Great use of the Node
Great use of the Node Reference concept!
----
Darly
Very, very impressive
Moshe:
You and your team are to be congratulated. We just converted our online news site to Drupal but our results are nowhere near as impressive as yours. You've given me some new ideas to use for better integration.
I'm also impressed by your ability to migrate your legacy articles. We're still trying to figure out how to get 12 years worth of articles ported over.
Once again, congratulations.
Doug Thompson
Capitol Hill Blue
http://www.capitolhillblue.com
Content or Design in the Layout
This is the type of look that I'm looking for. Are the blocks and columns achieved through theme design or
did you use modules and which ones and how?
Views and panels
On our site we use views and panels to break the page into columns with stories grouped according to category and ranked by an CCK integer field.
Doug
Block and column layout
Almost every page on the site has a main content area on the left and a "traditional" side bar. Blocks in the right sidebar are standard Drupal blocks. In the main area, on the home and channel pages, everything is just a that has a fixed width, variable height, and is floated to the left. Those pages use a custom node.tpl.php to add the right content. In hindsight, they probably should have used Drupal 5's $node->content array instead.
Well, almost everything. IE6 and 7 compatibility required doing some weird things that I do not remember.
how many hours a week?
Moshe,
thank you for the very helpful replies. In terms of your answer to Dries' question, is it possible to let us know how many hours a week the developers were working on average? I would guess about 60 hours a week.
Knowing how many hours a week the developers worked would help us understand how to calculate what 2 months plus translates into.
Also, is it possible to find out how much time was spent making the wireframes? how many were made?
Was Moshe telecommuting in from Boston, and showing up in person for about 6 days (3 2-day meetings)? Was Barry working on site with the NYO person? What kinds of collaboration software did you use?
Was the site mostly migrating an old site, and making it the same but in Drupal? That would mean a lot of time saving in terms of not having design meetings and not needing to make decisions what about (user) functionalities to have.
Thank you.
Moshe and I were both
Moshe and I were both working remotely. We only met with Brian from NYO once in person though we had regular status calls. We made constant use of a ticket tracking system without which the process would not have worked.
The new site is a complete redesign relative to the old site. Most of the user functionality was decided before we started on the project but there were plenty of changes midway through, too.
Great work and thanks
I found drupal 2 weeks ago.
The amount of info it's huge and it's discurraging when I look for something.
Thank you guys for the effort, with the article.
I really, really needed something like this.
Congrats!
Hosting & Infrastructure
Thanks for the excellent writeup, it's always interesting to see detailed posts like this covering a mixture of existing modules with lots of customisation plus migration specifics.
I'd love to see more about the hosting specification if this is possible for details like:
I feel this would really help as a reference for people trying to predict hosting requirements and so forth.
---------------------------
http://www.Footy247.co.uk
great site
that's a cool site
very smart
Boilerplate theme?
Impressive work! Did you start your theme from scratch? If not, which theme did you find the easiest to start off with?
Good question...
...I'd like to know the answer too!
The theme is completely
The theme is completely custom, written from scratch.
Redirecting Old URLs?
The site really looks great, and thanks for the write-up and module summary.
The head cloud is an inspired visualization and navigation tool.
Was it a requirement to redirect all of those old permalinks to the new Drupal-based URLs?
If so, do you have a code snippet that demonstrates how to do that?
Thanks again
Columns as nodes?
Why are they nodes instead of categories?
My guess would be that a
My guess would be that a column might need node stuff, like CCK fields for an editor image, a description of the column, etc.
awesome!!
The site looks great.Nice Job!!
----
addict drupal http://www.lord-of-the-rings-online-gold.cn
This is brilliant
Beautiful site, and amazing that you are willing to share your secrets with us :-)
What are your server requirements?
Congratulations - excellent job!
I'd also be grateful if you could tell us how many page impressions you serve per month and what your server requirements are.
I am very interested in Drupal, but still a little unsure about how scalable it is and how optimised it can run.
Cheers.
Advomatic
The site is skillfully hosted by Advomatic. They are big users of virtualization and clustering. There are 2 web servers and 1 DB server. The files directory is shared between the web server using NFS ... Bug them for more info about the architecture.
Thanks for the info
Thanks for the info Moshe.
Is there any chance you could find out the monthly page impressions for us? That would be a big help.
Advomatic may think it a bit odd if I email them with the question out of the blue, and may not want to give that info out to a stranger.
Many thanks.
sorry
i can't provide page view numbers nor more hosting info. sorry. please contact NYO or advomatic.
I'd be happy to tell you more
Please contact me via email and I'd be happy to share some info with you.
Excellent site and write up
I remember looking at the old NY Observer site when I was doing research for a newspaper site I'm working on. Major improvement! Also, the tips you provide are helping me thru a brick wall I ran in to. Thanks!
Thanks!
Moshe and Barry did a wonderful job developing the site for us. They were great to work with and really allowed us to stretch the system. They engineered around some unexpected requirements and did a masterful job translating my sometimes opaque specifications. I'd recommend either of them to anyone in a second.
Also Aaron and the Advomatic team have been providing us with very robust and attentive hosting services, keeping us up and running more smoothly than I expected assuming the scale of this implementation - kudos to them.
One more thank you (I feel like this is the Oscars now) to the Drupal community. You have enabled a small operation like the New York Observer to compete on a grand scale because of this great software project. We plan to give back wherever we can.
Brian Kroski
VP Online
The New York Observer
http://www.observer.com
Good news for the Community
Thanks for the detailed information.Its the best way to give back.
Griffonia | Voacanga Africana | Shea Butter
Thank you so much for this
Thank you so much for this write up. It is inspiring to see how some developers can take the flexible nature of Drupal and twist it and craft it into a solid and well designed site. This article has been one of my favorite articles on drupal.org in a long time. I've printed it off and shown it to many people. I would love to see more of these "postmortem" pieces about other sites that were developed using Drupal. Coming from the gaming industry, one of the best ways we as game developers learn is by taking the time to write our postmortems and share with other developers the strengths and weaknesses of a project and how we overcame issues.
Congrats to The New York Observer for your great website. I hope it will help increase your readership.
Cool site!
I wish there's a step-by-step tutorial for this :)
Tutorial
Step 1) Hire a team of professionals...
Heh... Just kidding. A site like this is a lot of work and not something that could be put into a single tutorial easily. It's better to look at the individual bits you want and find tutorials for those.
Michelle
--------------------------------------
My site: http://shellmultimedia.com
Haha
What if... they create a tutorial site... Drupalist's Corner: For Your Eyes Only" :p
/node ehem
Okay i really tried to contact you privately, but i suppose my email didnt go through. Is the following part by design, or you just forgot?
check http://www.observer.com/node or http://www.observer.com/admin...
amazing. three days, and its still there
...
That's because they are bypassing the default Drupal front page behavior and have nothing 'promoted' to the front page. So unless you know to browse a drupal site by url, nothing links there.
I do like your parting shot anf how you felt it necessary to add the phrase
It's amazing how some people feel the need to go out of their way to denigrate others in passing.
-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide -|- Black Mountain
whats amazing
are you amazed when you can make up urls and see unexpected results? /node is not used on our site. i really don't care what shows up there. on /admin, you are seeing the custom 404/403 page. observer uses same for both. i think thats reasonable, if not ideal. you don't have access to /admin, so you get 403, and you see it in garland theme, which is our administration theme.
if you say so. I found the
if you say so. I found the whole site, as it was described here quite astonishing, a great piece of work, and for me lose threads, like /node somehow don't fit in this professional picture.
im sorry, i meant no offense by mentioning this.
Good read
Very informative. Definitely an inspiration.
Malaysia Travel Guide
Amazing Posting
This posting is really useful and open my mind about the real Drupal capability. Also, give me more confidence to use pathauto, CCK and Views modules. I spend several days to learn how the brillian moshe create this website. Thanks for open the secrets on build this great website not only the tricks but also how they build the server architecture.
This is Very Very Cool!
What an amazing amount of work, and contribution back to Drupal! Absolutely awesome, beautifully done. A great big hat tip!
A couple of questions
First of all - great job! The site looks really good and one can tell a lot of work has been done.
Now for my questions:
Also, notice that this creates a duplicate content issue since this page has the same content as http://www.observer.com/ and search engines don't like that.
1/ -> alias
IMHO I think it's only an alias to the homepage to maintain previous links made outside the Observer.
IMHO an alias is not the correct solution
Creating an alias to a page creates a duplicate content problem - a case in which 2 different URLs show the same content exactly. Search engines don't like these pages since they think they are some kind of spam.
If there links out there to http://www.observer.com/homepage.asp, then the right solution would be to create a 301 redirection to http://www.observer.com/.
There's an easy fix to this
There is an easy fix to this:
http://drupal.org/project/globalredirect
Sometimes this situation is unavoidable, even if it has implications for Search engines.
--------------------------------------------------
http://WorkHabit.com and http://www.WorkHabit.org
A FireBright Company
I concur
This is a stable and useful module. It does have a performance hit, but nothing compared to the duplicated content issue. Plus, you don't have to configure anything! Just install, and off you go! :)