Generating Bootstrap Columns with PHP

Question

I'm trying to make a little bit of a bootstrap layout for a Wordpress theme using Advanced Custom Fields. I have it set up at the moment, so if you have 2 fields of content, it generates a "6" width column. If you have 3 fields it generates a "4" field column instead.

<?php if(get_field('link_tiles')) : 

while (has_sub_field('link_tiles')) :

$number_of_cols = count(get_field( 'link_tiles' ));

if ($number_of_cols == 2) {
         echo '<div class="col-md-6" style="padding: 0; margin: 0;">';
       }
       elseif ($number_of_cols >= 3) {
         echo '<div class="col-md-4" style="padding: 0; margin: 0;">';
       }
?>

What I really want now though, is make it so if you have 4 fields entered, it generates 3x "4" width columns and then 1x "6" width column and then if you have 6 fields entered it goes back to generating "4" width columns. I imagine it would take some logic using a While Loop, but I can't quite figure out the logic of it. I'm quite new to PHP, any help will be appreciated!

benjarwar · Accepted Answer · 2015-08-03 13:36:40Z

2

It's tough to say without seeing the surrounding code, but you must already be iterating through the columns (echoing a <div> for each). Are you iterating through an Array? Is there already a variable set to the current index?

If so, the logic could be something like this, given $index equals the current column number:

// set default for two columns
$col_class = 'col-md-6';

if ($number_of_cols == 3) {
  $col_class = 'col-md-4';
} elseif ($number_of_cols == 4 && $index < 4) {
  $col_class = 'col-md-4';
} elseif ($number_of_cols == 4 && $index == 4) {
  $col_class = 'col-md-6';
}

echo '<div class="' . $col_class . '">';

Although it seems like if you have 4 columns, you really would want 4 columns of .col-md-3 rather than 3 of .col-md-4 and one of .col-md-6 like you specify above (which would be a total of 18 columns; Bootstrap rows max out at 12 columns).

Update:

This is a bit pseudo-code, but hopefully gives you ideas on how to proceed. Note you still need to output content for each column, obviously.

<?php if(get_field('link_tiles')) :

    $number_of_cols = count(get_field( 'link_tiles' ));
    $counter = 1;

    while (has_sub_field('link_tiles')) : 
        // set default for two columns
        $col_class = 'col-md-6';

        if ($number_of_cols == 3) {
          $col_class = 'col-md-4';
        } elseif ($number_of_cols == 4 && $counter < 4) {
          $col_class = 'col-md-4';
        } elseif ($number_of_cols == 4 && $counter == 4) {
          $col_class = 'col-md-6';
        }

        echo '<div class="' . $col_class . '"></div>';

        // increment the counter for the next column
        $counter++;

    endwhile;

endif; ?>

edited Aug 3, 2015 at 13:36

answered Aug 3, 2015 at 4:07

benjarwar

1,8041 gold badge15 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

lasertimelistener Over a year ago

I'm using the Advanced Custom Fields Repeater field plug in, so for each field I add a new Column is made. I'll update the first post.

benjarwar Over a year ago

So are you using something like the Basic Loop listed here? advancedcustomfields.com/resources/repeater

lasertimelistener Over a year ago

That's right, yes. It counts the Rows of fields created.

lasertimelistener Over a year ago

Thank you Benjarwar, that's exactly what I was after!

Collectives™ on Stack Overflow

Generating Bootstrap Columns with PHP

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related