CyberJunkie CyberJunkie - 27 days ago 12
HTML Question

Using PHP loop to add Bootstrap rows and proper column numbers to elements

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

enter image description here

The HTML output is:

<div class="row">
<div class="col-lg-4">
Content...
</div>
<div class="col-lg-4">
Content...
</div>
<div class="col-lg-4">
Content...
</div>
</div>

<div class="row">
<div class="col-lg-4">
Content...
</div>
<div class="col-lg-4">
Content...
</div>
<div class="col-lg-4">
Content...
</div>
</div>

<div class="row">
<div class="col-lg-6">
Content...
</div>
<div class="col-lg-6">
Content...
</div>
</div>


In PHP (WordPress) I'm wrapping every 3 items in a
.row
div:

<?php $i=0; // counter ?>

<?php while ( have_posts() ) : the_post(); ?>

<?php if ($i%3==0) { // if counter is multiple of 3 ?>
<div class="row">
<?php } ?>

<div class="col-md-4">
Content...
</div>

<?php $i++; ?>

<?php if($i%3==0) { // if counter is multiple of 3 ?>
</div>
<?php } ?>

<?php endwhile; ?>

<?php if($i%3!=0) { // put closing div if loop is not exactly a multiple of 3 ?>
</div>
<?php } ?>





The Problem:



I don't know how to add the appropriate column number to the items in the last row so that they fill the 12 column grid.

For example, in my illustration above each item in the last row has
col-6
(expands 6 columns) filling the 12 grid system. As another example, if there was 1 item in the last row it should have
col-12
.

Note: each row has 3 items at most as shown in the illustration and in PHP.

I know the following:


  • Total number of items
    $loop->post_count

  • Item number
    $i

  • Number of remainder items in the last row
    $loop->post_count%3
    (I think)

  • Total number of columns
    12
    (12 could be divided by the number of remainder items to figure out the column number to give them)



Question:

How can I use that data in the PHP above to change the column number of the items in the last row so that they will fill the 12 grid (making them them centered)?

Answer

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 ?>

<?php while ( have_posts() ) : the_post(); ?> 

    <?php if ($i%$max_columns==0) { // if counter is multiple of 3 ?>
    <div class="row">
    <?php } ?>

    <?php if ($i >= $first_row_item) { //if in last row ?>   
    <div class="col-md-<?php echo 12/$remainder; ?>">
    <?php } else { ?>
    <div class="col-md-<?php echo $column; ?>">
    <?php } ?>
        Content...
    </div>        

    <?php $i++; ?>

    <?php if($i%$max_columns==0) { // if counter is multiple of 3 ?>
    </div>
    <?php } ?>

<?php endwhile; ?>

<?php if($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.

Comments