CODEWITHSUNDEEP
phpwordpresspodscms
Matheus Costa
Matheus Costa

Reputation: 25

PHP loop block of divs every six <li>

All right guys, I need a little help for a loop. I have a query that get's all images for my database, and I need to separate them in blocks of 6. Every 6 images, one block with div. Somethign like:

<div class='item'>
  <li><img></li>
  <li><img></li>
  <li><img></li>
  <li><img></li>
  <li><img></li>
  <li><img></li>
</div>


<div class='item'>
  <li><img></li>
  <li><img></li>
  <li><img></li>
  <li><img></li>
  <li><img></li>
  <li><img></li>
</div>

My code is for the Wordpress Pods Plugin:

<div class="carousel-inner">
<?php 
    $cat = new Pod("galeria"); //nome do pod
    $records = $cat->findRecords("t.ID"); //listado pelo titulo e limite dos pods
?>
<?php if($records%6 == 0): echo $records;?>
    <div class="item">
<?php elseif($records == 6): ?>
    <div class="item active">     
<?php endif; ?>
    <div class="row">
        <?php 
            while ($cat->fetchRecord()) :
                $id = $cat->get_field("ID"); //pega id
                $imagens = $cat->get_field("imagens"); //lista de imagens
                $thumb_url = wp_get_attachment_url( get_post_thumbnail_id( $id ) );
                $permalink = $cat->field('permalink');
        ?>
            <div class="col-sm-2"><a href="<?php echo $permalink; ?>" class="thumbnail"><img src="<?php echo $thumb_url; ?>" alt="Image" class="img-responsive"></a></div>  
        <?php endwhile; ?>
    </div><!--/row-->
<?php if($records%6 == 0): ?>
    </div><!--/item-->
<?php endif; ?>

UPDATE 22/07 - 03:45

Used the code you provide and it's awesome. If someone needs it, this is my final code:

 <div class="carousel-inner">
<?php 
    $cat = new Pod("galeria"); //the Pod name
    $records = $cat->findRecords("t.ID"); //listing items by ID
    $i = 0;
?>
<?php 
    while ($cat->fetchRecord()) : 
        $id = $cat->get_field("ID"); //get id
        $imagens = $cat->get_field("imagens"); //list images
        $thumb_url = wp_get_attachment_url( get_post_thumbnail_id( $id ) ); // the thumbnail url
        $permalink = $cat->field('permalink'); // the pods permalink
?>

<?php if($i % 6 == 0): ?> // every 6 images
        <div class="item <?php if( $i == 0 ){ echo 'active'; //if is the very first, add class 'active' } ?>">
            <div class="row">
<?php endif; ?>
<?php $i++; ?> // increment the $i
                <div class="col-sm-2"><a href="<?php echo $permalink; ?>" class="thumbnail"><img src="<?php echo $thumb_url; ?>" alt="Image" class="img-responsive"></a></div>  // the <li> item

<?php if ( $i != 0 && $i % 6 == 0): ?> // close the .item div every 6 images
            </div>  <!--/row-->
        </div><!--/item-->
<?php endif; ?>

<?php  endwhile; ?>

<?php if ( $i % 6 != 0 ): ?>
        </div><!--/row-->
    </div><!--/item-->
<?php endif; ?>

Upvotes: 0

Views: 647

Answers (1)

doublesharp
doublesharp

Reputation: 27657

You need to iterate a variable to compare to your modulus of 6 to determine what to print out. Increment it on each loop and check the value to determine what container to output, starting with 0.

Outside your loop you will need to check to see if $i % 6 != 0 as well so that you can close an incomplete final set. The full mock code would look like this:

<?php $i = 0 ?>
<?php while ( $cat->fetchRecord() ) : $i++; ?>
    <!-- open on every sixth record including the first -->
    <?php if ( $i % 6 == 0 ): ?>
        <div class="item">  
    <?php endif; ?>

        <!-- your items go here -->
        <?php 
        $id = $cat->get_field("ID"); //pega id
        echo $id;
        ?>

    <!-- close every sixth result, skipping the first -->
    <?php if ( $i != 0 && $i % 6 == 0 ): ?>
        </div><!--/item-->
    <?php endif; ?>
<?php endwhile; ?>

<!-- close in case of incomplete final set -->
<?php if ( $i % 6 != 0 ): ?>
    </div><!--/item-->
<?php endif; ?>

Upvotes: 1

Related Questions