WordPress.org

1. neoian2
   Member
   Posted 2 years ago #

   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 http://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(); ?>

2. design_dolphin
   Member
   Posted 2 years ago #

   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.

3. alchymyth
   The Sweeper
   Posted 2 years ago #

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

4. neoian2
   Member
   Posted 2 years ago #

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

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

5. alchymyth
   The Sweeper
   Posted 2 years ago #

   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.

6. neoian2
   Member
   Posted 2 years ago #

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

7. chickensalad
   Member
   Posted 2 years ago #

   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

Topic Closed

This topic has been closed to new replies.