I have 1 view, embedded into one of my pages, which shows various fields from multiple content types. What I want is to have a separate tab for each content type (it'll just display all the records matching content type A within the tab titled "content type A"). How would I do this?

I was thinking I would use this structure for the tabs (I already got all the back-end css and js code to work... the only problem is dynamically sticking my views info into this structure):

<ul class="tabs">
    <li><a href="#tab1">Gallery</a></li>
    <li><a href="#tab2">Submit</a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
        <!--Content-->
    </div>
    <div id="tab2" class="tab_content">
       <!--Content-->
    </div>
</div>

I'm using the "unformatted" style for my view, so I'm guessing I'll have to modify something within my custom views-view-unformatted.tpl.php file. Just for reference, here's the default code for that file: 

<?php if (!empty($title)): ?>
  <h3><?php print $title; ?></h3>
<?php endif; ?>
<?php foreach ($rows as $id => $row): ?>
  <div class="<?php print $classes[$id]; ?>">
    <?php print $row; ?>
  </div>
<?php endforeach; ?>

Comments

Chris Einkauf’s picture

Chris Einkauf commented

The best I could come up with so far (it doesn't work - it's only to show what line of thinking I'm using and to maybe give someone a starting point so they can tell me what I'm doing wrong rather than having to start from scratch) is:

Note: this code would go in my custom views-view-unformatted.tpl.php file

<?php 
  $tabtitles .= '';
  $tabcontents .= '';
  if (!empty($title)):
    $tabtitles[]=$title;
  endif; 
?>

<?php 
  foreach ($rows as $id => $row): 
    $tabcontents[] = '<div class="' . $classes[$id] . '">' . $row . '</div>';
   endforeach; 
?>

<ul class="tabs">
<?php 
  foreach ($tabtitles as $tabtitle): 
    print '<li><a href="#' . $tabtitle . '">' . $tabtitle . '</a></li>';
  endforeach; 
?>
</ul>


<div class="tab_container">
<?php 
  foreach ($tabcontents as $tabcontent): 
    print '<div id="' . $tabcontent . '" class="tab_content">' . $tabcontent . '</div>';
  endforeach; 
?>
</div>
Chris Einkauf’s picture

Chris Einkauf commented

To add to this, there's a new Views Display Tabs module that looks to be promising down the road, but I'd hate the extra overhead and complexity of adding another module if there's an easy coding solution that I'm overlooking.

Has anyone attempted this sort of thing in the past? I'm thinking there should be some way to do it using a method somewhat similar to the code I posted above. Perhaps it would involve more than just the custom views-view-unformatted.tpl.php file; maybe it would also involve some views-view.tpl.php (up-one-level) and/or views-view-fields.tpl.php (down-one-level) code.

Until I can find a way to do this all through coding, I'm going to look further into Views Display Tabs and/or turning my displays into page displays and trying the whole thing from scratch. If anyone's tackled this before though, I'd love to hear how you did it.

dawehner’s picture

dawehner
Primary language German
commented

i think its better to use such a syntax

<?php


  $form = array();

  $form['example1'] = array(
    '#type' => 'tabset',
  );
  $form['example1']['tab1'] = array(
    '#type' => 'tabpage',
    '#title' => t('One'),
    '#content' => t('First tab content.'),
  );
  $form['example1']['tab2'] = array(
    '#type' => 'tabpage',
    '#title' => t('Two'),
    '#content' => t('Second tab content.'),
  );
  $form['example1']['tab3'] = array(
    '#type' => 'tabpage',
    '#title' => t('Three'),
    '#content' => t('Third tab content.'),
  );

  return tabs_render($form);
?>

Because you don't have to think about the html :)

Chris Einkauf’s picture

Chris Einkauf commented

Thanks for the input, dereine.

I tried a few different methods, but ended up going with the kind of html structure that I originally mentioned. In case anyone is interested, I documented the methods that worked for me here.

esmerel’s picture

esmerel commented
Assigned: Unassigned » esmerel

This should be evaluated to go into documentation. assigning to myself.

eclipsegc’s picture

eclipsegc commented
Status: Active » Closed (fixed)

Typically, this would be accomplished through quicktabs+1 view w/ multiple displays (changing the content type filter per display) OR with a little manual ajax magic + an argumented view. Hacking the theme layer to accomplish this same task is not advisable.