Archive Page – Thumbnails & Columns

Can you put the H2 and image inside a div. something like:

<div class="post-img">
        <!--post title as a link-->
	<h2><a>Cascade Falls</a></h2>
      	<img  />
        </div>

Then we can do it with some Css trickery.

I’ll give it a try right now. I’m not sure if it will work because I’m not choosing and posting the images individually –?WP is pulling them from the database.

Here’s what it is right now:

<div style="width:550px;float:left;">
    <?php while (have_posts()) : the_post(); // the loop ?>

    <!--post title as a link-->
	<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e("Permanent Link to"); ?> <?php the_title(); ?>"><?php the_title(); ?></a></h2>

        <?php if(has_post_thumbnail()) { the_post_thumbnail(); } else {?>
	<?php /* the_content('<div class="post-more">Read the rest of this entry &raquo;</div>'); */ ?>
	<?php } ?>

Yeah, no luck with that method.

If I set a height on the main div and set it up to go into columns, would it flow into them automatically?

Just an idea, I don’t know if it would work and I wouldn’t know how to code it, either.

Alright, I’m working through this problem, but I’m still not quite there. I’m hoping someone will have the last piece.

I created another div to contain each post –?

<div style="width:550px;float:left;">

<div style='width:33%;float:left'>
    <?php while (have_posts()) : the_post(); // the loop ?>

    <!--post title as a link-->
	<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e("Permanent Link to"); ?> <?php the_title(); ?>"><?php the_title(); ?></a></h2>

        <?php if(has_post_thumbnail()) { the_post_thumbnail(); } else {?>
	<?php /* the_content('<div class="post-more">Read the rest of this entry &raquo;</div>'); */ ?>
	<?php } ?>

    <?php endwhile; //end one post ?>

</div>

This works just fine – the only issue is telling it to create a break after the 4th and 8th posts, pushing the content to the next div. Ideas welcome.

Alternatively, I could tell wordpress to retrieve the 1-4 most recent posts from a category, the 5-8 most recent posts from a category, and the 9-12 most recent posts from a category. Is that possible? I’m looking in the Codex now.

try and move the div with the 33% into the loop, and close it before the endwhile:

<div style="width:550px;float:left;">

    <?php while (have_posts()) : the_post(); // the loop ?>
<div style='width:33%;float:left'>
    <!--post title as a link-->
	<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e("Permanent Link to"); ?> <?php the_title(); ?>"><?php the_title(); ?></a></h2>

        <?php if(has_post_thumbnail()) { the_post_thumbnail(); } else {?>
	<?php /* the_content('<div class="post-more">Read the rest of this entry &raquo;</div>'); */ ?>
	<?php } ?>
</div>
    <?php endwhile; //end one post ?>

</div>

(obviously have the general setting to show 12 posts per page)
the fourth post should automatically break into the next row, as there is not enough space for it left.

Brilliant! That did the trick. I knew I was getting close, but I couldn’t get over that last hump. Thanks for the tip!!!