.on web development, Drupal, PHP, photography, and the like.

Create Tabbed Content using Views & JsTools. v2

Posted by root
08.19th.2008

Filed under:

Drupal must have: JsTools: http://drupal.org/project/jstools [Enable 'Tabs' in the Modules' page]
Views: http://drupal.org/project/views
Views Tabs: http://drupal.org/project/views_tabs
  1. Create new content type.
  2. Create new Category with Terms (the terms will be the tabs), associate it to the new content type.
  3. Create node-[ContentTypeName].tpl.php (displayed in the tab body). Otherwise, the content will display just like regular content (including dimensions and theme.)

Create your new content: add a title, select term, give it a body, and publish it. Create content for each taxonomy term.

Next, create a view for each tab, filtered by taxonomy term. In views: Give it a drupal name, I'll use tabexample_bc (tabexample_ab & tabexample_on). Create 'Block', use filter content by Taxonomy Term.

The code below is used to create the tabs. Insert it into a block body or content body, don't forget the php tags!

Two variables to edit.

  • $module: Using Views
  • $delta: Drupal View Name
<?php
	/* ------------------------Apple Tab---------------------------------- */
	$module = 'views';
	$delta = 'tabexample_bc';
	$block = (object) module_invoke($module, 'block', 'view', $delta);
	$block->module = $module;
	$block->delta = $delta;
	$tab_A = theme('block', $block);
	/* -----------------------Banana Tab----------------------------------- */
	$module = 'views';
	$delta = 'tabexample_ab';
	$block = (object) module_invoke($module, 'block', 'view', $delta);
	$block->module = $module;
	$block->delta = $delta;
	$tab_B = theme('block', $block);
	/* -----------------------Cherry Tab----------------------------------- */
	$module = 'views';
	$delta = 'tabexample_on';
	$block = (object) module_invoke($module, 'block', 'view', $delta);
	$block->module = $module;
	$block->delta = $delta;
	$tab_C = theme('block', $block);
	/* ---------------------Create Tabs------------------------------------- */
	$form = array();
	$form['hpTabs'] = array(
	'#type' => 'tabset',
	);
	$form['hpTabs']['tab1'] = array(
	'#type' => 'tabpage',
	'#title' => t('British Columbia'),
	'#content' => $tab_A,
	);
	$form['hpTabs']['tab2'] = array(
	'#type' => 'tabpage',
	'#title' => t('Alberta'),
	'#content' => $tab_B,
	);
	$form['hpTabs']['tab3'] = array(
	'#type' => 'tabpage',
	'#title' => t('Ontario'),
	'#content' => $tab_C,
	);
	return tabs_render($form);
?>

References: Drupal API: module_invoke | Drupal tabs.module README.txt

Below is a carbon copy of the PHP snippit above. I created a new content type named 'tabs'. node-tabs.tpl.php

<div class="node<?php if (!$status) { print " node-unpublished"; } ?>">
    <div class="content"><?php print $content ?></div>
</div>

Without going into CCK, List/table views or custom output, I choose the path of least resistance: create a new content type, bare bones. Without further adieu, the tabbed content...

Tabbed Content by Taxonomy Term

British Columbia

San Joseph Bay, Vancouver Island

Alberta

Mount Robson Park

Mount Robson, Alberta

Ontario

Niagara Falls

Tabbed Content by Module

Below are tabbed content using the aggregator, menu and views module. The $module and $delta for each are:

Aggregator module - $modules = 'aggregator' and $delta = 'feed-1'

For every rss feed that is added, feed-XX increments by one. In this case, the delta for the first feed is feed-1 

Menu module - $modules = 'menu' and $delta = 2

This displays the primary menu. If delta = 1, it would display the 'navigation' menu. 

Views module - $modules = 'views' and $delta = 'tabexample_bc'

Regular block generated by a view that was made. The delta, or view name is 'p1'.