custom grid loop WordPress
- SOLVED
I hope this is clear. I have added a screenshot of how page looks at present
I'm working with twitter bootstrap "WordPress" and need to create a loop that restarts every 4 images (an archive template) At the moment I have no problem showing in a "grid",
<div class="clearfix gallery">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('span3'); ?> role="article">
<?php get_the_image( array( 'custom_key' => array( 'medium' ), 'size' => 'medium' ) ); ?>
<h3 class="h2"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
</article> <!-- end article -->
<?php endwhile; ?>
</div>
Here is what happens, the <strong><div class="clearfix gallery"></strong>along with bootstrap css allows the first post to have no margin. <strong>span3</strong> class with css wrapped in the div above creates rows of 4, the first post has no margin wrapped in <strong><div class="clearfix gallery"></strong>. Every 4 posts I need to wrap <div class="clearfix gallery"> and then the first post will have no margin, the second row of 4 posts, the first post will have no margin...
<strong>just to clarify, I want every four posts wrapped in the <div class="clearfix gallery"> ending with a div of course</strong>
Answers (5)
Gabriel Reguly answers:
Hi Rick,
Please try this code:
<div class="clearfix gallery">
<?php $i=0; ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('span3'); ?> role="article">
<?php get_the_image( array( 'custom_key' => array( 'medium' ), 'size' => 'medium' ) ); ?>
<h3 class="h2"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
</article> <!-- end article -->
<?php if ( 0 == ++$i%4 ) { echo '</div>
<div class="clearfix gallery">';}?>
<?php endwhile; ?>
</div>
Regards,
Gabriel
--- Edit ---
Rick warnend me that he got an empty div, so this is the amended version of the code:
<div class="clearfix gallery">
<?php $i=0; $j = $wp_query->post_count; ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('span3'); ?> role="article">
<?php get_the_image( array( 'custom_key' => array( 'medium' ), 'size' => 'medium' ) ); ?>
<h3 class="h2"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
</article> <!-- end article -->
<?php if ( 0 == ++$i%4 && $i < $j ) { echo '</div>
<div class="clearfix gallery">';}?>
<?php endwhile; ?>
</div>
Rick Bible comments:
this is the trick, thanks. I will award you!
Rick Bible comments:
I awarded you the prize, works but leaves an extra <div class="clearfix gallery"></div> at the end which is empty... any way to remove that?
flint_and_tinder answers:
I've done something similar on my portfolio site I'm yet to launch.
I've taken this straight from mine, so you'll have to adapt to your code. But essentially start with the following:
<?php $count = 0; ?>
<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?> // THIS IS THE START OF THE POST LOOP
<?php
if($count % 4 == 3){
$extra_class = "clearfix gallery";
}
?>
Then where you have the element you wish to add the class to, do something similar to this:
<div class="<?php echo $extra_class ?>" id="post-<?php the_ID(); ?>">
I'm, no php expert, so let me know how it goes.
Amend...
Forgot to add you need to include the following before your endwhile statement in the loop:
<?php $count++; ?>
Rick Bible comments:
this is close, though $exra class is showing blank
Rick Bible comments:
actually its just not working
Rick Bible comments:
just to clarify, I want every four posts wrapped in the <div class="clearfix gallery"> ending with a div of course
Abdelhadi Touil answers:
Hi.
I don't know if I understand what you are looking for, but if you mean that you want to make each first post in each row without margin (margin: 0), then I'll suggest to use jQuery like described in this page:
[[LINK href="http://api.jquery.com/eq/"]]http://api.jquery.com/eq/[[/LINK]]
For me I use the method above in such situation. If I didn't understand what you mean, please explain me more.
Good luck.
Albert Shala answers:
Try this, I use this with the 960 grid but you can modify it for the boostrap class names:
<?php $column = ($column == '') ? 'alpha' : (($column == 'alpha') ? 'middle' : (($column == 'middle') ? 'omega' : 'first' )); ?>
in your div add like so: <article id="post-<?php the_ID(); ?>" <?php echo $column;?> role="article">
Make sure it's within the loop.
Dbranes answers:
Hi, you could try this in your stylesheet:
.gallery article:nth-child(4n){clear:both;margin-left:0px !important;padding-left:0px !important;}
this selects every 4th article-tag inside the .gallery div in your code example above.
(you can then adjust the css to your needs)
Hope this helps.