Theming Drupal Views Output

Drupal Views uses “template” files to render a view. There are two basic template files that control view output, the “Style Output” template and the “Row Style” template.

The “Style Output” template loops through the query rows that are returned by Views, and places HTML markup around those rows, as well as printing out the rendered HTML Markup that each Row contains. Each row in turn uses it’s “Row Style” template to create its individual rendered HTML Markup. Below are the default Style and Row-Style templates that views uses when the selected “Views Display” output is of type “Unformatted”. These are very simple to program, and can be quite easily adapted to create a custom output rendering template for a given view.

Style Template file: views-view-unformatted.tpl.php

<?php

/**
* @file
* Default simple view template to display a list of rows.
*
* @ingroup views_templates
*/
?>
<?php if (!empty($title)): ?>
<h3><?php print $title; ?></h3>
<?php endif; ?>
<?php foreach ($rows as $id => $row): ?>
<div <?php if ($classes_array[$id]) { print ‘class=”‘ . $classes_array[$id] .'”‘; } ?>>
<?php print $row; ?>
</div>
<?php endforeach; ?>

Row Style Template file: views-view-fields.tpl.php

<?php

/**
* @file
* Default simple view template to all the fields as a row.
*
* – $view: The view in use.
* – $fields: an array of $field objects. Each one contains:
* – $field->content: The output of the field.
* – $field->raw: The raw data for the field, if it exists. This is NOT output safe.
* – $field->class: The safe class id to use.
* – $field->handler: The Views field handler object controlling this field. Do not use
* var_export to dump this object, as it can’t handle the recursion.
* – $field->inline: Whether or not the field should be inline.
* – $field->inline_html: either div or span based on the above flag.
* – $field->wrapper_prefix: A complete wrapper containing the inline_html to use.
* – $field->wrapper_suffix: The closing tag for the wrapper.
* – $field->separator: an optional separator that may appear before a field.
* – $field->label: The wrap label text to use.
* – $field->label_html: The full HTML of the label to use including
* configured element type.
* – $row: The raw result object from the query, with all data it fetched.
*
* @ingroup views_templates
*/
?>
<?php foreach ($fields as $id => $field): ?>
<?php if (!empty($field->separator)): ?>
<?php print $field->separator; ?>
<?php endif; ?>

<?php print $field->wrapper_prefix; ?>
<?php print $field->label_html; ?>
<?php print $field->content; ?>
<?php print $field->wrapper_suffix; ?>
<?php endforeach; ?>

One way to specify the Style and Row-Style template selection for a view is to simply supply a template page in the views directory with a file name that indicates that it is to be used for a specific view (see Image 1). The default location to store these theme fles is in “modules/views/theme/”, though there may be other places that one can store them. The Views admin screen will actually tell you what file names to use to insure that it is selected for your view, in order of least to most specific file name. Views will use the most specific file name that it find in the theme directories for your view. Another way is to create a “Views Display” output plugin, via a small sub-module. This custom Views Display module then supplies it’s own default Style and Row-Style templates (as well as perhaps other templates).

Image 1: Views Advanced Theme dialog box that lists names of theme files to use to specify formatting output of a given view.

views.advanced.theme.dialog

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s