0

I'm pulling in posts from a specific category using twitter bootstrap carousel rotator. I've looking into double loops but I can't figure out how to implement it.

Here is my loop:

$query = array( 'posts_per_page' => 4, 'cat' => 3);
                    $queryObject = new WP_Query($query);
                    $count = 0;
                        if($queryObject):
                            while($queryObject->have_posts() ) : $queryObject->the_post();
                        $count++;

Pretty much it pulls in 4 posts(which I currently have up) from category 3

<div class="item <?php if($count === 1){
                        echo " active";
                    }elseif($count >=4){
                        echo " ";
                    } ?>"> 
                        <div class="span4">
                        <?php the_content();?>
                        </div><!--end of span4-->
                    </div>

What I'm trying to do is repeat the div element <div class="span4">, so essentially something like this. Originally what I have above with the if else statement I got <div class="item"> to have the class active on the first three post and on the fourth post just have nothing. With that it just wasn't rotating, so I'm trying this option.

<div class="item active">
<div class="span4"><?php the content();?></div>
<div class="span4"><?php the content();?></div>
<div class="span4"><?php the content();?></div>

EDIT: For some reason my code is being trimmed off.

I've tried experimenting with the double loop feature but it's not working as I want it too,maybe my logic is off, but with the double loop there's an offset which I don't want. Any suggestion would be nice.

Pastebin.

Thanks.

  • Whats the output? – M-R Jul 19 '13 at 18:40
0

The best solution is create a function that create the output. In addiction this gives more flexibility using function options.

The code, tested, is here:

<?php
function wp_bootstrap_carousel($args = '', $visible = 3, $active = 0) {
// cannot show more than 12 items at once
if ( ! intval($visible) || $visible > 12 ) return false;
  $query = new WP_Query($args);
  if ($query->have_posts() ) {
  $i = -1;
  $output = '';
      // calculate the span class depending on desired visible items
  $span = floor(12 / $visible);
     // if 12 is not a perfect multiple of visible items, calculate the residue 
  $span_residue = 12%$visible; 
  $slides = 0;
  while ( $query->have_posts() ) :
    $i++;
    $query->the_post();
        // set active only the desired active item
    $item_class = $i == $active ? 'item active' : 'item'; 
    $u = ( ($i == 0) || $i % ($visible) == 0 ) ? 0 : $u+1;
    if ( $u == 0 ) {
      $slides ++;
          // open item div if needed
      $output .= sprintf('<div class="%s">', $item_class);
    }
        $output .= sprintf('<div class="span%d">%s</div>', $span, get_the_title() );
        // close item div if needed
    if ( $u == ($visible-1) || $i == ($query->post_count-1) ) { 
      // when on last post we always need to close the current item div,
      // if total is not divisible by visible we insert a "fake" item
      if ( $u != ($visible-1) ) $span_residue += ( ($visible-1) - $u ) * $span;
      if ( $span_residue > 0 ) {
             $output .= sprintf('<div class="span%d">&nbsp;</div>', $span_residue);
          }
      $output .= '</div>';
    }
  endwhile;
  return array('items' => $output, 'total' => $query->post_count, 'slides' => $slides);
}
return false;
}


// query  args
$args = array(
  'posts_per_page' => -1,
  'cat' => 3
);

$active = 0; // the slide first visible
$carousel = wp_bootstrap_carousel($args, 5, $active);

if ( is_array($carousel) &&  $carousel['total'] > 0 ) :
?>

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
  <?php for ($i = 0; $i < $carousel['slides']; $i++ ) : ?>
    <li data-target="#myCarousel" data-slide-to="<?php echo $i; ?>"<?php if ($i==$active) { ?> class="active"<?php } ?>></li>
  <?php endfor; ?>
  </ol>
  <!-- Carousel items -->
  <div class="carousel-inner">
    <?php echo $carousel['items'];  ?>
  </div>
</div>

<?php endif; ?>
  • It seems to work. Only thing though is that extra div at the end is not breaking into a new "item" with new posts to rotate through. I been playing with it and got it kind of, my php is not the greatest, but that extra blank div at the end seems to through it off. – jose Jul 20 '13 at 19:58
  • yes @jose there was 2 errors in previous code, now it should work. – gmazzap Jul 21 '13 at 0:36
  • Sorry for getting back to you late. It works. Thanks a lot. I'm just editing it too pull in the thumbnail, title and excerpt. I don't want to ask too much from you haha. Thanks a bunch! – jose Jul 22 '13 at 15:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.