OPEN Magazine Homepage

The Open Magazine is a new current affairs/entertainment weekly magazine available on magazine stands in India. The magazine was launched in the first quarter of 2009.

The publisher of Open Magazine, Open Media Pvt. Ltd. wanted a web presence for its magazine. It selected Srijan Technologies, a content management specialist company based out of New Delhi, India to construct the website. Srijan's responsibility was to build the website from scratch and host it. Site design was done by Itu Chaudhuri Design.

Srijan Technologies used Drupal 6. Development took place over a period of approximately 4 months and the Open website was released to the public in July 2009.

Currently the website shows all the content that appears in the print version of the magazine online for free. The website also contains some exclusive web content that is not present in the print version. The website is substantially updated once a week though web exclusive content is updated more frequently to keep the site "fresh."

The purpose of this case study is to introduce all significant (mostly technical) aspects of the website from Srijan's perspective. Feedback and comments are requested.

Key features of the website

  • A visually appealing website with a lot of custom theming
  • An eMag feature which exactly reproduces the magazine on the web (third party Flash integration)
  • Advanced Search features using the Apache Solr search engine
  • Integration with ICICI bank's payment gateway for online subscription to the magazine
  • Incorporates rich multimedia content (slideshows, videos and images)
Dogs of War OPEN Magazine E-Mag OPEN Magazine Search OPEN Subscription

In Detail

We now look at some of the key features in greater detail.

Apache Solr Search

OPEN Magazine Apache Solr Search

Our client was very focused on a good search experience from the very beginning. After evaluating a couple of options we decided to use Apache Solr for search because:

  • Faceted Search is really cool! Once you get the hang of it, it allows you to explore content on the website easily
  • Apache Solr is a capable search engine with a lot of "enterprise" class features lacking in default Drupal search (or even the faceted search module*)
  • Apache Solr is scalable. As the number of nodes on your website increase, search experience does not degrade (PHP based search is an incredible resource hog and may not scale well). Search can be offloaded to another machine further taking load of the webservers. Apache Solr has a Java backend.
  • Apache Solr is easily customizable. Here is a sample search result page. We have themed the search result intensively to give a nice user experience.

* Faceted Search is a separate Drupal Module -- not to be confused with the faceted search feature provided by Apache Solr

Some unique features on our implementation:

  • We show the teaser of the article in addition to the textual matches returned by Apache Solr
  • Apart from selecting facets you can also search within facets. For example you can search for "Jack" in the author "facet." This will return articles with both "Jack" and "Jack Straw" as author.

Overlays

One of the most distinctive features of our website, we believe, is the overlay drop down menu. Our magazine is very visual and there is no reason why the dropdown menus should not be exciting!

OPEN Magazine Overlay

This uses the jQuery plugin available here as a base.

E-Magazine Feature

The Open Magazine is a paper magazine. The customer wanted a way for the site visitor to see a virtual paper version. We have done this using the Issuu.com flash plugin.

OPEN Magazine E-Magazine

Please check our latest emag.

Theming

The site is custom themed using Zen as the base theme. The site has a lot of "bling" and most of the site development time was spent on:

  • Customizing the Zen provided node, page etc. template (.tpl.php) files and attaching CSS to them
  • Using the template files produced by Views (often minimally customizing them) and attaching CSS to them.

We did not use Panels anywhere on the site. The site was designed to be compatible with Google Chrome, Safari, Internet Explorer (7 and above) and Firefox. Internet Explorer caused us to tear our hair out on many occasions during the project.

Fundamental Modules

The power of Views 2 with the Content Creation Kit (CCK)

The heroes of the project were the Views 2 & CCK duo (BTW Apache Solr was also a hero!). If it weren't for these extremely powerful modules we'd easily be looking at spending 2x-3x the development time.

Just look at the complex functionality we were able to achieve just using Views (with CCK)!

OPEN Magazine Shorts

A Note on Content Types

There is an inherent tension in making content types: Too few content types and you have bloat within a content type. The symptom of that is that you will have many fields in the content type (many of those fields are only going to be used rarely). On the other hand, with too many content types code reuse goes for a toss. The trick is to find a balance and we believe that we did on OPEN Magazine. After major back and forth we finally settled on two main content types: "articles" and "shorts" (there are other minor ones). The article is the long-form content type (example) and the shorts are the short articles, often grouped together (example).

Other Major Modules

Here we list some of the other major modules used on our site.

CCK/Views Family

  • Imagefield & Imagecache: For all our image needs!
  • Nodereference: A powerful module included with the CCK that allows content administrators to link / associate content together. On our site we use Nodereference when we want to manually suggest articles to the reader, create a Table of Contents for a particular issue, create a Package article which is nothing but a container for other articles etc.
  • Nodequeue: Allows you to create a static "list" of articles and show it in a view. Provides a user friendly backend where content administrators can easily add, remove or change the order of items in a nodequeue. Our front page consists of many nodequeues. For example the 5 essentials on the frontpage is implemented as a view on a nodequeue.
  • Filefield Paths: Very useful module that gives a high degree of control on the server path and file name of a filefield (Note: imagefields are also filefields). We use it to prefix the file name of all uploaded images with the node id of the associated article. So “baloons.jpg” becomes “2344.baloons.jpg”. Useful for tracking images to their nodes by just looking at their file name.
  • Filefield Insert: Allows easy insertion of inline images into your rich text editor
  • Vertical Tabs: Reduces the clutter on your node edit form
  • Views Bulk Operations: A fantastic module!. We use it to make our custom content management interface. This content management interface allows users to filter nodes on the basis of content type, magazine issue date, magazine section etc.
  • Slideshow Pro: Slideshow Pro is a image gallery flash plugin. This module provides Drupal Integration. See an example gallery.

Commenting

  • Comment Notify: Notifies commenters that of fresh comments on articles they commented upon
  • Ajax comments: Allow comments to be posted without a page refresh
  • Captcha: Simple spam prevention.

Taxonomy/Tagging

  • Cumulus: Cumulus presents the tags in a visually engaging manner
  • Tagedelic Views (+ Tagedlic): Sometimes you want to see tags for content only from a particular section... e.g. Tags from all articles in the Business section. This allows you to get tags from a group of nodes rather than all nodes of a particular content type as is the usual case
  • Hierarchical Select: Very useful module that creates a taxonomy selection widget in the node edit form. We used it mainly to force users to select the leaf nodes of a particular taxonomy hierarchy.
  • Taxonomy Manager: Good for merging taxonomy terms, deleting taxonomy terms and so on

Other

  • FCK Editor: Our Rich Text Editor. However we would recommend any new site uses WSIWYG API as the umbrella module for Rich Text Editors.
  • Rules: An extremely powerful and useful module. It allows us to do all kinds of useful things like redirect articles on save. A great example of its use is the smallworld page (example). This page is a view consisting of many instance of a CCK content type called “Shorts”. After a content administrator make a “Shorts” content and saves it, we use Rules to redirect us to the view that would contain it. We also use rules to send emails to article authors when someone comments on the website.
  • Fivestar: Used for ratings on movie reviews
  • Apache Solr search: Discussed above
  • SimpleCDN: The simpleCDN modules allows you to change all imagefield paths so that they point to a Content Delivery Network (CDN). SimpleCDN module supports any CDN that uses HTTP mirroring. We use it in our case, for the SimpleCDN CDN.
  • Webform: Site visitors can subscribe to our paper magazine by filling up a form (implemented using webform). The Webform module tracks past submissions, validates the form and redirects the submission to the the credit card gateway.

Search Engine Optimization / Advertising / Tracking

  • Global Redirect: Redirects all URLs like /node/2344 to their aliased path
  • Integrated Metatags: Meta tags for search engine optimization
  • Pathauto: Assigns human friendly URLs to nodes
  • OpenX (formerly OpenAds): We are in the process of rolling out advertising on our site. We chose OpenX as our ad manager because Google Ads requires the website to be up for at least 6 months if your site is from India/China.
  • Google Analytics: A must have for your website if you want to track your visitors

Development Related

  • Features Module: An Amazing module! For CCK and Views exports (See below)
  • Devel: Provides a suite of tools for the site developer.
  • Drush: Command Drupal from the command line!
  • Drupal for Firebug: Very powerful module! Integrates with Firebug. Allows you to look at the form API representation of a page. Execute PHP code in the Drupal context and more.
  • Admin Menu: Allows easy site administration using an unobtrusive menu dropdown at the top of the page.
  • Backup and Migrate: We take regular backups of the drupal database to prevent against loss of data. The module allows you to dump the contents and/or structure of only the tables you need. This allows us, for instance, to dump all the tables in our Drupal database (except for the cache tables where we only take a structure dump).

Comments on Development (And a plug for the features module!)

We used Drush extensively during the development process. Its a nifty command line tool used to accomplish all kinds of administrative tasks. All Drupal module code was checked out from drupal.org (using CVS as the default package handler in Drush). We used SVN for our internal version control.

A prime problem during Development is that a big chunk of your configuration is stored in the database. That's not good because you can't track those changes and roll back easily. The solution is to bring that configuration as much as possible to source code where it can be checked into the version control system. This allows you to diff and roll back easily.

The Features module helps you accomplish the above tasks easily.

  • Easily Manage View exports
  • Imagecache exports
  • CCK content type definition exports
  • You can bundle related views, content types and imagecache presets as "features" that can easily be enabled or disabled
  • Automatically discover module dependencies in a "feature"
  • "Features" live as modules in your filesystem and can therefore be version controlled
  • Find what has changed between whats actually in the database and a particular "feature." Useful for discovering accidental configuration changes on your live server that may be causing problems

A lot of the above can be accomplished by using the export features of the Views and CCK modules but its much tougher and does not have that integrated and easy feel to it that features provides.

We used the feature module on our website for all Views, CCK and Imagecache exports and we suggest you use it for your site too!

Customer Data Entry and "Staging"

We now talk about how we solved a common client requirement and then we talk about a client responsibility.

Trial” Feature of the homepage: A "staging" type customer requirement

Before making content changes to the site, the client would usually like to see how the site would look after new content was uploaded. This is tricky. We all know that before you publish nodes you can preview them. But what if you want to preview complex pages like the home page? We have provided, what we believe, is a simple way for the client to preview the homepage (this is simpler than a pure staging solution requested by many clients):

  • Our homepage is basically a set of nodequeues containing featured content. We created two copies of each nodequeue on the homepage. One set is the "live" homepage nodequeues and another set is “trial" homepage nodequeues. The trial homepage nodequeue views do NOT check if the node is published. This is so that unpublished content can also be previewed. The "trial" homepage is available on separate, login only URL.
  • Once the client is satisfied with the look and feel of the trial homepage, he can choose to transfer all the nodes in the trial nodequeues to the “live” nodequeues by simply clicking a button (We do programmatic population of the “live” nodequeues.)
  • We have some more small tricks here for other situations that we can talk about if people are interested

Test Data Entry by Client: A Client Responsibility

We got the client involved quite early on to do test data entry. There is no way to finalize your content types unless the client does not start doing data entry. Because that is when all the edge test cases come out and the content types get tested out. Please note that content types are the most important building block on your site so treat them with respect!

We forced the client to concentrate on test data entry (clients always seem to care about look and feel more!)

If there is one suggestion we can make for this whole case study: Please do NOT delay test data entry!

Site Hosting and Performance

We will give a small overview of how we hosted and optimized www.openthemagazine.com. This information is not common in case studies but we hope that you will find it useful.

Server Architecture

Openthemagazine.com is hosted in the “cloud.” We have the following virtual machines (simplified description):

  • Load balancer (Haproxy)
  • 2 Apache Webservers (containing the Drupal PHP scripts)
  • NFS Webserver (for the shared boost cache and the files folder). This server also runs Memcache.
  • MYSQL database server
  • Apache Solr (for our search engine)

The Open Magazine is image intensive. To offload some of the server load, improve site responsiveness (and decrease our bandwidth bill!) we use the Simplecdn content delivery network.

Boost Caching

We use Boost caching to reduce server load. Boost is a very powerful module that converts dynamic pages to static HTML. This way the PHP interpreter does not need to run on each request. Apache simply serves out the pre-calculated static pages. Server response times are significantly decreased because PHP scripts can typically take an order of magnitude more time to process than static pages.

Boost is similar to Squid or Varnish but because it is tightly integrated with Drupal it is able to expire the content intelligently (e.g. it will expire a page as soon as someone posts a comment on it. This would be difficult to achieve without writing custom hooks in non-integrated caching solutions).

Please note that you should only use Boost if most of your visitors are anonymous (which is the case for us).

Memcache

We use Memcache to serve all our cache tables. We also use the Memcache module to do all our session handling. Using Memcache in this fashion gives us a big performance boost. We used the Memcache module in Drupal.

Sprite Creation

We created sprites for a lot of our background images for our (design intensive) website. Sprites allow multiple background images to be downloaded within an "omnibus" image. This reduces the number of separate HTTP connections that need to be initiated for each visit (and thus makes our site finish downloading faster).

Other Drupal/PHP Optimizations

The most important optimization is to look at the HTTP expiration headers that your site generates. Its critical to have far in future expiry dates for all your static/rarely changing content (e.g. CSS, Javascript, images) and short expiry times for HTML. This way repeat visitors will only download the HTML and their browsers will use their local cache for CSS and Javascript.

We also enable CSS and Javascript aggregation. This reduces the number of files to be downloaded (this helps in the same way as sprite creation). Its is also important to enable this if you are going to set far-in-future expiry for the static content (Please ask me why if you're interested. Short version: Every time you change JS/CSS during the course of development the name of the aggregated file changes. This way even though these files are set to expire far into the future, web browsers use the new CSS/JS file as instructed by HTML, instead of the old ones in the local cache.)

We also use APC opcode caching.

Miscellaneous

We used the Firebug plugin Yahoo Yslow extensively for website performance measuring and optimization. Highly recommended!

Conclusion

We hope your enjoyed reading this case study. Visit our website at www.srijan.in to learn more about us or write to us at business[at]srijan.in for your business inquiries. We'll be glad to answer any queries about this site!

Comments

drewgliever’s picture

Man, this has got to be the most helpful drupal post I've found to date. Thanks so much for taking the time out.

Just out of curiosity, what does drupal development normally run for?

sidharth_k’s picture

Hi Drew,

Thanks for the wonderful comment :-)

We're based out of India so we can be quite competitive. Cost would really depend on the type and duration of the project -- sorry I'm not being very specific here. If you have a particular project/task in mind do get in touch with us and we'll be happy to provide you with an estimate.

Thanks,

Sidharth

kiwifellows’s picture

Hi, whats the performance like with all the modules on this site?

I've setup Lookforge classifieds made simple (free classifieds) but haven't had many visits of course (just going few days). But want to know what sort of traffic you have and what sort of setup you have in terms of caching and web/ database setup. I've got quite a few modules enabled as well so am just interested as to what performance hit will be when traffic starts coming in.

cheers

sidharth_k’s picture

Hi!

We have used a lot of modules on our site. So we were worried about the effect that it would have on the performance of the site. That is why we have implemented boost and memcache (see above). Memcache mainly helps logged in users (people who will be basically using the admin interface for data entry in our case) while boost helps the anonymous users.

With boost and memcache you're pretty much set. Our server configuration, though slightly complicated was made to take future growth into account. We could have pretty much plopped everything into a single decently powered machine and it would have been okay.

The major performance problems only arise when you have lots of logged in users. That is always a challenge. Luckily in our case it was not as we are a news-type site not a social network (so users are almost always anonymous). With Boost caching our servers run happily and are not very stressed. We'd probably even be okay without boost (though less snappy) because of the built in caching by Drupal.

We're hoping for traffic to increase in the weeks and months ahead but right now its quite manageable. I wouldn't worry about traffic in the initial weeks of the website... things take time to pick up. If you expect a flood of traffic then it might be a good idea to setup your server as virtual machines that you can scale up and scale down at will (e.g. slicehost.com, linode.com, amazon EC2 etc.). In fact when the case study went on the Drupal homepage we initially increased the RAM on our servers as a precaution. Now we have removed the extra RAM from our virtual machines. The wonderful thing is that we only paid for the days in which the RAM we added was extra. The pay-as-you-go principle is very useful when you are setting up a site for which you have no clue what the traffic is going to be like. When the traffic becomes reliable/known you can always shift to real-metal machines.

Thanks,

Sidharth

dman’s picture

Highly impressive.
Great write-up, and a supreme result. Very effective use of sprites - I love the ticket-stub menu!
There's a lot of bits come together there, but somehow it stops short of becoming cluttered. Something about the consistent tone of the design holds it together well.

I'm surprosed I liked the top-menu overlays as much as I did. Normally I'd expect experimental UI like that to get in the way, but this is really effective. And FAST, good job planning ahead for that CDN.

ipsitamishra’s picture

Hi Sidharth,

Very well written Document. Was expecting this much before. :) I am sure it's going to help many people for planning their upcoming projects, most importantly on the "Performance" part.

Very informative as a whole.

Keep up the good work.

Kuldip Gohil’s picture

Nice site and Nice Witeup!

vivekkhurana’s picture

Nice write up sid :) I liked the way you covered teh technical details while keeping business out...

regards
Vivek

ascetic’s picture

wow amazing!!! two thumbs up!!

I like the design & typography a lot. the navigation menu is a killer too!!

thanks for the complete case study. really informative, I realize I still have many things to learn in Drupal.

dheeraj.dagliya’s picture

Sidharth,

Marvelous effort.
I was waiting for long to see a case study from an Indian company on Home Page, Thumbs Up to you Srijan / Sidharth for this effort.

The site layout is very clean, Itu's designs and art work is wonderful.

To do some great work you need equally great client, congratulations to OpenMagazine for envisioning the project and considering Drupal. I'm sure Drupal will rock for their website.

When everything is so perfect and neat, it become a challenging task to convert this art work and thoughts into reality. Sidharth, thumbs up to you & your team, once again. Site architecture is perfect yet simple. It looks like effort has been put on performance and User Experience, which is very important for the success of any project.

Keep it up!

Dheeraj
http://www.gloscon.com

comfort_drupal’s picture

@sidharth_k:

Efforts and outcome in the site states you success.

After a long time have seen a very nice case-study having qualitative and quantitative content.
This site also address to everyone in the community because it is not targeting to any single segment such as politics, technologies,etc.

Flash gallery feature is awesome, cool effects.

This is also big news for the india drupal community because this is the very first site come on the drupal.org's front-page.

Drupal Rock

Sree’s picture

good writeup!

-- Sree --
IRC Nick: sreeveturi

vikas_salyan’s picture

Question on Private Message (Others might find answer useful).

At the moment I'm fighting with the Apache Solr Search
integration on Drupal. Everything works fine, the only problem I have
is, that I can't find a way to display images in the search results,
without having a node_load. I have seen on OpenTheMagazine.com that you
found a way to display images in the results.

Srijan Answer:
You can display image in search results without doing node_load.

Please do the following:

  1. Write your custom module.
  2. Implement hook_apachesolr_update_index().
    eg. modulename_apachesolr_update_index(&$document, $node)
    In that module you need to add your image path to apachesolr document object.
    For more help please have look at apachesolr_image.module file existing inside apachesolr/contrib/apachesolr_image folder.
    eg. if you are adding image path to $document->articleimagepath object then articleimagepath variable should exists in schema.xml.
    For more detail how to store data in apachesolr see Loading data into Solr section:
    http://www.ibm.com/developerworks/opensource/library/os-php-apachesolr/.
  3. Implement hook_apachesolr_modify_query()
    Implement the above hook to retrieve imagepath from apachesolr
    e.g. $params['fl'] .= ',articleimagepath'.
  4. Implement hook_apachesolr_process_results() to theme image.
Prasad Shir’s picture

Siddharth

This is a great case study. Very useful information & nice fluid style of writing!

Best wishes

Shash’s picture

Another question on Private Message regarding the overlay menu used on the site.

I am really impressed by your write up for OpenTheMagazine.The overlay menus are amazing. I understand the reference to http://p.sohei.org/stuff/jquery/menu/demo/demo.html but how do you get the content into the menus. A simple description would be much appreciated.

Srijan Answer:
To build the overlay we made a custom module.It involved a jQuery module from http://p.sohei.org/stuff/jquery/menu/demo/demo.html

This module handles smooth transition of menu items onClick and onHover.It is mainly used for handling drop down menus with menu items but was customized to add content to it in a well defined structure.

The module is added to the site and the function call made was

$('#your_li_id a').menu(options, '#your_div_id');
//could be put under a foreach-loop to read all 'li' elements and open/close corresponding divs.

Each li #your_li_id element being a menu item is associated with a div #your_div_id element.Any content within this div element will be shown when the corresponding li element is clicked.

'options' is an array of arguments to be passed to the menu.
Few of the included values in options array were-
1.showDelay - The number of milliseconds to wait before opening the menu after hovering over the target.Set to 0(Default being 200ms)
2.hideDelay - The number of milliseconds to wait before closing the menu.Set to 0 again(Deafult being 200ms.)
3.copyClassAttr - Copies the class attribute of the LI elements to the equivalent menuItems.Set to TRUE(default being FALSE).

Some other options available are:
1.hoverOpenDelay - On hover wait time before opening the menu.
2.onOpen/onClose - callback functions which are triggered when a menu is opened/closed.

The HTML was generated using PHP which involved custom queries and taxonomy API.The menu items were set in a generic ul-li type HTML markup.

Regards

sushilmasti’s picture

Awesome site and very valuable write-up esp. the hardware part etc.

We're creating a similar mega menu structure for a site with the added complexity of being multilingual. I was wondering if you used Drupal menu items for your overlay or did you come up with your own menu structure.

I suspect it's the latter from this comment:

The HTML was generated using PHP which involved custom queries and taxonomy API.The menu items were set in a generic ul-li type HTML markup.

If there's any way you could contribute some snippets of code back on this, it will be really helpful.

Thanks.

rajasingh’s picture

Great work! very informative.

thamas’s picture

Congratulations! It's a modern, feature rich online media portal!

Would you be kind to write more details about the implementation of the e-magazine? Do you have plans to create a module which can integrate the service of issuu.com to Drupal? Or would you share your code?

Thanks!

sidharth_k’s picture

Dear Thamas,

Thanks for your comments.

Actually we don't do much by way of issuu.com integration. Each OPEN magazine issue is associated with a CCK content type in which we store data like the image of magazine cover, date of issue (and other meta-data associated with a whole magazine issue). In this same content type we simply store the flash embedding code that we get from issuu.com. This embedding code is called up when we want to display the e-magazine for a particular date.

Some manual changes need to be made to the embedding code every time we get it from issuu.com before we store it into the above content type -- e.g. add the standard skin etc. This process could be automated but right now we haven't done so.

Thanks,

Sidharth

thamas’s picture

Thanks for your answer!

sidharth_k’s picture

After your email I got thinking that manually changing the embed code is really quite laborious. After all, its some textual changes to the <embed> code given to us by issuu.com like adding <param wmode="transparent">, changing the style attribute and replacing the link to the default skin file to our custom skin file.

We've now implemented a custom filter without having to write a single line of PHP. We use a nifty little module to make custom filters: http://drupal.org/project/customfilter.

You simply specify the regular expression search / replace rules and you can transform your embed code to something that has all the right attributes and parameters.

Diegen’s picture

Cool write up thanks ! Great job

OsterD’s picture

Thank you very much for this detailed posting!!!!
Defimitely shows the power of Drupal to experienced hands.
Your site is a multimedia charm and should be taught as an example of how to in colleges and universities!!!!

roshan_shah’s picture

Sidharth,

All the more Kudos to you and Srijan for this. I know it is extremely difficult to get an Indian Company its due recognition in Drupal world. You have broken that barrier and as much as I love your work, I truey love that this made it to front page. It was high time and finally you and Srijan did it.

I hope this will be a new beginning for all Indian Drupal Lovers.

Roshan
http://www.gloscon.com

Heine’s picture

Apologies to Sidharth for derailing the thread, but I cannot leave your continued insinuations unanswered.

Your sense of entitlement ("due recognition") is appalling. As this case shows, there simply is no inherent difficulty to get a case study on the frontpage if you are a company based in India, provided you have a quality site and showcase.

sidharth_k’s picture

I agree with Heine's comment above. Drupal.org cares only about Drupal :-)

KiuzHack’s picture

very good work, I like theming of views in links like this http://www.openthemagazine.com/shorts/smallworld/2009-11-21#12

devtherock’s picture

Hi KiuzHack,

Thank you for your comment, actually to achieve this type of layout we have use jquery, we tried to create a reusable function in jquery, here it is, how we did it.

Please Note: views style should be unformatted.

	function shortsLayout(region_name, view_class_name, number_of_columns){
    
    var dynamic_divs='';
    
    //creating dynamic divs as per argument
    for(i=0;i&lt;number_of_columns; i++){
        dynamic_divs += "<div class='dynamic_columns_"+i+" dynamics_layout_div'> </div>";
    }
    
    $(view_class_name, $(region_name)).append("<div class='view-content view-content-custom'>"+dynamic_divs+"<div style='clear:both;' /></div>");
    
    var count_record = $(view_class_name + " &gt; .view-content &gt; div",$(region_name)).length;
    var reset_column = 0;
    for(i=1; i&lt;=count_record; i++){
        
        for (j=0; j&lt;number_of_columns; j++){
            
            $(".dynamic_columns_"+ reset_column, $(region_name)).append($(view_class_name +" .view-content .views-row-" + i));
            
            if(reset_column != number_of_columns){
                reset_column ++; //increasing 1 value
                break; //break innner loop and throw to outer loop
            }
            else{
                reset_column = 0; //reset columns
            }
            
        }
        
    }
    
}

Now you can use this function: eg


shortsLayout('#content-area', '.view-Shorts', 2); // first argument is area of your page, second is views class name and and third is number of column

I hope this will helpful to you and others.

end user’s picture

Just a heads up

Windows XP Opera 10.10 Build 1893

When I go over the most popular this week block or the other block below it they fly up and down which causes me to not be able to select any links.

sidharth_k’s picture

Thanks for your comments about the most popular block. We understand the issue you might be facing though I don't think this is a browser specific issue. The widget is too sensitive and needs to be less jerky and improved a bit. If you immediately enter the white area of the widget after opening a tab it will behave much better.

However I admit the widget needs to give a better user experience. Its on our list of things to improve in the coming days.

Thanks again for the feedback and I hope you liked the rest of the site.

sidharth_k’s picture

We have improved the usability and functionality of the widget now.

Thanks,

Sidharth

amitkarpe’s picture

Very well written.

StevenSokulski’s picture

Great write-up! Very informative.

Would you be able to shed any more light on the usage of Views Bulk Operations in your site? You mentioned an interface for editor's of the site to drill down and find content by a series of attributes and act on it. Could you provide a use case of the kind of problem this setup might alleviate?

sidharth_k’s picture

Dear Steven,

Thanks for your positive comments.

Its very easy to build powerful content management interfaces quickly with Views Bulk Operations (VBO) in Drupal. It's actually one of my favorite modules.

But in brief we use Views Bulk Operations to :

(a) List/Filter content that meet criteria that the editor is interested in
(b) Do something with that content.

Sample use cases (to give you an idea) for (a)
* List/Filter all content that is of a certain CCK type (e.g. Article, Table of Content, Blog)
* List/Filter all content that belongs to a certain magazine issue (e.g. articles from issue 23)
* List/Filter all content that has specific taxonomy (e.g. all articles from the business section or features section etc.)
* List/Filter all content written by a particular author (in our case this is almost always different from the people who actually enter the article in the system and we capture it in a taxonomy field)
* List/Filter all content with some specific text in a CCK field
(etc. you can customize for your own needs; since its a normal view you can go crazy with the filters you want to create. If you understand views, these are basically exposed filters).

You may be thinking that you can do a lot of this in Drupal already by doing a "Content List" -- its very basic though. By using VBO each row of the listing can have all the information you might be interested in seeing, such as magazine issue number, section it appears within magazine etc apart from the content title and author. Again for people who know views these are simply the fields for a view row. You can add your favorite fields by using views.

Sample use cases (to give you an idea) for (b)

After you have listed/filtered content using (a) you can choose to _do_ something to the content (here is where VBO is different from other views -- its not "read only"):
* Delete/Publish/Unpublish
* Change workflow state or write some custom actions that are specific to your Drupal implementation (etc)

If possible, we will try to give you some more details on how to make a really usable content management interface in a few days by using VBO -- there are plenty of resources on the Internet too.

Thanks,

Sidharth

StevenSokulski’s picture

Thanks for the details. I had a feeling it was intended to be a more-powerful replacement for the sorting that can be done on the Content page. Seems very cool!

One follow-up question, as its something I've given a lot of thought to recently. You said that you're storing Author (the person who actually wrote a piece) as a taxonomy instead of in a user field. What were your reasons for going this route instead of having the person that is entering the content fill in the correct person (in the form of a user) into the node's author field?

sidharth_k’s picture

Dear Steven,

If I understand your question correctly you would like to know why we did not use the "User Reference" field in the CCK Content Type instead of using a taxonomy? (Please correct me if I'm wrong)

I supposed you could do that but that would mean that you would need to create user accounts for all authors on the system -- sometimes in our magazine there are guest authors so creating an account for them would be tedious just so that they can be credited in the article. Please note that all article entry on the system is done by 2 people -- the real authors just concentrate on sending the text of the article out and the rest is taken care of by the print guys and the internet guys. This way even regular authors don't need to have an account on the system as they are not doing any article entry.

[The most ideal scenario would be that each author also input the article on the OPEN website so we don't need to have people assigned for this task but that would mean teaching them the subtleties of our not-so-simple content types. There are lots of issues to bother about like side blocks, table of contents etc. etc. during content entry so its not feasible to expect the real authors to do data entry. Blogs (a newly introduced feature on our website) on the other hand have a much simpler content entry interface and authors can directly do that data entry themselves].

Also taxonomy seems to have uniform support throughout the system. Apache Solr, the cumulous plugin, views etc. read taxonomy quite well. I'm not sure about the support for user reference in modules. That is why we used taxonomy.

Are there areas where using a user reference field helps?

Thanks,

Sidharth

StevenSokulski’s picture

It would seem that a user reference field would allow for easily retracing a user to a node about that user. In the case of the magazine site I'm working on right now, we would have a need to create a node for each author anyways (short bio, photo if available, and a list of other content they have written on our site) so creating users is not an issue. In your case, though, Taxonomy might be easier.

perke’s picture

Excellent work, sidharth_k. Very well explained too. Thank you for this detailed write-up.

ajayg’s picture

Very pretty website and excellent writeup. Some areas are themed so nicely it is difficult to believe it is a drupal website.

Any plans of giving back to community by releasing some of your modules in opensource? Atleast there are some design/theme elements that you could give back to community.

sidharth_k’s picture

Dear Ajay,

Thanks for your comments.

Can you suggest what specific features you would like to see contributed to the community? We're thinking of some stuff ourselves but it would be good to get some feedback from people outside the company too.

Thanks,

Sidharth

ajayg’s picture

Hi Sidharth,
here are few things you may want to consider. Typically when you say open source, the first thing comes to mind is code but there is a lot more than code you can give back.

1. A. Overlay drop down menu is absolutely stunning. But the jquery plgin (http://p.sohei.org/jquery-plugins/menu/) is considered non stable by author. You may want to help it get released from the fixes you did so in future there is more usage/more community support/less worry for you for maintainance related future browser version.
1. B. It is not entirely clear how you pass the dynamic node info to this plugin (more details about view if you are using). You could write some tutorial how you did that on your website (and can be a future way to attract more visitors)

2. Not just overlay drop down menu, but themed views for shorts, table of content, small world, Lounge can be added to community design resource at http://design.acquia.com/. Even the stamp like menu on the frontpage (left) is so beautiful.

Basically there are quite a few theme snippets those can be considered for giving back to community. And those are not a trade secret per se since a clever designer can figure those out with the help of firebug. But having those explained on you website will not only get thanks for community, you will get more traffic too.

Just my 2 cents.

Shyamala’s picture

Great write up! Great theming!

ItalienskaTroll’s picture

Internet Explorer caused us to tear our hair out on many occasions during the project.

I wonder why it still exists...

devtherock’s picture

ramyaps07’s picture

Very useful post

jacobmn’s picture

I am curious to hear about your / others experiences with FCK Editor... I have used it on quite a few sites and the biggest issue is always getting content from many different users into it with out extra spaces, paragraphs or other formatting issues.

Any web editor is going to have issues with accepting content pasted in from MS Word (I have not found any editor that actually strips code from MS Word even when a "Paste From..." button is provided). I am curious to know how you standardize content entry that is pasted in from other programs and if you have some in-depth instructions for your content contributors or other documentation that you provide them with.

Thanks for any insight into this problem which has bothered me for a while! Great Write-up!

sidharth_k’s picture

Dear Jacob,

I understand your frustrations with the HTML. You're right about the Paste-from-Word button too -- things are not perfect.

When you're very passionate about the website its easy to insist that every aspect of the site be simply perfect and data entry be one of them. Clients love HTML rich text editors and it its tough to want them to use any other sort of markup like textile etc. But as you've pointed out, the HTML is not always very clean.

We're fortunate that MS Word is not really part of the document workflow in our case. So the horrible issues with MS Word HTML being used don't happen on our site.

The main document entry on our site is done by only 2 people so quality can be controlled. Our source of data is the print magazine spread PDFs (e.g. the PDF for page 4-5 or page 30-31). Content Editors save the PDF as a plain text (its possible in Adobe PDF -- see Save as Text). This removes any nasty stuff. They then copy the text onto the rich text editor. They need to add italics and headings in the Rich text editor manually because all information is lost during the save-as-text process. There are some spurious <br/> that need to be removed. <p> needs to be put into place.

Its a slightly tedious process but because the data-entry is done by trained people who have some understanding of HTML the quality is consistent once you tell them how it should be done.

This process would not be possible on a site where the data entry was being done by dozens of people. In that scenarios, if you want squeaky clean HTML, textile or some other markup would probably be the only way.

We'd be curious to know if we could do it in a better fashion too actually.

Thanks,

Sidharth

jacobmn’s picture

Thanks a lot for that answer. I am glad to hear I am not the only one who is quite bothered by inconsistent html!

mtndan’s picture

While it's a commercial product, we've had more than excellent results with Xstandard. There is a drupal module for easy integration too.

http://xstandard.com

http://drupal.org/project/xstandard

jacobmn’s picture

Yes, I actually neglected to mention Xstandard. I have used it on a few sites with fantastic results. You can paste into it from any software without any garbage code. I totally recommend it as well - as long as you only need a few users to be able to use it considering you have to pay extra for more than 10. The only other issue is that it does require an external browser plugin.

aac’s picture

Thanks for such a detailed writeup. It will be useful for the Drupal community.

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

sevenray’s picture

I'm new to drupal and currently create a website for my company.

Can you tell me how do you create the 5 essential on the front page?

and what module do you use for the left side menu?

Many thanks! Learnt a lot from your case study.

Shash’s picture

Dear sevenray

Thanks for the encouraging comments.

5 essentials was created using a combination of nodequeue,views and jQuery.
There are some drupal modules available to produce the slideshow kind of effect but we had used jQuery to get us the desired behavior.It majorly involved the replacement of one slide with another after a set interval of time.Here a slide would mean one <div> containing the article.
The jQuery code was something like:

slide.hide(); 

here slide=$(first

of the container);
slide.addClass('active').nextAll(slide).removeClass('active');

nextAll() will ensure that the next slide is picked up.

slideshow.append(slide);

slideshow=$(container for the slideshow);

slide.fadeIn('slow');

The slideshow also stops and start on mouseover/mouseout behavior respectively.

$('#slideshow_block_id').mouseover(function() {
	slideshow_player = false;
//slideshow_player is globally declared flag to be set for on/off of slideshow.
});
$('#slideshow_block_id').mouseout(function() {
	slideshow_player = true;
});

The pager can also be linked similarly.
A javascript function setInterval is used to change the slide periodically.

Left side menu on the homepage(stamps menu) is purely CSS.
Left side menu all across the site(accordion menu) otherwise is a custom module using jQuery to get the accordion effect.
Some of the generic jQuery functions put into use are

*slideToggle()
*slideUp()
*hide()/show()

For any further assistance you can PM me too.

Regards

giorgio79’s picture

Hello,

It seems unnecessary to me to have a separate content type for the short version of articles.

Why not use contemplate instead and edit the teaser with it as you want?

sidharth_k’s picture

Hi Giorgio,

Thanks for your interest in our site and your comments.

We have not made the "short version of the article" a separate content type. Rather there are two main kinds of Content Types on our site...

A article content type in which the text occupies a whole page: e.g. http://www.openthemagazine.com/article/living/a-climate-of-chaos

A totally different kind of content type (we call it "shorts") is one that shares its space with lots of other "shorts" e.g. http://www.openthemagazine.com/shorts/smallworld/2009-11-28

Each content type is laid out differently and themed differently. They have different CCK fields attached to it. The article content type is worried about things like photographer, illustrator, tags, related articles, etc. etc. while the "shorts" content type does not have to deal with all this overhead.

So given that the functionality is totally different it made sense to make them different content types.

Thanks,

Sidharth

Fregadetto’s picture

for sharing your work. A great post and a really nice site.

1sp’s picture

Very nicely done web work, truly inspirational. I really feel happy to see that someone is giving top notch Drupal output from this part of world :)

Kudos and best of luck to whole Srijan team for all future endeavors.

Sudhir
http://twitter.com/sudhirporwal

Rafael Cansinos’s picture

Srijan team,

I was studying your case study and your drupal work during two hours and I'm not really sure if I can describe how I feel when I watch this truly great work...

Thank you.

Rafael Cansinos
Fundación Archivo Rafael Cansinos Assens

sabithpocker’s picture

Thanks a lot for the case study, while going through the site i found a small bug in UI with jquery. The " Most Popular this week" and right side topics like that shows up content on hover but hides them if the hover moves to yellow colored <'span'> area (.ie 'popular' in this case,see the site) . Also If i keep on moving my mouse to and fro between 'most'and 'popular'and release my mouse the queued animation goes on for a while. (this can be avoided using stop() in jquery if you are using jquery).
This is a very small bug :) just thought if you like it to be pointed out.
The site is really wonderful good back-end code and good UI.
And one more thing why didn't you use book pages to make magazines?

sidharth_k’s picture

Dear Sabith,

Thanks for your feedback on the Most Popular widget. We are aware of the issue and are working to fix the usability and functionality of the widget. We should have a fix soon.

Thanks,

Sidharth

sidharth_k’s picture

Dear Sabith,

We have improved the usability and functionality of the widget now.

Thanks,

Sidharth

sabithpocker’s picture

That was wonderful response from your side. The bug is fixed and I am happy to see it.But this looks less "smooth" compared to the earlier version of widget. Anyways improve till you feel satisfied. And once more, your site looks relly cool :).

jweowu’s picture

Thank you for that excellent and detailed write-up, Sidharth.

I did notice that your top menus do not function at all without javascript. Obviously the overlay effect cannot happen, but the top-level menu items do not actually link to anywhere. Preferably your mark-up should start out being functional without javascript, and then be modified appropriately to layer the fancier features on top.

Similarly, nothing appears in the '5 essentials' box.

Javascript issues aside, though, the site looks great!

sidharth_k’s picture

Dear jweowu,

You're correct about Javascript being compulsory to look at www.openthemagazine.com

It is correct that, ideally, the site should degrade properly if Javascript is not present. Its becoming increasingly difficult to follow this maxim as site navigation and widgets become richer, though. Its not a trivial task to remove the Javascript requirement and since we've used some third party jQuery plugins -- we'd need to modify their behavior a bit.

This site targets capable clients with Javascript browsers like Firefox, Chrome, IE, Safari. However what you have suggested is a good practice -- we might incrementally remove the Javascript requirement for widgets/navigation across the site in the future.

Thanks for your suggestions.

Thanks,

Sidharth

fallenleaf’s picture

Great site, how to achieve the "most popular this month/most commented this month" dynamic content in right sidebar. And the roller nodequeue in the footer.
Thx.

Shash’s picture

Dear fallenleaf

Accordion widget was made using views and simple jQuery.
Each Accordion panel consists of a view.
The custom module has a function to embed desired views into a custom html format.

		$content .= 'your html';	// preferably some ul li structure
		$view = views_get_view('your_own_view');
		$viewlayout=$view->execute_display();		//function to execute the view.
		$content .= $viewlayout;
		$content .= 'some more html';
	

Rest is jQuery.
For the accordion effect use functions slideUp() and slidDown() on hover of the title fields as followed.

		$("p.menu_head").mouseover(function() {
			$("div.menu_body").slideDown(700).siblings("div.menu_body").slideUp(700); //700 is time in ms
		}
	

Classes may be added/removed as per requirements.

Roller nodequeue uses 'Views Carousel' module which is directly integrable with Views 2.

'Views Carousel' project page on drupal.org

It has customizable themes option,so the theme can be cutomized as per the site needs.

Regards

toitimhcm’s picture

I love this template, not the way content do.

Performance is biggest probs, if your site grow to a million nodes

easy the best

nutrix’s picture

we definitely like the way drupal has been adapted in this scenario. will be looking at how the performance is affected with just about potentially 100,000 visits you could expect soon.

congratulations once again and will PM the suggestions.

Cheers
Nutrix

dariomem’s picture

Hi!

Thanks so much for this case study! I hope you've had a good new year?

I'm pretty new to the drupal world and have a few questions I hope you can help me on/point me in the right direction?

1) How do you 'skin' the site? Namely, the header graphics 'Essentials, Small world etc' as I'm having real difficulties trying to do this with css....Any tutorials you could point me to?

and

2) Could you tell me in very simple terms from start to finish how i'd go about implementing a feature like small world or lounge, namely, how would I be able to collect the node information and format it to be displayed in such a way in the front of the page?

Again, thank you so much for the help! It is very much appreciated!

ronaldofs’s picture

Hi,
I've been working with drupal for some time now and it easy to realize you made an outstanding work with open magazine. The layout, content display and structure, functionality and even simple graphic details... that is some professional work.
And you even spent time on reporting your case study and answering questions with pratical examples!
Great contribute to the community. Have to rethink my own approaches to drupal to aim your finess.
Going to take some time to implement and test some of the stuff you used since I'm a one-man army for my projects...

Congratulations from Portugal

pacrossley’s picture

I really enjoyed reading your "Case Study" - you've done some very compelling work both on the study itself and the site. Congratulations.

However, there is a problem with your menu:

In IE 7 (ya, I know!) the top-right ad (currently displays, "Follow Open at the DLF Indian Premier League") overlays onto the right-most portion of a selected menu thereby obscuring the third column of a selected menu.

For example, clicing the "gallery" menu heading, three column are displayed, the third of which is underneath the advertisment.

Just thought you might like to know.

magdab’s picture

Great site!

Can you tell me how php memory size do you use and how many views?

Thanks

gurpreetwasi’s picture

I want to congratulate you on the absolutely wonderful website. Also on your openness in sharing information through this case study.

Have you also thought about suggesting a ipad, mobile app for this magazine since that is the next level in publishing. Or is that a completely different domain ? Grateful for yr reply...

shareumentarian-dupe’s picture

I love the interactivity of this theme but could there be more social networking and community aspects of the user base

pamael’s picture

Great post and website btw.

Do you know if Solr respects user permission. That is will it return only nodes where the user has access?

1sp’s picture

It is tough to have Apache Solr itself to follow User access on nodes while indexing them. But this limiting of results based on user's access on node(s) can be easily (relatively) implemented on Drupal module's level, when it process the results for the output.

check out the node_access intigration sub-module present in Apache Solr drupal module.