Alternating post styles in index - problem with a div not closing WordPress
- SOLVED
I am using the code below on a site I'm working on, and have a small issue.
As you see, I use three different post styles here: first one large on the top, and then repeating containers with two smaller posts (left & right, styled differently) inside. I use the containers with [[LINK href="http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/"]]jquery equal heights[[/LINK]], so that the two left & right-boxes get the same height, so the container needs to be there.
The problem is - if the number of posts on a page is an even number - 2, 4, 6... then only the first of the two smaller post styles inside the container is created, and the .news-small-container-div is never closed, screwing up the entire layout of the page...
Any suggestions?
<?php get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php global $paged; query_posts('posts_per_page=7&orderby=menu_order&order=DESC&cat=5&paged='.$paged); ?>
<?php if (have_posts()) : ?>
<?php $i = 0; ?>
<?php while (have_posts()) : the_post(); $i++; ?>
<?php if ($i == 1) { ?>
<div class="news-large clearfix">
<div class="news-large-image">
<a href="<?php the_permalink();?>"><?php the_post_thumbnail('news-big','class=alignleft wp-post-image size-medium'); ?></a>
</div>
<div class="news-large-text">
<div class="news-large-title">
<a href="<?php the_permalink();?>"><h1><?php the_title(); ?></h1></a>
</div>
<div class="entry-meta">
<?php the_time('l j. F, Y'); ?>
</div><!-- .entry-meta -->
<div class="news-large-excerpt">
<?php the_excerpt(); ?>
</div><!-- news-large-excerpt -->
</div><!-- news-large-text -->
</div><!-- news-large -->
<?php } ?>
<?php if ($i == 2) { ?>
<div class="news-small-container clearfix">
<div class="news-small left">
<div class="news-small-image">
<a href="<?php the_permalink();?>"><?php the_post_thumbnail('news-small'); ?></a>
</div><!-- news-small-image -->
<div class="news-small-text">
<div class="news-small-title">
<a href="<?php the_permalink();?>"><h2><?php the_title(); ?></h2></a>
</div><!-- news-small-title -->
<div class="entry-meta">
<?php the_time('l j. F, Y'); ?>
</div><!-- .entry-meta -->
<div class="news-small-excerpt">
<?php the_excerpt(); ?>
</div><!-- news-small-excerpt -->
</div><!-- news-small-text -->
</div>
<?php } ?>
<?php if ($i == 3) { ?>
<div class="news-small right">
<div class="news-small-image">
<a href="<?php the_permalink();?>"><?php the_post_thumbnail('news-small'); ?></a>
</div>
<div class="news-small-text">
<div class="news-small-title">
<a href="<?php the_permalink();?>"><h2><?php the_title(); ?></h2></a>
</div>
<div class="entry-meta">
<?php the_time('l j. F, Y'); ?>
</div><!-- .entry-meta -->
<div class="news-small-excerpt">
<?php the_excerpt(); ?>
</div><!-- news-small-excerpt -->
</div><!-- news-small-text -->
</div><!-- news-small-right -->
</div><!-- news-small-container -->
<?php } ?>
<?php if ($i == 3) { $i = 1; } ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
</div><!-- #content -->
<?php get_sidebar(); ?>
</div><!-- #container -->
<?php get_footer(); ?>
Answers (2)
Ivaylo Draganov answers:
Hello,
maybe adding this after <em>endwhile</em> will do the trick:
<?php if ($i == 2) { ?>
</div><!-- news-small-container -->
<?php } ?>
Sébastien | French WordpressDesigner answers:
<?php get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php global $paged; query_posts('posts_per_page=7&orderby=menu_order&order=DESC&cat=5&paged='.$paged); ?>
<?php if (have_posts()) : ?>
<?php $i = 0; ?>
<?php while (have_posts()) : the_post(); $i++; ?>
<?php if ($i == 1) { ?>
<div class="news-large clearfix">
<div class="news-large-image">
<a href="<?php the_permalink();?>"><?php the_post_thumbnail('news-big','class=alignleft wp-post-image size-medium'); ?></a>
</div>
<div class="news-large-text">
<div class="news-large-title">
<a href="<?php the_permalink();?>"><h1><?php the_title(); ?></h1></a>
</div>
<div class="entry-meta">
<?php the_time('l j. F, Y'); ?>
</div><!-- .entry-meta -->
<div class="news-large-excerpt">
<?php the_excerpt(); ?>
</div><!-- news-large-excerpt -->
</div><!-- news-large-text -->
</div><!-- news-large -->
<?php } ?>
<?php if ($i == 2) { ?>
<div class="news-small-container clearfix">
<div class="news-small left">
<div class="news-small-image">
<a href="<?php the_permalink();?>"><?php the_post_thumbnail('news-small'); ?></a>
</div><!-- news-small-image -->
<div class="news-small-text">
<div class="news-small-title">
<a href="<?php the_permalink();?>"><h2><?php the_title(); ?></h2></a>
</div><!-- news-small-title -->
<div class="entry-meta">
<?php the_time('l j. F, Y'); ?>
</div><!-- .entry-meta -->
<div class="news-small-excerpt">
<?php the_excerpt(); ?>
</div><!-- news-small-excerpt -->
</div><!-- news-small-text -->
</div>
<?php } ?>
<?php if ($i == 3) { ?>
<div class="news-small right">
<div class="news-small-image">
<a href="<?php the_permalink();?>"><?php the_post_thumbnail('news-small'); ?></a>
</div>
<div class="news-small-text">
<div class="news-small-title">
<a href="<?php the_permalink();?>"><h2><?php the_title(); ?></h2></a>
</div>
<div class="entry-meta">
<?php the_time('l j. F, Y'); ?>
</div><!-- .entry-meta -->
<div class="news-small-excerpt">
<?php the_excerpt(); ?>
</div><!-- news-small-excerpt -->
</div><!-- news-small-text -->
</div><!-- news-small-right -->
<?php } ?>
<?php if (($i%2=0)||($i%2=1)) { ?></div><!-- news-small-container --><? } ?>
<?php if ($i == 3) { $i = 1; } ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
</div><!-- #content -->
<?php get_sidebar(); ?>
</div><!-- #container -->
<?php get_footer(); ?>
i have remove this
</div><!-- news-small-container -->
I have add this
<?php if (($i%2=0)||($i%2=1)) { ?></div><!-- news-small-container --><? } ?>