OpenSourcery

The Drupal Views module has powerful theming abilities. CSS classes abound, allowing you to accomplish a great deal with stylesheets alone. If that's not enough for you, custom phptemplate files can be added to your theme. The new Views 2 will even helpfully suggest a list of possible template files (under Basic Settings -> Theme: Information).

Wouldn't it be nice, though, if you could have custom markup independent of the theme? Or perhaps you'd like to apply your custom styles more selectively to just certain views or view displays?
With hook_views_plugins(), you can.

We wanted to create a 2-column display for some of our portfolio pages. The "grid" style is one nice option in views, but if the items vary significantly in height, there will be a lot of extra white space. The grid can also look a little too geometric. Instead, I wrote a little module creating a new style plugin.

First, the module code: This simply tells Views about our new style, and associates views_view_twocol templates with it. The code was adapted from the unformatted style in views/includes/plugins.inc. This code uses the default handler – but you could write your own handler as well. We also bundle a css file with the module, so it will work in any theme – though the stylesheet can of course be overridden.

<?php
 
/**
 * Implementation of hook_init
 */
 
function views_columns_init() {
  drupal_add_css(drupal_get_path('module', 'views_columns') .'/views_columns.css', 'module');
}
 
/**
* implementation of hook_views_api()
*/
function views_columns_views_api() {
  return array(
    'api' => '2',
  );
}

views_columns.views.inc:

<?php
 
 
/**
 * Implementation of hook_views_plugins
 */
function views_columns_views_plugins() {
  return array(
    'style' => array(
      'twocol' => array(
        'title' => t('2 Column'),
        'help' => t('Displays items in 2 columns.'),
        'handler' => 'views_plugin_style_default',
        'theme' => 'views_view_twocol',
        'uses row plugin' => TRUE,
        'uses options' => TRUE,
        'uses grouping' => TRUE,
        'type' => 'normal',
        'parent' => 'default',
      ),
    )
  );
}
 
?>

Now, we need a template file for our new style, which does the real work. This is named views-view-twocol.tpl.php, and also goes in the module's directory.

<?php
/**
 * Default simple view template to display two columns
 */
?>
<?php if (!empty($title)): ?>
  <h3><?php print $title; ?></h3>
<?php endif; ?>
 
<div class="view-multicolumn">
<div class="view-first-half">
<?php
$split = round(count($rows) / 2);
for ($i = 0; $i < $split ; $i++) {
  print $rows[$i];
}
?>
</div>
 
<div class="view-second-half">
<?php
for ($i = $split; $i < count($rows); $i++) {
  print $rows[$i];
}
?>
</div>
</div>

Lastly, views_columns.css:

.view-first-half, .view-second-half {
  width: 46%;
  float: left;
}
 
.view-first-half {
  border-right: 2px solid #808080;
  padding-right: 2%;
}
 
.view-second-half {
  padding-left: 2%;
}

That's it! Here's what our new plugin looks like: