WordPress Loop to dynamically close Bootstrap rows

2 Views

I’m pretty new to PHP but I have built some fairly simple WordPress themes in my time. I’m trying to make something unique and I’m not sure how to accomplish it (or if it’s even possible).

My goal is to create a loop that will dynamically close rows when it reaches the column “12” count for bootstrap (IE: col-md-3 + col-md-3 + col-md-6 = 12). The look I’m ultimately trying to achieve and how I currently have my static file set up => https://jsfiddle.net/y2mLr3hd/7/embedded/result/. I’m only using “display: flex;” for right now to just demonstrate what I’m trying to achieve. I’d like it be just rows rather than a single row.

Read More

I’m use to the standard loop for WordPress using ULs and LIs but I have no idea on how to go about what I’m trying to do. I’d like the loop to figure a random number for the column size consisting of the column sizes “3, 4, 6, 8” and create rows with columns sizes equaling “12” like I stated before. THAT or find a way on how to make it work with the way I currently have it set up.

This is the closest thing to what I’m looking for but really isn’t even that close =>https://stackoverflow.com/questions/16427962/twitter-bootstrap-spans-in-dynamic-websites#=. Here’s the code from that link for quick reference: 

$i=0;
    foreach ($posts as $post):
        if ($i%2==0) echo '<div class="row-fluid">';
        echo '<div class="span6">'. $post->content .'</div>';
        if ($i%2==1) echo '</div>';
    $i++;
endforeach;

Any help on how I might be able to go about this would be GREATLY appreciated!

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. There are two parts to your question:

    • How to divide 12 in random parts using 3, 4, 6, and 8
    • Given an array of numbers that add up to 12, how to generate a row with posts?

    The first one is more a mathematics question. Note that you can only combine 3s and 6s, or 4s and 8s. You cannot combine 3 and 4, and still get 12.

    We’ll devise a simple algorithm with this in mind:

    function getRandomNumbers()
{
    // We start with an empty array and add numbers until we hit 12.
    $result = array();

    // We choose either 3 or 4 as basic number.
    $x = mt_rand(3, 4);

    // Now, as long as we don't hit 12, we iterate through a loop, 
    // adding either the basic number, or 2 times the basic number:
    while (array_sum($result) < 12) {

        // Randomly decide 
        if (mt_rand(0, 1) > 0) {
            $newElement = 2 * $x; // This is either 6 or 8

            // However, always make sure not to exceed 12: 
            if (array_sum($result) + $newElement > 12) {
                $newElement = $x;
            }

        } else {
            $newElement = $x; // This is either 3 or 4
        }

        // Add the new number to the array:
        $result[] = $newElement;
    }

    // Return the resulting array
    return $result; 
}

    Now we need to use these arrays to create rows. We start by generating an array with random numbers with the function we wrote.

    We’ll simply iterate through the posts, use the numbers in the array until there’s none left. We’ll generate a new array with random numbers whenever we need a new one. Since that means we have added 12 width-worth of columns, that’s the point where we need to start a new row as well. 

    // Get the initial array with random numbers
$randomArray = getRandomNumbers();

// Open the initial row.
echo '<div>'; 

foreach ($posts as $post):

    if (count($randomArray) < 1) {
        // Close the row and start a new one: 
        echo '</div><div>';
        // Get a fresh array with random numbers:
        $randomArray = getRandomNumbers();
    }

    $nextRandomNumber = array_pop($randomArray); // This takes the next number.
    echo '<div class="col-md-' . $nextRandomNumber . '">'. $post->content .'</div>';

endforeach;

echo '</div>'; // Close the final row.