PHP Loop Question

Question

I have an application that contains a gallery page of user uploaded images. I am trying to show the images on a page using a foreach loop, but am having some problems with building the foreach loop.

This is the way the HTML is supposed to be formed

<div class="item">
     <ul>
     <li><a href="images/gallery/love1.jpg" rel="example1" ><img src="images/gallery/thumb_love1.jpg" alt="#" /></a></li>
     <li><a href="images/gallery/love2.jpg" rel="example1" ><img src="images/gallery/thumb_love2.jpg" alt="#" /></a></li>
     <li><a href="images/gallery/love3.jpg" rel="example1" ><img src="images/gallery/thumb_love3.jpg" alt="#" /></a></li>
     <li><a href="images/gallery/love4.jpg" rel="example1"><img src="images/gallery/thumb_love4.jpg" alt="#" /></a></li>
     <li><a href="images/gallery/love5.jpg" rel="example1"  ><img src="images/gallery/thumb_love5.jpg" alt="#" /></a></li>
     <li><a href="images/gallery/love6.jpg" rel="example1"><img src="images/gallery/thumb_love6.jpg" alt="#" /></a></li>
     <li><a href="images/gallery/life1.jpg" rel="example1" ><img src="images/gallery/thumb_life1.jpg" alt="#" /></a></li>
     <li><a href="images/gallery/life2.jpg" rel="example1"><img src="images/gallery/thumb_life2.jpg" alt="#" /></a></li>
     <li><a href="images/gallery/life3.jpg" rel="example1"><img src="images/gallery/thumb_life3.jpg" alt="#" /></a></li>
     </ul>
    </div><!-- end item -->

So basically when the LI hits 9 items, break and start a new DIV of class="item"

Here is the PHP code I have been trying to work with

<?php
                $x = range(1,100);
                $counter = 1;
                foreach($x as $item):
                if($item == 9) {
            ?>
                <div class="item">
                    <ul>
                        <?php foreach($pictures->result() as $p): ?>
                         <li><a href="images/gallery/<?=$p->category;?>/<?=$p->photo_name;?>" rel="example1" ><img src="images/gallery/<?=$p->category;?>/thumb_<?=$p->photo_name;?>" alt="#" /></a></li>
                    <?php endforeach; ?>
                    </ul>
                </div><!-- end item -->
                <?php $counter = 1; 
                } else {
                    $counter++;
                } ?>
            <?php endforeach; ?>

I have tried everything, but can't figure out how to make this work. Thanks in advance for any and all help!

Answer 1

Why are you starting a new div? Seems like it should be all one list. So you would put all the images in one list and control their layout with CSS.

If this is incorrect then what you want to use is array_chunk

untested...

$picture_chunks = array_chunk( $pictures->result(), 9 ); // split the long array into a multidimensional array with 9 objects in each

<?php foreach( $picture_chunks as $chunk ): ?> // loop through the outer array creating the <div><ul></ul></div>
<div class="item">
    <ul>
    <?php foreach( $chunk as $p ): ?> //loop through the inner array creating the LIs
        <li><a href="images/gallery/<?=$p->category;?>/<?=$p->photo_name;?>" rel="example1" ><img src="images/gallery/<?=$p->category;?>/thumb_<?=$p->photo_name;?>" alt="#" /></a></li>
    <?php endforeach; ?>
    </ul>
</div>
<?php endforeach; ?>

Answer 2

If you need to have it start a new div on every ninth item, you need to use a modulus.

Below is totally untested and for sure wrong, but the idea is whenever your $p is divisible by 9, you are able to do something special, like close and open a new div.

for($i=0;$i<10;$i++)
{
  if($i % 9)
  {
   <li><a href="images/gallery/<?=$p->category;?>/<?=$p->photo_name;?>" rel="example1" ><img src="images/gallery/<?=$p->category;?>/thumb_<?=$p->photo_name;?>" alt="#" /></a></li>
   echo '</div>;
   echo '<div>';
  }else{
    <li><a href="images/gallery/<?=$p->category;?>/<?=$p->photo_name;?>" rel="example1" ><img src="images/gallery/<?=$p->category;?>/thumb_<?=$p->photo_name;?>" alt="#" /></a></li>
  }
}

Answer 3

I think you may be over complicating. try the below. I've not added your gallery variables as I couldn't test them, but it should work as you were wanting.

        <div class="item"> <ul>
<?php
    foreach(range(1,100) as $item){
        if($item%9 == 0){
?></ul></div>
        <div class="item"> <ul>
<?php   } ?>
    <li> insert gallery output here <?php echo $item ?></li>
<?php   
    }

?>          
</ul></div>