CODEWITHSUNDEEP
phpwordpress
JasonDavis
JasonDavis

Reputation: 48973

PHP Displaying 3 column block from WHILE loop

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

Upvotes: 0

Views: 3117

Answers (1)

Neograph734
Neograph734

Reputation: 1754

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

  1. List item
  2. List item
  3. List item
  4. List item
  5. Featuerd List item
  6. List item
  7. 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;
?>

Upvotes: 1

Related Questions