PHP Displaying 3 column block from WHILE loop

Question

I am trying to build a site (blog) that mimics the layout of the new www.digg.com site.

It consist of a top featured full width post and below that the post are in 3 column wide blocks. The blocka all are set to a certain width and Float left.

The difference in the one I am building is instead of just the top post being a featured full width post, any row can have a featured post shown which should expand the full width of the page and push the other blocks down.

The problem is, if a post is designated as being featured and it is not in the left column, then it will not look right. The image below illustrates what happens if a featured post is in the 2nd or 3rd column.

Traversing a WHILE loop of Wordpress posts, I count and assign a number between 1 and 3 to each posts CSS class. example <div class="col-1"> <div class="col-2"> <div class="col-3">

col-1 = left column post
col-2 = middle column post
col-3 = right column post

Occasionally a post will also have a CSS class named featured. When a post is designated as featured then it will expand the full width of 3 columns instead of just 1 column.

This is all easy to do as long as the featured post is the very first post in the result set. However, in the image below I have showed where my problem is. If I assign a class column name of 1-3 for each post and a class name of featured for featured posts, then assuming I am iterating the set and I assign a featured CSS class to a post that would normally have a class name of col-2 or col-3 then there is a problem.

The image below shows the problem. On row 3, you can see what would happen if I assigned a featured class to the row 3 center column (col-2)

enter image description here

I need to somehow, assign class name col-1 col-2 col-3 or featured to all posts in the while loop and make sure that the featured post are always in the column-1 position.

I am open to any suggestions or help on how I could achieve this?

Below is a sample code of the PHP loop... (NOTE: I did not add in the code to check for Featured posts yet)

<?php
// Start our column count at 1
$column = 1;
while (have_posts()) : the_post();
    $col_class = 'post-col-' .$column;
?>

  <article <?php post_class($col_class); ?>>
      post content
  </article>

<?php
// Increase the Column count
$column++;
// After count has displayed 3, we reset the count
if($column == 4){
    $column = 1;
}
endwhile;
?>

You could make the featured post start on a new line but that would result in some incomplete rows. (on the other hand if you would fill all rows you'd mess up the posting order.) If your blocks are aligned using float: left you can use clear: both on the featured items' css to achieve this. — Neograph734
– Neograph734, Commented Nov 6, 2012 at 11:04
@Neograph734 You are right I though about that, I was thinking even though it would mess up post order that it would be ok since the post would still be so close to each other. I'm starting to think there is no way without a ton of work. I think I would need to determine a featured post's place/number and if it was col-2 or col-3 I would then need to somehow fill those space in with other posts and move the featured post down. Sounds like a nightmare. For the time being I will probably just make the 1st/top post be the featured post until I can figure out a good alternative — JasonDavis
– JasonDavis, Commented Nov 6, 2012 at 12:30

Neograph734 · Accepted Answer · 2012-11-06 12:45:35Z

1

Just thought that you can also 'hold' an element until the the whole row is filled. If you have the posts sorted like this:

List item
List item
List item
List item
Featuerd List item
List item
List item

You could loop through them like you do and when detecting a featured item store it temporarily and display it when done. Something like below:

<?php
$column = 1;
$featured_list = array();
while (have_posts()) : the_post();
  $col_class = 'post-col-' .$column;

  if(!$isfeatured) {
    echo '<article '.post_class($col_class).'>post content</article>';
  } else {
    $featured_list[] = '<article '.post_class($col_class).'>post content</article>';
  }

  // Increase the Column count
  $column++;
  // After count has displayed 3, we reset the count
  if($column == 4){
    $column = 1;
  // Print everything in the array, doing nothing if empty
  foreach ($featured_list as $featured_item) { 
    echo $featured_item;
  }
  // Reset the array
  $featured_list = array(); 
}
endwhile;
?>

answered Nov 6, 2012 at 12:45

Neograph734

1,7642 gold badges18 silver badges41 bronze badges

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

1 Comment

JasonDavis Over a year ago

Good thinking, I actually thought the same thing and was trying to code it up, but you did a better job, thanks, I think this is probably the only real solution

Collectives™ on Stack Overflow

PHP Displaying 3 column block from WHILE loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related