By thepaul on

I'm using a table view to create a "recent articles" block on my homepage. I want to include the article title and the article teaser right below it.

[example]

Article Title
Article snippet will be displayed here

Unfortunately when I include both the title and the body/snippet fields they are placed in their own columns so it looks like this:

Artice Title | Article snippet will be displayed here

How can I include the two fields in a single column? Even if they were in the same cell seperated by a
I would be happy.

⋅ Categories: Drupal 5.x

Comments

markDrupal’s picture

markDrupal commented

Did you try using list view? It will put all the content in one column and each node gets a bullet. you can set table view and list view in the Administer->site building-> views
This requires the "Views" module, so make sure you have that enabled.

thepaul’s picture

thepaul commented

Hi thanks for the reply. I am using the views module, but not using a listview because I want to use zebra striping for "even"/"odd" items in the view. I basically just want to use tableview, but display the fields in rows rather than columns (vertically rather than horizontally).

thepaul’s picture

thepaul commented

and hoping that someone with an answer might see this.

thepaul’s picture

thepaul commented

Well if no one knows how to display mutpile fields in a single table column or cell ... can anyone tell me if it is possilbe to do zebra stripes with list view?

markDrupal’s picture

markDrupal commented

I cant say I have ever done this myself, but a module included in the "Views" module is "Views Theme Wizard" It generates code that is a starting point for more customization over your view. I believe you could use this to put more than one item in a table or to apply stripes to the list view. Check the directions here http://drupal.org/node/42597

As well, something i have done to get strips in my list view was customize my "sites/all/themes/[My theme]/style.css" file "themes/[My theme]/style.css". In the following example I made the event start time, Date modified, and Time until event test areas a dark blue with a lighter text. This gave the appearance of zebra stripes in my list view. You are going to have to know how to get the class of the property you want to stripe. I use the developers toolbar for firefox ( https://addons.mozilla.org/en-US/firefox/addon/60 )and use the "information->display Element Information" tool. here is the code i added to my style.css file to get the zebra striped effect.

.sidebar .view-data-event-event-start,
.sidebar .view-data-node-changed,
.block-og_calendar .event-timeleft{
 background: #336699;
 color: #efecca;
}
markDrupal’s picture

markDrupal commented

I managed to do this by puting a function in my template.php file. just replace "announcements_all" in the function name with the name of your table view.

I originally had a 4 column table(Group name, Taxonomy term for announcement type, node type, node title), but I changed it to a 2 column table with 3 data items in the first column and 1 data item in the second column. (Group name+Taxonomy term for announcement type+node type, node title)

you can see what it looks like by going to
http://shigajet.org

and look for the announcements block

function phptemplate_views_view_table_announcements_all($view, $nodes, $type) {
  $fields = _views_get_fields();

  foreach ($nodes as $node) {
    $row = array();
    foreach ($view->field as $field) {
      if ($fields[$field['id']]['visible'] !== FALSE) {
        $cell['data'] = views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $node, $view);
        $cell['class'] = "view-field ". views_css_safe('view-field-'. $field['queryname']);
        $row[] = $cell;
      }
    } 
    //check the official or general announcement status
    //if add class to the row
    if ($row[1]['data']=='Official Announcement'){
      $row[1]['class'] .= ' '. 'official-row';
    } elseif ($row[1]['data']=='General Announcement'){
      $row[1]['class'] .= ' '. 'general-row';
    }
    //if data in the first column
    if (isset($row[0]['data'])){
      //check the node type, and hide the node type if it is forum topic
      if ($row[2]['data'] != 'Forum topic'){
        $row[1]['data'] = $row[0]['data'] . '<br />'. $row[1]['data'] . '<br />'. $row[2]['data'];
      } else {
        $row[1]['data'] = $row[0]['data'] . '<br />'. $row[1]['data'];
      }
    } else {
      if ($row[2]['data'] != 'Forum topic'){
        $row[1]['data'] = $row[1]['data'] . '<br />'. $row[2]['data'];
      }
    }
    //unset the column "group name and node type.
    unset($row[0]);
    unset($row[2]);
    //save the row with 2 columns, in column 1 we have , group name, taxonomy term, node type.  in column 2 we have title of post
    $rows[] = $row;
  }
  unset($view->table_header[0]);
  unset($view->table_header[2]);
  return theme('table', $view->table_header, $rows);
}
ipwa’s picture

ipwa commented

markDrupal,

Wow thanks for sharing this, your site is looking very nice with the zebra stripes in links list and tables. I have one question, I want to make a function to add a class called alt or odd, to all tables in nodes. I am theming a charity site, and I've tried using the JavaScript from (http://www.alistapart.com/articles/zebratables/) & (http://veerle.duoh.com/blog/comments/a_css_styled_table/#c_2986), placing a link to it manually on my page template. I can see the script is there using FireBug, but it doesn't add the class to my tr's, can anyone help me please.

Nicolas
-------------------------
http://nic.ipwa.net

Nicolas
-------------------------

ipwa’s picture

ipwa commented

The a list apart method was not working because I didn't add the onclick to the body. I found a better script that worked beautifully: http://validweb.nl/artikelen/javascript/better-zebra-tables/

Nicolas
-------------------------
http://nic.ipwa.net

Nicolas
-------------------------

fehin’s picture

fehin commented

Thanks you. This worked for me. The classes didn't work for me though. I wish it did 'cause I want to theme some of the fields.

I had 5 columns and wanted to combine the last three columns to the second column and leave the first column intact. The result is two columns.

/* Coverts 5-column table to 2 columns by combining the last three columns to the 2nd column*/
function phptemplate_views_view_table_all_new_products_block($view, $nodes, $type) {
   $fields = _views_get_fields();

  foreach ($nodes as $node) {
    $row = array();
    foreach ($view->field as $field) {
      if ($fields[$field['id']]['visible'] !== FALSE) {
        $cell['data'] = views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $node, $view);
        $cell['class'] = "view-field ". views_css_safe('view-field-'. $field['queryname']);
        $row[] = $cell;
      }
    } 
    //check the fields that I want to add class to status
    //if available, add class to the row
    if ($row[1]['data']=='Title'){
      $row[1]['class'] .= ' '. 'title-row';
    } elseif ($row[1]['data']=='List price'){
      $row[1]['class'] .= ' '. 'list_price-row';
    }  elseif ($row[1]['data']=='Sell price'){
      $row[1]['class'] .= ' '. 'sell_price-row';
    }elseif ($row[1]['data']=='Author Name'){
      $row[1]['class'] .= ' '. 'author-row';
    }
    //if data in the first column
    if (isset($row[0]['data'])){
	   //add the other three columns to 2nd column
      //check check to see if List price is higher than Sell price; if yeas print all the fields else leave List price out
      if ($row[2]['data'] > $row[3]['data']){
        $row[1]['data'] = $row[1]['data'] . '<br />'. $row[2]['data'] .'  '. $row[3]['data'] . '<br />'. $row[4]['data'];
      } else {
        $row[1]['data'] = $row[1]['data'] . '<br />'. $row[3]['data'] . '<br />'. $row[4]['data'];
      }
    } else {
	//If List price=$0.00, don't print
      if ($row[2]['data'] == '0.00'){
        $row[1]['data'] = $row[1]['data'] . '<br />'. $row[3]['data'] . '<br />'. $row[4]['data'];
      }
    }
    //unset the column "List price, Sell price, and Author Name"
    unset($row[2]);
    unset($row[3]);
    unset($row[4]);
    //save the row with 4 columns in column 2, we have "Title, List price, Sell price, and Author Name".  In column1 we have image.
    $rows[] = $row;
  }
  unset($view->table_header[2]);
  unset($view->table_header[3]);
  unset($view->table_header[4]);
  return theme('table', $view->table_header, $rows);
}
jberg1’s picture

jberg1 commented

After researching this option.
I also found (In Drupal 6x) that you can set your fields to appear in the same column in the view Style:Table settings. Just choose the same column as the primary field is being displayed in. Ex. field "Title" is displayed in Node:Title column, then add field "Image" to display in Node:Title column also.

Still a Noobie here..