Using Php Loop To Add Bootstrap Rows And Proper Column Numbers To Elements

Question

I'm trying to create the following front-end using a PHP loop and Twitter Bootstrap's 12 column grid system: The HTML output is:

BootstrapContentArranger.php

<?phpfunctionBootstrapContentArrange($i) {
    $items = $i;                // qnt of items$rows = ceil($items/3);     // rows to fill$lr = $items%3;             // last row items$lrc = $lr;                 // counter to last rowwhile ($items > 0) {        // while still have items$cell = 0;
        if ($rows > 1) {        // if not last row...echo'<div class="row">'.PHP_EOL;
            while ($cell < 3) {     // iterate with 3x4 colsecho'<div class="col-md-4">Content</div>'.PHP_EOL;
                $cell++;
            }
            echo"</div>".PHP_EOL;
        $rows--;        // end a row
        } elseif ($rows == 1 && $lr > 0) {      // if last row and still has itemsecho'<div class="row">'.PHP_EOL;
            while ($lrc > 0) {      // iterate over qnt of remaining items$lr == 2 ?      // is it two?print('<div class="col-md-6">Content</div>'.PHP_EOL) :  // makes 2x6 rowprint('<div class="col-md-12">Content</div>'.PHP_EOL); // makes 1x12 row$lrc--;
            } 
            echo"</div>".PHP_EOL;
            break;
        } else {        // if round qnt of items (exact multiple of 3)echo'<div class="row">'.PHP_EOL;
            while ($cell < 3) {     // iterate as usualecho'<div class="col-md-4">Content</div>'.PHP_EOL;
                $cell++;
            }
            echo"</div>".PHP_EOL;
            break;
        }
        $items--;       // decrement items until it's over or it breaks
    }
}

Test Cases

BootstrapContentArrange(3);
BootstrapContentArrange(11);
BootstrapContentArrange(1);

3 items, outputs:

<divclass="row"><divclass="col-md-4">Content</div><divclass="col-md-4">Content</div><divclass="col-md-4">Content</div></div>

11 items, outputs:

<divclass="row"><divclass="col-md-4">Content</div><divclass="col-md-4">Content</div><divclass="col-md-4">Content</div></div><divclass="row"><divclass="col-md-4">Content</div><divclass="col-md-4">Content</div><divclass="col-md-4">Content</div></div><divclass="row"><divclass="col-md-4">Content</div><divclass="col-md-4">Content</div><divclass="col-md-4">Content</div></div><divclass="row"><divclass="col-md-6">Content</div><divclass="col-md-6">Content</div></div>

A single item, outputs:

<divclass="row"><divclass="col-md-12">Content</div></div>

Note: you can remove the PHP_EOL, I used it to read the source better.

Solution 2:

Everytime I need to to this, I just use array_chunk to build a proper array chunk for my rows and columns.

For example You have:

$posts = [['id' => 1], ['id' => 2] ...]

Baca Juga

Instead of looping and calculating whether to add row, make chunks of your posts:

$posts = [['id' => 1], ['id' => 2] ...]

$postChunks = array_chunk($posts, 4); //4 is used to have 4 items in a row
foreach ($postChunks as $posts) {
    <div class="row">
        foreach ($posts as $post) {
            <div class="col-md-3">
                <?=$post['id'];?>
            </div>     
        }
    </div>
}

Solution 3:

I think I found the solution by first finding at which item the last row starts and applying the appropriate column number to all the items in that row:

<?php$max_columns = 3; //columns will arrange to any number (as long as it is evenly divisible by 12)$column = 12/$max_columns; //column number$total_items = $loop->post_count;
$remainder = $loop->post_count%$max_columns; //how many items are in the last row$first_row_item = ($total_items - $remainder); //first item in the last row?><?php$i=0; // counter ?><?phpwhile ( have_posts() ) : the_post(); ?><?phpif ($i%$max_columns==0) { // if counter is multiple of 3 ?><divclass="row"><?php } ?><?phpif ($i >= $first_row_item) { //if in last row ?><divclass="col-md-<?phpecho12/$remainder; ?>"><?php } else { ?><divclass="col-md-<?phpecho$column; ?>"><?php } ?>
        Content...
    </div><?php$i++; ?><?phpif($i%$max_columns==0) { // if counter is multiple of 3 ?></div><?php } ?><?phpendwhile; ?><?phpif($i%$max_columns!=0) { // put closing div if loop is not exactly a multiple of 3 ?></div><?php } ?>

The advantage is that any number (evenly divisible by 12) can be added to $max_columns and it will apply the proper columns.

Solution 4:

Why don't you evaluate your modulo?

$two = false; 
if($i%3 == 2)
{
      <div class="col-md-6">
         Content...
      </div>
      $two = true;  
}

if($i%3 == 1)
{
      if($two)
      {
          <div class="col-md-6">
              Content...
          </div>
      }
      else
      {
          <div class="col-md-12">
              Content...
          </div>              
      }          
}

Solution 5:

Print a row at a time determining html class for each element depending on how full the row is; for 0 col-md-4, for 1 col-md-12... You would need some helper structures. Finally print the final row if there's something in the buffer.

/**
 * Prints the row in a grid
 * @param array $posts
 * @param string $class
 */functionprintRow($posts, $class) {
    echo'<div class="row">';

    foreach ($postsas$post) {
        echo'<div class="' . $class . '">' . $post . '</div>';
    }

    echo'</div>';
}

$i = 0;
$htmlClasses = ['col-md-4', 'col-md-12', 'col-md-6']; //helper for setting html classes$buffer = []; //helper array to hold row elementswhile (have_posts()) {
    the_post();
    $i++;

    $mod = $i % 3;

    //determine html class$htmlClass = $htmlClasses[$mod];

    if ($mod > 0) {
        $buffer[] = $currentPost; //this is the post content
    } else {
        printRow($buffer, $htmlClass);
        $buffer = [];
    }
}

//printing final row if there are elementsif (!empty($buffer)) {
    printRow($buffer, $htmlClass);
}

Html5 Dictionary