HeadsetOptions Web Design, SEO, WordPress, Etcetra

If you're new here, you may want to subscribe to our RSS feed. Thanks for visiting!

Earlier, we studied how we can easily display a continuous list in two columns using just CSS. Today, we will use a similar technique to present a continuous list in two rows within a finite width. A common usage of this technique can be found in galleries such as CSS Mania or wpSnap, where the post is replaced by a thumbnail image in the home page. We can tackle this need using simple CSS magic.

Let us assume you are using WordPress to power your site where your typical blog post is generated using WP Loop as shown below. This will usually render a simple list of posts as shown in this image, click the image to view a live demo.

1. <?php while(have_posts()) : the_post(); ?>
2. <div class=”post” id=”post-<?php the_ID(); ?>”>
3. <h1><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>” rel=”bookmark”><?php the_title(); ?></a></h1>
4. <h5>//<?php the_time(’m.d.Y’); ?> at <?php the_time(’g:i a’) ?></h5>
5. <?php the_content(’Read more…’); ?>
6. <?php edit_post_link(’Edit’, ‘<p>’, ‘</p>’); ?>
7. <p class=”entry-meta”>
8. <span class=”cat-links”>Filed under: <?php the_category(’, ‘) ?><?php if (function_exists(’the_tags’)) { ?><?php the_tags(’, ‘, ‘, ‘, ”); ?><?php } ?></span> // <span class=”comments-link”><?php comments_popup_link(’Post a comment’, ‘1 Comment’, ‘% Comments’); ?></span>
9. </p>
10. </div>
11. <?php endwhile; ?>

We then replace the tag that generates the post, in this case, it’s the “the_content” tag with a source to a image file that is labeled identical to the post ID, for example, post ID 11 will have a corresponding image called 11.jpg in a select.

In this case, we assume that the generated images have dimensions of 400px by 300px, though the thumbnail displayed in the home page is only 200px wide by 150px high. Note that such thumbnails can either be auto-generated using a free services such as ThumbShots or manually generated using free tools such as HoverSnap. Check the example site now, click the image for a live demo.

1. <?php while(have_posts()) : the_post(); ?>
2. <div class=”post thumb” id=”post-<?php the_ID(); ?>”>
3. <a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><img src=”<?php bloginfo(’siteurl’); ?>/images/screenshots/<?php echo $post->ID; ?>.jpg” alt=”<?php the_title(); ?>” height=”150px” width=”200px” /></a>
4. <h1 class=”themeheader”><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>” rel=”bookmark”><?php the_title(); ?></a></h1>
5. <?php edit_post_link(’Edit’, ‘<p>’, ‘</p>’); ?>
6. <p class=”entry-meta”>
7. <span class=”date-time”><?php the_time(’m.d.Y’); ?> at <?php the_time(’g:i a’) ?></span> // <span class=”cat-links”>Filed under: <?php the_category(’, ‘) ?><?php if (function_exists(’the_tags’)) { ?><?php the_tags(’, ‘, ‘, ‘, ”); ?><?php } ?></span> // <span class=”comments-link”><?php comments_popup_link(’Post a comment’, ‘1 Comment’, ‘% Comments’); ?></span>
8. </p>
9. </div>
10. <?php endwhile; ?>

Let’s not forget the most important part of it all, the CSS. Add styles for class “thumb”, “thumbheader” and “thumbmeta” in your stylesheet.

.thumb {
position:relative;
float:left;
width:205px;
margin:0 5px 0 5px;
}
.thumb a:link img, .thumb a:visited img {
padding:0px;
border: 3px solid #03EFFD;
width:200px;
height:150px;
}
.thumb a:hover img {
border:3px solid #7DC1F5;
}
.thumb .thumbheader {
font-size:11px;
margin:9px 0 9px 0px;
text-align: left;
}
.thumb .thumbheader a:link, .thumb .thumbheader a:visited {
font-weight:normal;
color:#CB4721;
}
.thumb .thumbheader a:hover {
color: #CB4721;
text-decoration: underline;
}
.thumb .thumbmeta {
font-size:9px;
margin:9px 0 9px 0;
text-align: left;
}

There you have it, a very simple way to display your lists of any length in two rows. The same method can be used to accomplish any finite number of rows.