Skip to Navigation

Themeing Drupal Teaser Views

Using Drupal's Views module, You have created a View that aggregates the Teasers for some collection of nodes, that is the type of view is set to Teasers. You want to them the teasers, but there are two stumbling blocks. Currently (8/7/08), the theme wizard for views only generates the code to theme views of type List. Also, in Drupal 5, Teaser and Full Node views do not pass on to your theming function the values of the fields that you have defined in your view. The latter, I would consider a bug. You can still theme your view using the Themes API, but it requires the following setup.

First, define your theme override function according to the following convention (See also Theming your Views):

function theme_views_view_TYPE_VIEWNAME($view, $nodes, $type);
This is called after all of the header and before any footer information are displayed. This is likely to be the most commonly used theme function simply due to its relative simplicity. All this function has to do is loop over the $nodes array and display the data based upon the type of the view. By default, the TYPE may be one of:
  • list
  • table
  • teasers
  • nodes
but plugins could offer other types that may also be themed.

If you have a teasers view named 'latest_success_stories', your theme function would have the following signature:

1:<?php
2:
function theme_views_view_teasers_latest_success_stories($view, $nodes, $type)

Second, in your theming function, you'll have to iterate and load each node to get the fields you want to display and return the html to display.

1:<?php
2:function theme_views_view_teasers_latest_success_stories($view, $nodes, $type)
{
4: // Set up some variables that won't change.
5: $base_vars = array(
6: 'view' => $view,
7: 'view_type' => $type,
8: );
9:
10: // OAM - GRRR, have to load the whole node here? http://drupalworx.com/node/14
11: foreach ($nodes as $i => $node_info) {
12: $vars = $base_vars;
13: $node = node_load($node_info->nid);
14: $vars['node'] = $node;
15: $vars['count'] = $i;
16: $vars['stripe'] = $i % 2 ? 'even' : 'odd';
17:

18: // make the fields we want available as variables in our template file
19: $vars['title'] = $node->title;
20: $vars['link'] = l($node->title, 'node/' . $node->nid);
21: $vars['learn_more'] = l(t('Learn more'), 'node/' . $node->nid);
22: if ($node
->field_thumbnail) 23: {
24: // we only want the first field
25: $vars['thumbnail'] = array_pop($node->field_thumbnail);
26: }
27: $vars['teaser'] = $node->teaser;
28: $items[] = _phptemplate_callback('latest_success_stories_teasers_item', $vars);
29: }
30:
31: if ($items) {
32: return join('', $items);
33: }
34:}

Additional Notes

If you are working via a sub-theme of another theme, the paths to your template files have to include the directory of your subtheme. For example, if you're using the zen theme as your base theme and have subtheme named 'spiffy', the phptemplate callback would look like

   1:<?php     2:$items[] = _phptemplate_callback('spiffy/latest_success_stories_teasers_item', $vars); 

If you are theming multiple teaser views where nodes have some set of fields in common that you want to use in your theme, you can create a generic function to do the real heavy lifting and call it from your theme override functions.

1:<?php     2:/**     3: * Themes a set of node teasers using the given template     4: * @param string     5: * @param array     6: * @param string     7: * @param string     8: * @return string HTML output     9: */    10:function generic_views_teasers_theme($view, $nodes, $type, $template)    11:{    12:  // Set up some variables that won't change.    13:  $base_vars = array(    14:    'view' => $view,    15:    'view_type' => $type,    16:  );    17:    18:  // OAM - GRRR, have to load the whole node here? http://drupalworx.com/node/14   19:  foreach ($nodes as $i => $node_info) {   20:    $vars = $base_vars;   21:    $node = node_load($node_info->nid);   22:    $vars['node'] = $node;   23:    $vars['count'] = $i;   24:    $vars['stripe'] = $i % 2 ? 'even' : 'odd';   25:    $vars['title'] = $node->title;   26:    $vars['link'] = l($node->title, 'node/' . $node->nid);   27:    $vars['learn_more'] = l(t('Learn more'), 'node/' . $node->nid);   28:    if ($node->field_thumbnail)   29:    {   30:        $vars['thumbnail'] = array_pop($node->field_thumbnail);   31:    }   32:    $vars['teaser'] = $node->teaser;   33:    $items[] = _phptemplate_callback($template, $vars);   34:  }   35:   36:  if ($items) {   37:    return join('', $items);   38:  }   39:}   40:   41:/**   42: * Themes the teasers view In the News.   43: */   44:function theme_views_view_teasers_in_the_news_latest($view, $nodes, $type) {   45:    return generic_views_teasers_theme($view, $nodes, $type, 'spiffy/views-teasers-thumbnail-right');   46:}   47:   48:/**   49: * Themes the teasers view for the Success Story homepage block.   50: */   51:function theme_views_view_teasers_success_story_homepage_block($view, $nodes, $type) {   52:    return generic_views_teasers_theme($view, $nodes, $type, 'spiffy/views-teasers-thumbnail-left');   53:}