layout

Rows of Equal Height Boxes

The template below was written for the Twenty-Ten theme to show how to create rows of equal height boxes when the contents differ in length.

The frame is in two parts: top-frame and bottom-frame.

 

 

 

 

 

 

 

 

 

 

 

The bottom-frame ‘slides’ up and down behind the top frame to adjust the height.  Note that the range is limited – too much content in a frame will open a gap.

<?php
/*
Template Name: Equal Height

This template demonstrates a technique for showing rows of content
enclosed in equal-height frames.

*/

get_header(); ?><!-- file:equalheight.php in twentyten-child -->

<?php   // Some sample CSS
   $style = <<< END_OF_STYLE
<style type='text/css'>
.item_row_wrapper { width: 100%; margin-top: 10px; }
.item_row_header { height: 54px;
  background: url("http://localhost/test/wp-content/uploads/2011/02/top-frame.png")
  repeat top left;}
.item_row_header_1 { width: 200px; }
.item_row_header_2 { width: 400px; }
.item_row_header_3 { width: 600px; }
.item_row_header_4 { width: 800px; }
.item_row { background: url("http://localhost/test/wp-content/uploads/2011/02/bottom-frame.png")
    repeat-x scroll bottom left; min-height: 20px; overflow: hidden;
    }
.item_row_4 { width: 800px; }
.item_row_3 { width: 600px; }
.item_row_2 { width: 400px; }
.item_row_1 { width: 200px; }
.item_class_wrapper { width: 200px; min-height: 110px; float: left; }
.item_class { width: 140px; margin-left: 30px;
   overflow: hidden; max-height: 280px; }
img.item_image { width: 100% !important; height: auto !important; }
.item_bottom_pad { min-height: 20px; }
.clear { clear: both; }
</style>
END_OF_STYLE;
   echo $style;

   $post_type = 'parks';
   $posts_per_row = 3;
   $posts_per_page = 8;
   if (!$paged = get_query_var('paged')) {
      if (!$paged = get_query_var('page')) {
         $paged = 1;
      }
   }
   $args = array(
      'post_type' => $post_type,
      'posts_per_page' => $posts_per_page,
      'paged' => $paged,
      'caller_get_posts' => 1,
   );
   query_posts($args);
?>
      <div id="container">
         <div id="content" role="main">

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

            <?php if (($post_counter % $posts_per_row) == 0  || $posts_per_row == 1) {
               if ($post_counter > 1) {
                  write_buffer($post_counter,$posts_per_row);
               }
               ob_start();  // Start a buffer
            }
            ++$post_counter;
            echo "<div class='item_class_wrapper'>\n";  // Start one post
            echo "<div class='item_class'>\n";
            // Output post data here ?>
            <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
               <h1 class="entry-title"><?php the_title(); ?></h1>

               <div class="entry-content">
                  <?php the_content(); ?>
               </div><!-- .entry-content -->
               <?php
               echo "</div><!-- End of item_class -->\n";
               echo '<div class="item_bottom_pad"></div>';
               echo "</div><!-- End of item_class_wrapper -->\n";  // End of post
               ?>

         <?php endwhile; // end of the loop. ?>
      <?php write_buffer($post_counter,$posts_per_row); ?>
<?php endif; ?>

            <div id="nav-below" class="navigation">
               <div class="nav-previous"><?php previous_posts_link( '%link', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div>
               <div class="nav-next"><?php next_posts_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', 'twentyten' ) . '</span>' ); ?></div>
            </div><!-- #nav-below -->

         </div><!-- #content -->
      </div><!-- #container -->

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

<?php function write_buffer($item_counter,$items_per_row) {
      $op = ob_get_clean();
      $count = ($item_counter % $items_per_row) ?
         ($item_counter % $items_per_row) : $items_per_row;
      echo "<div class='item_row_wrapper'>\n";  // Start a new row
      echo "<div class='item_row_header item_row_header_$count'>";
      echo '</div><!-- End item_row_header -->';
      echo "<div class='item_row item_row_$count'>\n";
      echo $op;
      echo "<div class='clear'></div>";
      echo "</div><!-- End of item_row -->\n";
      echo "<div class='clear'></div>";
      echo "</div><!-- End of item_wrapper -->\n";
   }
?>

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:

Continue reading

Align Posts in a Row, aka Posts in Columns

If you want to have several posts in a row across the page, you can use code similar to this. This code is an example.  You will need to customize it to your theme.

The important things to note are:

  • the use of $post_counter to create the divs for each row
  • the creation of a div with class=”post_class” to contain each post
  • the use of CSS to set the width of post_row and post_class

You will need to add the CSS to float the posts left, set the width, and probably set some margins.  There is some sample CSS following the code.  Continue reading