background image
HomeRecent PostsDrupalSearchTagsRSSContactAboutAccount

Modifying a view and creating custom layouts using the theme wizard
Eric.London's picture
Submitted by Eric.London on 5/1/2008
Tags:
  • 3 comments
  • Share this

Here is a quick and powerful way to override the theme engine to get the Views module to display your content anyway you'd like. First, create a view that provides a page view. Choose "List View" as the view type. Make sure you add all the fields you'd like to include in this view. Add your filters and sort criteria as necessary. Save your view and make sure it's working. Go to the URL you assigned to the page view. You should see a <ul> list of the fields you chose to include.

Next, go to the theme wizard page (admin/build/views/wizard). Choose your view from the list and choose "simple list" as the theme type. Click on the Select Theme Type button. On the next page, you'll see two textareas full of code. Copy and past the top code into you template.php file. As for the bottom code, create a new file in your theme directory called "views-list-YOURVIEWNAME.tpl.php".

If you reload your page view, it should look the same. Now, you can alter those two code segments to get the view to appear the way you'd like. Changing the "views-list-YOURVIEWNAME.tpl.php" file will alter how each node is themed.

For example, you could use this technique to create a different table layout. The default table layout included in the views module will display a node's data in each <tr>, separating each field in a <td>. Locate the following code in you template.php file:

<?php
if ($items) {
  return theme('item_list', $items);
}
?>

You could replace the "item_list theme type with something like this...

<?php
return "<table><tr>" . implode("", $items) . "</tr></table>";
?>

You'll also have to open up the "views-list-YOURVIEWNAME.tpl.php" file and enclose the entire contents in a <td></td>. In this case, you could also add some conditional code to segment the rows into 3 columns, etc.

Custom theming based on a node&#039;s taxonomy
Eric.London's picture
Submitted by Eric.London on 4/28/2008
Tags:

Here is how you can customize your theme (page.tpl.php) based on a node's taxonomy. First, I created a taxonomy vocabulary called "Page Layout" and assigned to terms to it: Wide and Narrow. I set the vocabulary's hierarchy to be disabled and multiple select is disabled. I then placed this code in my page.tpl.php, but can reside in node.tpl.php (or essentially anywhere that has access to the $node global).

<?php
$vocabName = 'Page Layout';

// get vocabularies for this node
$vocabs = taxonomy_get_vocabularies($node->type);

// loop through vocablularies, look for vid that matches vocab name
foreach ($vocabs as $vocab) {
  if ($vocab->name == $vocabName) {
    $vid = $vocab->vid;
    break;
  }
}

// lookup terms for this node, by vocabularyID
$nodeTerms = taxonomy_node_get_terms_by_vocabulary($node->nid, $vid);

// loop through node terms
foreach ($nodeTerms as $nodeTerm) {
  if ($nodeTerm->vid == $vid) {
    $cssClass = $nodeTerm->name;
    break;
  }
}
?>

Then, I can use the $className variable in my layout and theming. For instance...

<?php
print "<div class='$cssClass' />";
?>

...or like this...

<?php
switch ($cssClass) {
  case 'Wide':
    // ...code...
    break;
  case 'Narrow':
    // ...code...
    break;
}
?>

Syndicate content