Posts in 3 Columns

  • I have my posts showing as fixed width thumbnails from a custom field. I have this working, but am having difficulties getting them to show up in 3 columns.

    The problem is that the images are fixed widths, but variable heights. Much like https://yayeveryday.com/.

    Below is the current code I have (3 loops) one in each column. It works fine with many posts, but if someone chooses a category with only 5 posts then they all show up in 1 column.

    <?php get_header(); ?>

<div id="content">
<div class="col1">
<?php query_posts('showposts=5'); ?>
<?php $posts = get_posts('numberposts=5&offset=0'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count1 = 0; if ($count1 == "5") { break; } else { ?>

<?php $postimageurl = get_post_meta($post->ID, 'post-img', true);
if ($postimageurl) {
?>
      <a href="<?php echo get_post_meta($post->ID, "Big", true);?>" rel="lightbox" title="<?php the_content(); ?>""><img src="<?php echo $postimageurl; ?>" alt="Post Pic" width="200" height="<?php echo get_post_meta($post->ID, "Height", true);?>" /></a>
<?php } else { ?>
      <a href="<?php the_permalink(); ?>" rel="bookmark"><img src="<?php bloginfo('template_url'); ?>/images/default.gif" alt="Screenshot" width="200" height="200" /></a>
<?php } ?>

<?php $count1++; } ?>
<?php endforeach; ?>

</div>
<div class="col2">

<?php query_posts('showposts=5'); ?>
<?php $posts = get_posts('numberposts=5&offset=5'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count2 = 0; if ($count2 == "5") { break; } else { ?>

<?php $postimageurl = get_post_meta($post->ID, 'post-img', true);
if ($postimageurl) {
?>
      <a href="<?php echo get_post_meta($post->ID, "Big", true);?>" rel="bookmark"><img src="<?php echo $postimageurl; ?>" alt="Post Pic" width="200" height="<?php echo get_post_meta($post->ID, "Height", true);?>" rel="lightbox" title="<?php the_content(); ?>" /></a>
<?php } else { ?>
      <a href="<?php the_permalink(); ?>" rel="bookmark"><img src="<?php bloginfo('template_url'); ?>/images/default.gif" alt="Screenshot" width="200" height="200" /></a>
<?php } ?>

<?php $count2++; } ?>
<?php endforeach; ?>

</div>
<div class="col3">

<?php query_posts('showposts=5'); ?>
<?php $posts = get_posts('numberposts=5&offset=10'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count3 = 0; if ($count3 == "5") { break; } else { ?>

<?php $postimageurl = get_post_meta($post->ID, 'post-img', true);
if ($postimageurl) {
?>
      <a href="<?php echo get_post_meta($post->ID, "Big", true);?>" rel="bookmark"><img src="<?php echo $postimageurl; ?>" alt="Post Pic" width="200" height="<?php echo get_post_meta($post->ID, "Height", true);?>" rel="lightbox" title="<?php the_content(); ?>" /></a>
<?php } else { ?>
      <a href="<?php the_permalink(); ?>" rel="bookmark"><img src="<?php bloginfo('template_url'); ?>/images/default.gif" alt="Screenshot" width="200" height="200" /></a>
<?php } ?>

<?php $count3++; } ?>
<?php endforeach; ?>
</div>
		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
		</div>

	</div>

<?php get_footer(); ?>
Viewing 6 replies - 1 through 6 (of 6 total)
  • Anonymous User

    (@anonymized-473288)

    That’s because these bits of code tell it too:

    <?php query_posts('showposts=5'); ?>
<?php $posts = get_posts('numberposts=5&offset=0'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count1 = 0; if ($count1 == "5") { break; } else { ?>
    <?php query_posts('showposts=5'); ?>
<?php $posts = get_posts('numberposts=5&offset=5'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count2 = 0; if ($count2 == "5") { break; } else { ?>
    <?php query_posts('showposts=5'); ?>
<?php $posts = get_posts('numberposts=5&offset=10'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count3 = 0; if ($count3 == "5") { break; } else { ?>

    The code will have to be rewritten in order to do so.

    this might take care of the uneven distribution if the number of posts is less than 15.

    Thread Starter neoian2

    (@neoian2)

    @alchymyth Thank you! You made my week (so far)!

    I never thought someone would understand. Thank you thank you thank you!

    error report:
    line 14 of the earlier code is wrong and is better deleted – it otherwise would mess the pagination when you have more then two times the posts as are displayed per page, in your case if you have more then 30 posts:
    please delete:

    $num_of_posts = $num_of_posts - ($paged - 1) * $set_showpost/3;

    i posted a revised code.

    Thread Starter neoian2

    (@neoian2)

    Thank you very much. I just came back to post that.

    Hi!

    Is it ok if I borrow this thread for a question? Hope so ??

    I’ve recently started with wordpress and Im working on my first site right now. And the code Alchymyth posted helped me alot! Thanks for sharing!

    But I have a little problem. Im trying to get a border of 10px at the top and right side of the images in the columns. Im not good at coding at all but the first thing that came to my mind was changing some values in the style.css:

    }
.post{
    padding: 10px 0px 0px 0px;
}
#col2 {
    padding: 0 10px 0 10px;
)

    …. and it didnt work ^^ This is as for as my knowledge reaches though.

    If any one could help me with this I will grateful!

    Cheers

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Posts in 3 Columns’ is closed to new replies.