Multi-size Multi-Row Image Layout

The sample template below was created to answer a request for a layout showing images in a unique layout as shown in the comments in the code.  The template was tested using the TwentyTen theme.  The template is not meant to be used as-is – it is meant to be only a guide to the logic needed to produce the layout.

Here is a screen shot of the results:

and here is the code:

<?php
/*
Template Name: testphp

This a template used to demonstrate the layout of images in this format:

   +---------------------+----------+
   |                     | Small    |
   |                     | Image    |
   |                     |          |
   |   Large Image       |----------|
   |                     | Small    |
   |                     | Image    |
   |                     |          |
   +----------+----------+----------+
   |   Small  |  Small   |  Small   |
   |   Image  |  Image   |  Image   |
   |          |          |          |
   +----------+----------+----------+
   |   Small  |  Small   |  Small   |
   |   Image  |  Image   |  Image   |
   |          |          |          |
   |          |          |          |
   +----------+----------+----------+
*/
?>
<?php
get_header();
?>
<div id="container">
   <div id="content" role="main">

<?php

// Some sample styles for the images
echo "<style type='text/css'>
.large-image {
   float: left;
   width: 65%;
   height: 310px;
   overflow: hidden;
   margin: 5px;
}
.wrap-2-3 {
   float: left;
}
.small-vert-image {
   margin: 5px;
   width: 32%;
}
.small-horiz-image {
   float: left;
   margin: 5px;
   width: 31%;
}
.clearboth {
   clear: both;
}
</style>\n";

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
  'paged' => $paged,
  'post_type' => 'page',
  'posts_per_page' => 9,
  'category_name' => 'garden-layouts'
);
query_posts($args);

if (have_posts()) :
   $post_count = 0;
   while (have_posts()) :
      the_post();
      if (has_post_thumbnail()) {
         ++$post_count;
         if ($post_count == 1) { ?>
            <div>
               <div class='large-image'>
                  <?php the_post_thumbnail('medium'); ?>
               </div>
         <?php } elseif ($post_count == 2 || $post_count == 3) {
            if ($post_count == 2) { ?>
               <div class='wrap-2-3'>
            <?php } ?>
                  <div class='small-vert-image'>
                     <?php the_post_thumbnail('thumbnail'); ?>
                  </div>
            <?php if($post_count ==3) { ?>
               </div>
            </div>
            <div class='clearboth'></div>
            <div>
          <?php }
          } else { ?>
               <div class="small-horiz-image">
                  <?php the_post_thumbnail('thumbnail'); ?>
                  </div>
          <?php }
      }
   endwhile;  // End while have_posts()
   if($post_count == 2) { ?>
            </div><!-- End .wrap-2-3 -->
   <?php } ?>
            </div>
            <div class="clearboth"></div>
            <?php /* Display navigation to next/previous pages when applicable */ ?>
            <?php if (  $wp_query->max_num_pages > 1 ) : ?>
               <div class="navigation">
                  <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></div>
                  <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>
               </div><!-- #nav-below -->
            <?php endif; ?>
<?php endif; // End if have_posts()
?>
   </div><!-- #content -->
</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

4 Responses to Multi-size Multi-Row Image Layout

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>