Twitter Bootstrap Question posted in

Twitter bootstrap – Irregular rows but regular columns with Twitter-Bootstrap 3

I am trying to achieve a layout where there are 4 columns in which content is in boxes that are capable of stacking vertically. This means that there are no regular rows (each content box can be different height), only regular columns (content boxes have always the same width).

The problem is – I have no idea how to do it via PHP loops. That’s because I have to put the first post into the first column, the second post into the second column, third one into column nr 3, the fourth one into column nr 4 and then the 5th post goes AGAIN into column 1, etc.

So there are four columns and twenty posts, the newest posts are at the top and the oldest ones are at the bottom.

Here’s a screenshot of what I already have so that you see the irregular rows and regular columns concept:

Example

As requested, my code:

$counter = 0;
for($cols = 0; $cols < 4; $cols++) {
?>

<!-- COLUMN NR <?php echo $cols; ?> -->
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 post_box">             
<?php
foreach ($post_list as $p) {
    $the_post = get_post($p);
    $the_title = $the_post->post_title;
    $the_content = $the_post->post_content;

    if($counter == (0 + $cols) || $counter == (4 + $cols) || $counter == (8 + $cols) || $counter == (12 + $cols) || $counter == (16 + $cols) ) {
    ?>
    <!-- POST NR <?php echo $counter; ?> WITH ID <?php echo $p; ?> -->
    <div class="post_container">
    <a href="<?php echo get_permalink($the_post->ID); ?>">
        <div class="row postbox_title">
            <div class="col-xs-12 title_col">
            <h2><?php echo $the_title; ?></h2>
            </div>
        </div>
        <div class="row postbox_content">
            <div class="col-xs-12 content_col">
                <div class="post_content">
                    <?php echo '<p>'.$the_content.'</p>'; ?>
                </div>
            </div>
        </div>
    </a>                        
    </div>
    <?php
    }           
    $counter++;
}
?>
</div>
<?php
}

Here’s a screenshot of my code to make it more readable:
http://scr.hu/5z5a/icinl

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Okay, thanks to @Chorna I managed to fork his answer and fix my problem! Thank you for that :).

    I loaded the posts into an array this way:

        switch($post_counter) {
    case 0:
    case 4:
    case 8:
    case 12:
    case 16:                            
        $col = 1;
        break;
    case 1:
    case 5:
    case 9:
    case 13:
    case 17:
        $col = 2;
        break;
    case 2:
    case 6:
    case 10:
    case 14:
    case 18:
        $col = 3;
        break;
    case 3:
    case 7:
    case 11:
    case 15:
    case 19:
        $col = 4;
        break;
}
$post_list[$col][] = get_the_ID();
$post_counter++;

    Then I displayed them like this:

    foreach($post_list as $post_element) {
?>
<!-- COLUMN NR <?php echo $cols; ?> -->
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 post_box">             
<?php
foreach ($post_element as $p) {
    $the_post = get_post($p);
    $the_title = $the_post->post_title;
    $the_content = $the_post->post_content;
    ?>
    <!-- POST NR <?php echo $counter; ?> WITH ID <?php echo $p; ?> -->
    <div class="post_container">
    <a href="<?php echo get_permalink($the_post->ID); ?>">
        <div class="row postbox_title">
            <div class="col-xs-12 title_col">
            <h2><?php echo $the_title; ?></h2>
            </div>
        </div>
        <div class="row postbox_content">
            <div class="col-xs-12 content_col">
                <div class="post_content">
                    <?php echo '<p>'.$the_content.'</p>'; ?>
                </div>
            </div>
        </div>
    </a>                        
    </div>
    <?php
    }

    Thank you all for your help!


  2. 0

    It’s Masonry css you are looking for, you can do it with only html and css.

    #CSS:
.masonry { /* Masonry container */
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}

.item { /* Masonry bricks or child elements */
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}


#HTML:   
<div class="masonry">
   <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
   <div class="item">Neque, vitae, fugiat, libero corrupti officiis sint facilis tempora quidem repudiandae praesentium odit similique adipisci aut.</div>
   <div class="item">Incidunt sit unde minima in nostrum?</div>
   <div class="item">Ducimus, voluptates, modi, delectus animi maiores consequuntur repellat quisquam fugiat eum possimus enim culpa totam praesentium magni quae!</div>
</div>
    Login or Signup to reply.
  3. 0

    You can divide the posts into 4 arrays, and then use a foreach to create the cols. Something like (pseudocode):

    // one foreach to divide posts
$col = 1;
foreach($posts as $post) {
    $cols[$col][] = $post;
    $col = $col == 4 ? 1 : $col+1;
}
// then, another foreach for the html
foreach($cols as $col) {
    // open col div
    foreach($col as $post) {
        // print post
    }
    // close col div
}

    You can see the code output here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search