contemplate with custom tabs

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
Macronomicus's picture

I have been trying to work something out for the past few days thats really starting to kill me! It should be so simple, but im stuck. I have a functioning body template (cck + contemplate) for one of my content types, which works great. I have coded in a set of tabs which show a field or group as a tab, this works great; however for one of my tabs I require a more css stylized layout with a multiplicity of fields. I've been banging my head trying to figure the best way to accomplish this.

Currently, I have a function in my template.php file which outputs my html markup with several field hooks contained in it. I know my function is working 'sort-of' because a text string and the divs are showing up in my rendered tab(verified with firebug). The problem is that the field hooks are not rendered. Is there some reason that the hooks wont render when being passed from a variable; or is it just my syntax? (see below)

Is there a better way to handle this than using an external function? I thought maybe a block would be nice or a page ... however the page produces the same error, none of the field hooks are rendered. I haven't figured out how to add a region as a tab to get the block to work, even so I imagine I will get the same error.

I was thinking there must be something about the tabs thats killing my hooks, and this may be an issue related to the jQuery tabs which come with jstools module and the way in which tabs are called to the page using the forms api (see code below). I have created an issue with the jstools module folks but no responses have come. It would make sense that this is probably the main source of my woes, or even more likely, my syntax or method of approaching this is wrong.

Has anyone else attempted to accomplish something similar? Or... can anyone give me a point in the right direction?

Below is my tabs code; Which I place in my body template for this content type I trimmed everything out but the tabs stuff, as the rest works great, which is html with various field hooks and external css.

////trimed
<div id="prop_tabs">
<?php
            $tab_A
= pointsGrid();
         
           
$form = array();
             
$form['example1'] = array(
               
'#type' => 'tabset',
              );
             
$form['example1']['tab1'] = array(
               
'#type' => 'tabpage',
               
'#title' => t('Overview'),
               
'#content' => $node->field_prop_overview[0]['view'],
               
'#weight' => '-8',
              );
             
$form['example1']['tab2'] = array(
               
'#type' => 'tabpage',
               
'#title' => t('Onsite Amenities'),
               
'#content' => $node->field_onsite_amenities[0]['view'],
               
'#weight' => '-7',
              );
             
$form['example1']['tab4'] = array(
               
'#type' => 'tabpage',
               
'#title' => t('Points Grid'),
               
'#content' => $tab_A,
               
'#weight' => '-5',
              );
             
$form['example1']['tab5'] = array(
               
'#type' => 'tabpage',
               
'#title' => t('More Details'),
               
'#content' => $node->content['group_more_information']['#children'],
               
'#weight' => '-4',
              );
              return
tabs_render($form);
             
?>

</div>
////trimed

Below is the function which I added to my template.php in order to produce the desired markup with various hooks within it. This is just a small example as my real need for this is about 25 fields nested in a table & various divs all with external css styling.
function pointsGrid() {
       $output .= t('I am here');
       $output .= ' <div id="mydiv2">'. $node->field_city[0]['view'] ."</div>\n";
       $output .= ' <div id="mydiv3">'. $node->field_state_region[0]['view'] ."</div>\n";
       $output .= ' <div id="mydiv4">'. $node->field_country[0]['view'] ."</div>\n";
       return $output;
}

Comments

This is a little above my "pay grade"...

Alex UA's picture

or at least I think it is, but one thing I'm wondering, when looking at your function, is where is it getting/loading the node data? I'm also curious why you need to have this stuff in a template.php function at all. I'm not seeing anything within your small snippet that couldn't/shouldn't be placed within contemplate or your node template file.

For example, I have a site which has a tabbed output (via jstools) using contemplate. Here's a snippet:

<div id="tabs-1" class="drupal-tabs">
     <ul class="anchors">
         <li><a href="#tabs-1-1">About <?php print check_plain($node->title) ?></a></li>
                 <li><a href="#tabs-1-2">Bio</a></li>
              /...etc.../
           </ul> 
<div id="tabs-1-1" class="fragment">
<h2 class="drupal-tabs-title" >About <?php print check_plain($node->title) ?></h2>
            <?php foreach ((array)$node->field_some_image as $item) { ?>
            <div class="field-item"><?php print $item['view'] ?></div>
            <?php } ?>
             <?php print $node->content['body']['#value'] ?>
          </div>
  <div id="tabs-example1-2" class="fragment">
  <h2 class="drupal-tabs-title" >Bio</h2>
              <?php print $node->content['field_bio_text']['#value'] ?>
           </div>

You can add as many tabs as you want this way, and all the node content is available to you without an additional function.

Alex Urevick-Ackelsberg
ZivTech: Illuminating Technology

Thanks for that tabs script!

Macronomicus's picture

I have been digging for days trying to find the best approach for implementing the tabs. I know its sad, lol, the external function was just another attempt at getting the content in, based on the $form script and the issues I was experiencing with it. The $form script for tabs came from the docs and the sample tabs supplied with the jstools tabs module.

I didn't see anything in the jstools module docs or issues or drupal forums as clean and simple as yours; pretty much everything revolved around the $form method. I'm going to post your code snip over there so no one else gets hung up on this silliness... or am I the only one?... lol

Thanks again for your help!

It's now part of jstools...

Alex UA's picture

Thanks, and I agree that the jstools docs could be a bit better, but I got this snippet right out of the new tabs example module, which is part of jstools!

Glad I could help!

Alex Urevick-Ackelsberg
ZivTech: Illuminating Technology

Thats strange..

Macronomicus's picture

What I posted up top is the script which is in the example module that I found in the jstools module area... I guess somehow I downloaded the wrong one! Doh!
Or is that from the official jQuery stuff?

I think this is from the

buffos's picture

I think this is from the jquery examples.
But how does that render to a tab? is this because of the class?

how about

najibx's picture

I group my cck fields with module "CCK Fieldgroup Tabs". So I created a tab for each group.
However, I want to style content of each tab - how the cck field are being displayed.

In Contemplate's Body section - it provides all the values, yes. When I check "Affect body output", now the body will take new body format with ugly listing of CCK label/fields. Now, my objective is to copy/redo, how the tabs were being generated without contemplate taken into effect.

using Firebugs, and looking at the ealier tabs output, I notice the whole multi-tabs are created inside

<

div id="tabs-tabset" class="drupal-tabs tabs-processed tabs" style="display: block;">

... then my search ... try and error begins.

Any easier way ? Gots several groups with so many CCK fields here ...

-najibx -
<a href="http://www.successideaweb.com>Drupal web developer | designer in Malaysia

-najibx -
<a href="http://www.successideaweb.com>Drupal web developer | designer in Malaysia

Use quicktabs the easiest