WordPress.org

1. emanoelmelo
   Member
   Posted 2 years ago #

   Ok this is a bit complicated. I want that WP loop shows my posts in a paginated page (category template), ordered in a grid from left to right, top to bottom. I found this script that does it fine...UNTIL you get an incomplete grid. Seems like it first shows the first column images, so it's ordering by column not by row, leaving a lot of blank space on the horizontal. Here is the code, I really apreciate any help:

   [Code moderated as per the Forum Rules. Please use the pastebin]

2. alchymyth
   The Sweeper
   Posted 2 years ago #

   i am working to resolve this issue, but this will take a few days.

   however, what you are trying to do - left-to-right; top-to-bottom - is in the simplest way done with wrapping the post into a div, fixed width, floated left, right margin; with a counter to add a 'clear-left' to every first post in a row, and a different margin to the last post in a row:

   <?php
   if (have_posts()) :
     $columns = 5; //set the number of columns
     $i = 1;
     while (have_posts()) : the_post(); ?>
         <div class="post<?php if( ($i-1)%$columns == 0 ) { echo ' clearleft'; };  if( $i%$columns == 0 ) { echo ' last'; }; ?>" id="post-<?php the_ID(); ?>">
         <!-- core post area; title, content, thumbnails, postmeta, etc -->
         </div>
         <?php $i++;
     endwhile;
   
     next_posts_link('&laquo; Older Entries');
     previous_posts_link('Newer Entries &raquo;');
   else:
     echo 'no posts';
   endif; ?>

   the css for this:
   

   .post {
   float:left;
   width: 100px;
   margin-right: 10px;
   max-height:150px; /*not necessary*/
    }
   .post.clearleft { clear:left; }
   .post.last { margin-right: 0px; }

3. emanoelmelo
   Member
   Posted 2 years ago #

   Interesting solution alchymyth, thank you!!! One of my problems is that divs have different heights, so if they are too long, they "move" the divs bellow.

4. alchymyth
   The Sweeper
   Posted 2 years ago #

   divs have different heights, so if they are too long, they "move" the divs bellow.

   then you may want to have a look at this:
   http://www.creativedepart.com

   a design like in the above link could be achieved with this code from what i call 'stacking posts'.

5. emanoelmelo
   Member
   Posted 2 years ago #

   Very nice!! Thanks for the tip, alchymyth!!!!

Topic Closed

This topic has been closed to new replies.