Show post thumbs in rows instead of columns

Question

I am displaying only thumbs and title on index pages using following code;

 <div id="column1">
    <?php query_posts('cat=22&showposts=2'); ?>
<?php $posts = get_posts('cat=22&numberposts=2&offset=0'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count1 = 0; if ($count1 == "2") { break; } else { ?>
<a href="<?php the_permalink() ?>" rel="<?php _e("bookmark", "solostream"); ?>" title="<?php _e("Permanent Link to", "solostream"); ?> <?php the_title(); ?>"><?php the_post_thumbnail( 'homepage-thumb' ); ?></a>
<br><a style="color:#666;"><?php the_title(); ?></a><br>
<a style="color:#1C477E;"><?php the_field('price'); ?></a>
<div style="clear:both;"></div>
<?php $count1++; } ?>
<?php endforeach; ?>
</div>

    <div id="column2">
        <?php query_posts('cat=22&showposts=2'); ?>
<?php $posts = get_posts('cat=22&numberposts=2&offset=2'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count2 = 0; if ($count2 == "2") { break; } else { ?>
<a href="<?php the_permalink() ?>" rel="<?php _e("bookmark", "solostream"); ?>" title="<?php _e("Permanent Link to", "solostream"); ?> <?php the_title(); ?>"><?php the_post_thumbnail( 'homepage-thumb' ); ?></a>
<br><a style="color:#666;"><?php the_title(); ?></a><br>
<a style="color:#1C477E;"><?php the_field('price'); ?></a>
<div style="clear:both;"></div>
<?php $count2++; } ?>
<?php endforeach; ?>
    </div>

This cause problem when post in some category are less or more than described number of posts in one column. In case of less posts, other columns remain empty so looks odd. I want to show them in rows instead of columns so number of posts should not effect the category pages.

Answer 1

Easiest way to control column and/or row layouts I know of is to make use of modulus. I broke it down in a tutorial and use it with wordpress in my examples.

Wordpress and PHP Modulus

The first example is basic, while the second is a bit more advanced and utilizes post images/attachments. If it helps let me know or give the page a +1 for me :-)

Answer 2

if i understand you correctly, the following will get the posts and put them into rows, at 3 posts per row. you can adjust the rows by adjusting the $columns variable. you can also adjust the CSS to suit, it was just for me to get the posts floated and visible since i don't have a lot of thumbs to test with.

<style>
#test, .row{overflow: hidden; margin-bottom: 22px;}
.post {float: left; width: 150px; height: 150px; margin-right:20px; background: pink;}
.post.last {margin-right: 0;}
.post img {max-width: 100%;}
</style>

<div id="test">

    <?php 
    global $post;
    $tmp_post = $post;

    $columns = 3; //number of posts per row

    $args = array( 'cat'=>22,
            'numberposts' => 9 );

    $count = 1;

    $posts = get_posts($args); if($posts): ?>

    <div class="row">

        <?php 

        foreach ($posts as $post) : setup_postdata($post); 


        $class = ( $count%$columns == 0 ) ? 'last' : ''; ?>

        <div class="post">
            <a href="<?php the_permalink() ?>" rel="<?php _e("bookmark", "solostream"); ?>" title="<?php _e("Permanent Link to", "solostream"); ?> <?php the_title(); ?>"><?php the_post_thumbnail( 'homepage-thumb' ); ?>
            <br/><?php the_title(); ?><br/>
            <?php if(function_exists('the_field')) the_field('price'); ?>
            </a>
        </div><!--.post-->

        <?php 
        if ( $count%$columns == 0 ) { ?>
            </div><!--.row-->
            <?php if ($count < count($posts)) : ?> <div class="row"> <?php endif; ?> 
        <?php }


        $count++;  
        endforeach; ?>
    </div><!--.row-->

<?php endif;
$post = $tmp_post;
?>

</div><!--#test-->