By betovarg on

Hi all,
Just wanted to share a template for views-view-grid.tpl.php, small simple mod that removes the table and has the markup in divs. So here it is:

<?php
reset($rows);
$gridsize = count($rows[0]);
?>
<?php if (!empty($title)) : ?>
  <h3 class='grid-title'><?php print $title; ?></h3>
<?php endif; ?>
<div class="views-view-grid grid-<?php print $gridsize ?>">

    <?php foreach ($rows as $row_number => $columns): ?>
      <?php
        $row_class = 'row-' . ($row_number + 1);
        if ($row_number == 0 && count($rows) > 1) {
          $row_class .= ' row-first';
        }
        elseif (count($rows) == ($row_number + 1)) {
          $row_class .= ' row-last';
        }
      ?>
      <div class="<?php print $row_class; ?>">
        <?php foreach ($columns as $column_number => $item): ?>
          <div class="gridCol <?php print 'col-'. ($column_number + 1); ?>">
		<?php if ($item): ?>
	            <div class='grid-item'>     	
	            	<?php print $item; ?>
	            </div>
		<?php endif; ?>            	
          </div>
        <?php endforeach; ?>
      </div>
    <?php endforeach; ?>
</div>

I added some extra code to hide

when there are no post to show, useful if you are theming directly in that div (dont want the item to show empty if you use some padding or margins with a background).

Comments

VikrantR’s picture

VikrantR commented

Hi,

Thanks for this.

Vikrant R

ddiakopoulos’s picture

ddiakopoulos commented

Just what I needed. thanks!

Tezza’s picture

Tezza commented

Thanks for sharing.

neRok’s picture

neRok commented

Here is an alternate I found as part of a twitter bootstrap theme.

<?php if (!empty($title)) : ?>
  <h3><?php print $title; ?></h3>
<?php endif; ?>
<div class="<?php print $class; ?>"<?php print $attributes; ?>>
    <?php foreach ($rows as $row_number => $columns): ?>
      <div <?php if ($row_classes[$row_number]) { print 'class="' . $row_classes[$row_number] .'"';  } ?>>
        <?php foreach ($columns as $column_number => $item): ?>
          <div <?php if ($column_classes[$row_number][$column_number]) { print 'class="' . $column_classes[$row_number][$column_number] .'"';  } ?>>
            <?php print $item; ?>
          </div>
        <?php endforeach; ?>
      </div>
    <?php endforeach; ?>
</div>
malberts’s picture

malberts commented

This is similar to what Views Responsive Grid does. The module gives a little more options in the Views UI, but this template should be more than enough if you don't want the settings or another module just to override the default table-based template.