Hi,
Not being a php expert, I am having trouble trying to set up a grid of posts using the $count function.
I would like to set my posts in the following fashion [9 posts to show on front page in total]in a grid style, of 4 rows by 3 columns:
9 8 7 6
5 blank 4 3
blank blank 2 1
I currently have this code in place [below] but it isn't working. Can anyone help me out here or perhaps point me in the right direction?
Thanks very much for any advice offered.
Posted 10 months ago #
Yes sure, we'll need to see your code please.
Hi WebTechGlobal,
Ummm, sorry about that...
Here it is.
<?php get_header(); ?>
<div id="content-container">
<div id="content">
<div class="navigation">
<div class="nav-previous"><?php next_posts_link('« Next page') ?></div>
<div class="nav-next"><?php previous_posts_link('Previous page »') ?></div>
</div><!--[if !IE]>end .navigation<![endif]-->
<?php if($paged < 2) { // front page ?>
<?php $count = 2 ?><?php while(have_posts()) : the_post(); ?>
<?php if($count==2 || $count==5 || $count==8) { ?>
<div class="normal-content<?php if($count==2) { echo ' first-row'; } ?>">
<?php } ?>
<div id="post-<?php the_ID(); ?>" class="post-alt">
<span class="imageLibrary"><a href="<?php the_permalink(); ?>" rel="bookmark"><p><?php echo get_post_meta($post->ID, "OVERLAY", true); ?></p><?php the_post_thumbnail(); ?></a></span>
<?php ?>
</div><!-- end id post -->
<?php if($count==1) { ?>
</div><!--[if !IE]>end .normal-content<![endif]-->
<?php } elseif($count==4 || $count==7 || $count==10) { ?>
<?php } ?>
<?php $count = $count + 1; ?>
<?php endwhile; ?>
<?php } else { ?>
<?php $count = 4 ?><?php while(have_posts()) : the_post(); ?>
<?php if($count==1 || $count==4 || $count==7 || $count==10) { ?>
<div class="normal-content<?php if($count==1) { echo ' first-row'; } ?>">
<?php } ?>
<?php if($count==3 || $count==3 || $count==6 || $count==9) { ?>
</div><!--[if !IE]>end .normal-content<![endif]-->
<?php } ?>
<?php $count = $count + 1; ?>
<?php endwhile; ?>
<?php } ?>
<div class="navigation">
<div class="nav-previous"><?php next_posts_link('« Next page') ?></div>
<div class="nav-next"><?php previous_posts_link('Previous page »') ?></div>
</div><!--[if !IE]>end .navigation<![endif]-->
</div><!--[if !IE]>end #content<![endif]-->
</div><!--[if !IE]>end #content-container<![endif]-->
<?php get_footer(); ?>
Posted 10 months ago #
These is another way to do this.
You create a div, your 9 boxes go inside that div. They automatically drop to each line or you use clear ever 3 posts. Not 100% sure.
Look at my site http://www.webtechglobal.co.uk
Posted 10 months ago #
First thing that stood out as strange to me was this...
<?php } else { ?>
<?php $count = 4 ?>Is there a reason for applying a value to $count?
I will show you the code from my theme in case it interests you. Let me play around with your code too. Below is all that is controlling the grid...
<!-- scrollable -->
<div class="scrollable">
<div class="items">
<div class="featured">
<?php while (have_posts()) : the_post();?>
<?php if( $postnum % 9 == 0 && $postnum !=0) : $postnum +9; ?>
<div class="clear"> </div>
</div>
<div class="featured">
<?php endif; ?>
<?php $postnum = $postnum + 1;?>
<!-- if movie values -->
<?php
Posted 10 months ago #
My themes code outputs different boxes so it might look a little complex. If you take away the various types of box content it gets simple...
!-- scrollable -->
<div class="scrollable">
<div class="items">
<div class="featured">
<?php while (have_posts()) : the_post();?>
<?php if( $postnum % 9 == 0 && $postnum !=0) : $postnum +9; ?>
<div class="clear"> </div>
</div>
<div class="featured">
<?php endif; ?>
<?php $postnum = $postnum + 1;?>
<!-- if movie values -->
<?php
$movie = get_post_custom_values("movie");
if (isset($movie[0])) {?>
<div title="Click to flip" class="flip">
<div class="flipWrap"> <img src="<?php $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'portfolio');echo $thumbnail[0]; ?>" /> </div>
<div class="flipData">
<p class="flipContent"><a href="<?php the_permalink() ?>"><strong>
<?php the_title(); ?>
</strong></a><br />
<?php excerpt('30'); ?>
<br />
<a href="<?php the_permalink() ?>">more details</a></span></p>
</div>
<a class="zoom-mov" title="<?php the_title(); ?>" href="<?php echo get_post_meta($post->ID, "movie", $single = true); ?>" rel="prettyPhoto[gallery]"> </a> </div>
<!--else image values -->
<?php }else {?>
<?php
$key = 'alt-thumb';
$themeta = get_post_meta($post->ID, $key, TRUE);
// decide style
if( get_post_meta($post->ID, 'wtgservice', TRUE) )
{
$thestyle = 'wtgservice';// currently has no css setup, simple causes no icon to be displayed
}
else
{
$thestyle = 'zoom';
}
if($themeta != '') {?>
<!-- if alt thumb do this -->
<div title="Click to flip" class="flip">
<div class="flipWrap"> <img src="<?php echo get_post_meta($post->ID, "alt-thumb", true);?>" /> </div>
<div class="flipData">
<p class="flipContent"><a href="<?php the_permalink() ?>"><strong>
<?php the_title(); ?>
</strong></a><br />
test1<?php excerpt('30'); ?>
<br />
<a class="readmore" href="<?php the_permalink() ?>">more details</a></span></p>
</div>
<a class="<?php echo $thestyle; ?>" title="<?php the_title(); ?>" href="<?php $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');echo $thumbnail[0]; ?>"rel="prettyPhoto[gallery]"> </a> </div>
<!-- else get the image values -->
<?php } else { ?>
<div title="Click to flip" class="flip">
<div class="flipWrap"> <img src="<?php $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'portfolio');echo $thumbnail[0]; ?>" /> </div>
<div class="flipData">
<p class="flipContent"><a href="<?php the_permalink() ?>"><strong>
<?php the_title(); ?>
</strong></a><br />
test2<?php excerpt('30'); ?>
<br />
<a class="readmore" href="<?php the_permalink() ?>">more details</a></span></p>
</div>
<a class="<?php echo $thestyle; ?>" title="<?php the_title(); ?>" href="<?php $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');echo $thumbnail[0]; ?>"rel="prettyPhoto[gallery]"> </a> </div>
<?php } ?>
<?php }?>
<?php endwhile;?>
</div>
</div>
<!-- end items -->
<div class="clear"> </div>
</div>
<!-- end scrollable -->
Posted 10 months ago #
You see there is an argument for movie, image, thumb.
Reduce that and your left with something more simple than your script I think.
Hi WebTechGlobal,
Thanks for providing me with your code.
Unfortunately, not sure what I am doing wrong, but I cannot get it to work.
You must log in to post.
