Take Control of your Homepage with Nodequeue, Views and Panels

Diagram showing the onion layers in the Drupal front page

Recently we built this site, you'll notice the homepage is fairly customised with lists of content rather than Drupals default river-of-news (or should that be river-of-nodes?). "How to configure" this type of Drupal front page is a common question in the Drupal forums so I'd thought I let you in on the secret, after all, that's what we're here for eh?

For this tutorial you going to need:

Download those modules and install them in your Drupal test site. FYI Informe21 is a Drupal 5 site but the theory holds true for Drupal 6.

Fig 1. shows us the "onion layers" of the layout we're going to build. You can see how each layer is embedded in the other - blocks in the mini panel panes, mini-panel in the region and finally the region is printed in the template file. This is just to give you a visual representation to help you get your head around the concept. Ok, on with the show!

Informe21.com Frontpage

## A & B Regions and Panels
A and B are custom regions printed in a page-front.tpl.php file that each contain a Mini-panel, which is placed into the custom region using the normal block configuration system in Drupal.

### Out with $content, in with $custom_regions

In the page-front.tpl.php file we first remove the normal $content variable. If we leave that in the default river-of-news will print all content Promoted to Front. You could just never use the Promoted to Front publishing option, however we wanted to use this for something else, so we choose to replace the $content variable with our custom regions.

Note: there are more sophisticated ways of achieving the same result using preprocess functions in Drupal 6 or phptemplate_variables in Drupal 5.

You can learn about creating custom regions for Drupal 5, and using the .info file to configure regions for Drupal 6.

### The Mini Panels
Mini Panel A - this is a "Two column stacked" mini-panel - this contains the Views blocks 1, 2 and 3.
Mini Panel B - this is a "Three column 33/34/33" mini panel - contains 6 custom blocks. The high-lighted "5" area represents 4 highly customised blocks that we will discuss in dept later in the article.

### More about Panels
I found a slew of great information about using Panels over at Drupal.org - this includes help pages and links to video tutorials. All the Panels are Mini-panels in the Informe21 news site and its really easy to configure the content of each Pane. Its all covered in the page link to above.

## Nodequeues, Views and Blocks
1 and 2 are both Nodequeues. We have created two nodequeues and assigned our custom content type (called "Articles") to the Node queues. Configuring and using Nodequeue is quite strait forward so I won't delve into that here.

1. Nodequeue_1 contains just 1 node, the main feature article of the day.
2. Nodequeue_2 contains 4 nodes, the sub-feature articles of the day.

When you create a nodequeue, a View is automatically created for it - and because this is a View, you can customise it to output whatever you want. Cool eh?

So, for each nodequeue we have configured a Block View, with only the fields we want. As you can see this includes the Node Title, an Image, the Teaser text and a Read More link.

I'm not going to go in-depth here as to how we are actually theming each one of these fields as that is not really the focus of this tutorial. Suffice to say, you can control the output of the nodequeue using Views.

3. This is also a View but it works a little different. In fact its much more simple and takes advantage of the "Promote to Front" publishing option. We have created a simple Block View that prints all Articles that are "Promoted to Front". It sort of emulates the normal river-of-news of a default Drupal front page except we are only including the Title field.

4. Is also a View (gosh we love Views don't we?). Again this is a simple Block View and contains a simple list of the latest blog posts. We include only the fields we want (i.e this is not a teaser list). We are outputting this in the Right Sidebar using the standard Drupal block configuration system.

5. These are Views blocks also! Hooray for Views. However, these are wee bit different. In fact these Block Views contain two Views, one embedded within the other. Bet you're wondering how we did that? Well its quite simple actually.

The top half contains the Top View.
The bottom half contains the Bottom View.

Top View - this view has 1 item and filters by Taxonomy Term, Node Type and the "Sticky" publishing option ("Sticky" filter Equals YES).
Bottom View - this view has 3 items and filters by Taxonomy Term, Node Type and the "Sticky" publishing option ("Sticky" filter Equals NO).

Now - lets put them both together. We take the Bottom View and print it in the Footer of the Top View. So, on the Views configuration page for the Top View we use this snippet:

Drupal 5 using Views 1

// the name of the bottom view.
$view_name = 'category_block_economia_list';
$view_args = array();
$view = views_get_view($view_name);
views_build_view('block', $view, $view_args, FALSE, $view->nodes_per_block);

Drupal 6 using Views 2

// the name of the bottom view.
$view = views_get_view('category_block_economia_list');
$view->execute_display('default', $args);

Note: Remember to set the Input filter to PHP.

So that's it really, good luck and happy drupaling!

Last updated 29th July, 2009 - 8:07pm

Authored by Jeff Burnz on