adrian-d of Rouge Devs
11/29/2016 - 10:43 AM

Dynamically add rows to a flat View grid

Dynamically add rows to a flat View grid

// Rules:
// 1. Don't use if you have more than two view modes. I have used this if the grid is only three columns or stacking responsively - if you go down into medium desktops and your columns are outputting in twos for example, you shouldn't use this.
// 2. Don't use if the grid is going to be manipulated dynamically, such as via masonry/Isotope or AJAX filtering.

// Perform this amend in the 'Style' template (such as 'views-view-unformatted').

// Grab the set of rows and use array_chunk to group them by three
<?php $result_rows = array_chunk($rows, 3); ?>

// Initial row grouping, allows you to set the markup around the secondary grouping
<?php foreach ($result_rows as $id => $result_row): ?>

  <div class="row">
    // This is the common grouping that you would use normally.
    <?php foreach ($result_row as $id => $row): ?>
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
        <?php print $row; ?>
      </div>
    <?php endforeach; ?>
  </div>

<?php endforeach; ?>

// What this does is provide a more usable HTML format for Bootstrap grid outputs. Instead of:

<div class="row">
  <div class="col-lg-3">column</div>
  <div class="col-lg-3">column</div>
  <div class="col-lg-3">column</div>
  <div class="col-lg-3">column</div>
  <div class="col-lg-3">column</div>
  <div class="col-lg-3">column</div>
  <div class="col-lg-3">column</div>
  <div class="col-lg-3">column</div>
</div>

// You should now get instead

<div class="row">
  <div class="col-lg-3">column</div>
  <div class="col-lg-3">column</div>
  <div class="col-lg-3">column</div>
  <div class="col-lg-3">column</div>
</div>
<div class="row">
  <div class="col-lg-3">column</div>
  <div class="col-lg-3">column</div>
  <div class="col-lg-3">column</div>
  <div class="col-lg-3">column</div>
</div>