How to theme views
Last modified: October 21, 2007 - 23:54
Setup
- Download views module.
- Enabled views, views ui, and views theming wizard
- 'Add' the front page view
- Change the view type to list view
- You add the node id field, so we can load the node in the template file.
Let's get theming
- If we visit oursite.com/?q=frontpage, we see a list of node ids. But we can do better. A lot better.
- Go to example.com/?q=admin/build/views/wizard, and select frontpage as the view.
- Make the theme type simple list
- Click select theme type
- Paste all the code in the correct files
- Visit example.com/?q=frontpage. tada! Ugly! Yay!
If we look at our function in template.php, we see
<?php
function phptemplate_views_view_list_frontpage($view, $nodes, $type) {
$fields = _views_get_fields();
$taken = array();
// Set up the fields in nicely named chunks.
foreach ($view->field as $id => $field) {
$field_name = $field['field'];
if (isset($taken[$field_name])) {
$field_name = $field['queryname'];
}
$taken[$field_name] = true;
$field_names[$id] = $field_name;
}
// Set up some variables that won't change.
$base_vars = array(
'view' => $view,
'view_type' => $type,
);
foreach ($nodes as $i => $node) {
$vars = $base_vars;
$vars['node'] = $node;
$vars['count'] = $i;
$vars['stripe'] = $i % 2 ? 'even' : 'odd';
foreach ($view->field as $id => $field) {
$name = $field_names[$id];
$vars[$name] = views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $node, $view);
if (isset($field['label'])) {
$vars[$name . '_label'] = $field['label'];
}
}
$items[] = _phptemplate_callback('views-list-frontpage', $vars);
}
if ($items) {
return theme('item_list', $items);
}
}
?>We want something simpler.
How about stripping all the complex code, so we end up like this.
<?php
function phptemplate_views_view_list_frontpage($view, $nodes, $type) {
foreach ($nodes as $i => $node) {
$items[] = _phptemplate_callback('views-list-frontpage', array('node' => $node));
}
if ($items) {
return theme('item_list', $items);
}
}
?>This should give us the whole node in the view, in a $node object, although now we don't have a $nid variable.
So, we can edit the views-list-frontpage.tpl.php to this.
<?php
/**
* views template to output one 'row' of a view.
* This code was generated by the views theming wizard
* Date: ---, --/--/----, --:-- --
* View: frontpage
*
* Variables available:
* $view -- the entire view object. Important parts of this object are
* frontpage, .
* $view_type -- The type of the view. Probably 'page' or 'block' but could
* also be 'embed' or other string passed in from a custom view creator.
* $node -- the raw data. This is not a real node object, but will contain
* the nid as well as other support fields that might be necessary.
* $count -- the current row in the view (not TOTAL but for this page) starting
* from 0.
* $stripe -- 'odd' or 'even', alternating. * $nid -- Display the NID of a node.
* $nid_label -- The assigned label for $nid
*
* This function goes in your views-list-frontpage.tpl.php file
*/
//now we add the stylesheet...
drupal_add_css(path_to_theme() .'/views-list-frontpage.css');
?>
<div class="view-label view-field-nid">
<?php print $nid_label ?>
</div>
<div class="view-field view-data-nid">
<?php print $node->nid ?>
</div>This gives us the same thing, with less code.
We can also do something like the following:
<?php
/**
* views template to output one 'row' of a view.
* This code was generated by the views theming wizard
* Date: ---, --/--/----, --:-- --
* View: frontpage
*
* Variables available:
* $view -- the entire view object. Important parts of this object are
* frontpage, .
* $view_type -- The type of the view. Probably 'page' or 'block' but could
* also be 'embed' or other string passed in from a custom view creator.
* $node -- the raw data. This is not a real node object, but will contain
* the nid as well as other support fields that might be necessary.
* $count -- the current row in the view (not TOTAL but for this page) starting
* from 0.
* $stripe -- 'odd' or 'even', alternating. * $nid -- Display the NID of a node.
* $nid_label -- The assigned label for $nid
*
* This function goes in your views-list-frontpage.tpl.php file
*/
$node = node_load($node->nid);
//now we add the stylesheet...
drupal_add_css(path_to_theme() .'/views-list-frontpage.css');
?>
<div class="view-field view-data-nid">
<?php print $node->nid ?>
</div>With this, we can transform it into a table, with very little code, and so it displays the title, author, ect.
This is our code for template.php
<?php
function phptemplate_views_view_list_frontpage($view, $nodes, $type) {
$output = "<table>";
foreach ($nodes as $i => $node) {
$output .= _phptemplate_callback('views-list-frontpage', array('node' => $node));
}
$output .= "</table>";
return $output;
}
?>And views-list-frontpage.tpl.php:
<?php
/**
* views template to output one 'row' of a view.
* This code was generated by the views theming wizard
* Date: ---, --/--/----, --:-- --
* View: frontpage
*
* Variables available:
* $view -- the entire view object. Important parts of this object are
* frontpage, .
* $view_type -- The type of the view. Probably 'page' or 'block' but could
* also be 'embed' or other string passed in from a custom view creator.
* $node -- the raw data. This is not a real node object, but will contain
* the nid as well as other support fields that might be necessary.
* $count -- the current row in the view (not TOTAL but for this page) starting
* from 0.
* $stripe -- 'odd' or 'even', alternating. * $nid -- Display the NID of a node.
* $nid_label -- The assigned label for $nid
*
* This function goes in your views-list-frontpage.tpl.php file
*/
$node = node_load($node->nid);
//now we add the stylesheet...
drupal_add_css(path_to_theme() .'/views-list-frontpage.css');
?>
<tr>
<td>
<?php print $node->nid ?>
</td>
</tr>Or, even better, we could use theme_table, and not include any external files.
template.php:
<?php
function phptemplate_views_view_list_frontpage($view, $nodes, $type) {
$table = array();
foreach ($nodes as $i => $node) {
$node = node_load($node->nid);
$table[] = array($node->nid);
}
return theme_table(array('Node id'), $table);
}
?>Beautiful. We can go on to do things like
<?php
function phptemplate_views_view_list_frontpage($view, $nodes, $type) {
$table = array();
foreach ($nodes as $i => $node) {
$node = node_load($node->nid);
$user = user_load(array('uid' => $node->uid));
$table[] = array(l($user->name, 'user/'. $user->uid), l($node->title, 'node/'. $node->nid), $node->teaser);
}
return theme_table(array('Author', 'Title', 'Teaser'), $table);
}
?>We can also do stuff with cck.
For debugging, use
<?php
function phptemplate_views_view_list_frontpage($view, $nodes, $type) {
$output = "";
foreach ($nodes as $i => $node) {
$node = node_load($node->nid);
$output .= "Node ". $node->nid ."<br /><pre>". print_r($node, 1) ."</pre><br />";
}
return $output;
}
?>This will show the whole node object, including any cck fields.
Go wild!
If you wish to use Drupal's
If you wish to use Drupal's theme_table, the function signature should be like:
<?phpfunction phptemplate_views_view_table_frontpage($view, $nodes, $type) {
// your code
}
?>