I needed to layout a collection of images in a grid, rather than using 'float: left' on list items which makes items with varying heights. I added a new layout handler:

<code>
function theme_views_view_grid($view, $nodes, $type) {
    $fields = _views_get_fields();
    $content = '<table id="view-grid">';
    $count = 0;
    foreach ($nodes as $node) {
        $item = '';
        if ($count == 0){ $content .= '<tr>'; }

        foreach ($view->field as $field) {
            if ($fields[$field['id']]['visible'] !== FALSE) {
                if ($field['label']) {
                    $item .= "<div class='view-label view-label-$field[queryname]'>" . $field['label'] . "</div>";
                }
                $item .= "<div class='view-field view-data-$field[queryname]'>" . views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $node, $view) . "</div>";
            }
        }
        $content .= "<td class='view-grid-item'><div class='view-item view-item-$view->name'>$item</div></td>\n"; // l($node->title, "node/$node->nid");

        $count++;
        if ($count == 4){
            $content .= '</tr>';
            $count = 0;
        }
    }
    $content .= '</table>';
    
    if ($content) {
        return $content;
    }
}


and an option in the menu:

<code>
'grid' => array(
  'name' => t('Grid View'),
  'theme' => 'views_view_grid',
  'validate' => 'views_ui_plugin_validate_list',
  'needs_fields' => true,
),


and a bit of CSS to make all the table cells the same width.

At the moment the number of columns is hard-coded (4) - perhaps there could be a way to make that an option in the UI?

CommentFileSizeAuthor
#2 views-4-7-grid.patch1.67 KBhickory

Comments

potential’s picture

potential commented

I don't know how to apply this code to test it, but its definitely needed, particularly for photo galleries. Thanks for writing it. Please let me know how it is used.

hickory’s picture

hickory commented
StatusFileSize
new views-4-7-grid.patch1.67 KB

Here's the same thing as a patch.

yched’s picture

yched commented

You you should probably submit this as a patch for views_bonus module

As a side note : shouldn't you be using theme('table',...) to ouptut your html ?

merlinofchaos’s picture

merlinofchaos commented
Project: Views (for Drupal 7) » Views Bonus Pack
Version: 4.7.x-1.x-dev » 6.x-1.x-dev

This is more suited for the views bonus pack than views itself.

hickory’s picture

hickory commented

I haven't worked out theme('table'...) yet, so if anyone knows how to fix it please go ahead.

merlinofchaos’s picture

merlinofchaos commented

FYI a better way to do this creates code that looks like this:

<div class="grid-row">
  <div class="grid-entry">
     content
  </div>
  <div class="grid-entry">
     content
  </div>
</div class="grid-row">

Each 'row' would have a grid-row div.

CSS:

.grid-row {
  width: 100%;
  margin: 0;
  overflow: hidden; /* not sure if this is needed */
}

.grid-row .grid-entry {
  width: 50%;
  padding: 0;
  margin: 0;
}

I really should just make that a panel layout and add that as one of the bonus pack panels layouts.

merlinofchaos’s picture

merlinofchaos commented
Status: Needs review » Fixed

Somewhere along the way this actually got into the bonus pack. THough in the original form.

Anonymous’s picture

(not verified) commented
Status: Fixed » Closed (fixed)
druvision’s picture

druvision commented

The function is included in the views_bonus package. It's called theme_views_bonus_view_grid.