Search code examples
phphtmlzurb-foundationzurb-foundation-5

PHP glob is returning mysterious html element on foreach loop

Ok, without going into a lot of details, I'm using glob to return images from a folder. After I do a foreach to loop through the file contents and add them into an unordered list with the li element but what is happening is the foreach is returning the correct images and adding an empty li element in between, ruining the ul.grid. 

            <ul class="small-block-grid-1 medium-block-grid-4">
            <?php 
        $files = array();
        $files = glob('images/01/*.png'); // get all file names
        if(!empty($files)){
        natsort($files);
        $i = 0;
            foreach($files as $file){ // iterate files
              $i++;
              if(is_file($file))
                echo '<li class="floatiholder"> 
                      <span class="floati"> '.$i.' </span> 
                      <img src="'.$file.'" id="img'.$i.'"> 
                      <li>'; 
                }   
        }
        ?>
        </ul>

I'm using Zurb Foundation 5 so the classes (small-block-grid-1 and medium-block-grid-4), basically just order the elements inside the ul.

When I run the code this is what's happening:

li error

I've generated ul's like this before reading from a database and I've never had a problem, but this is my first time using glob so I'm suspecting it has something to do with it and I can't pinpoint it.

Any other information I can provide let me know and I will gladly post it :).

Solution

  • You are not ending the li element </li>. Instead you are opening another <li> which is rendering poorly in the browser.

    Sometimes browsers will try and correct the issue, but having the correct HTML is the safest option and doesn't leave anything open for interpretation by the browser.

    Here is the correct code:

    echo '<li class="floatiholder"> 
        <span class="floati"> '.$i.' </span> 
        <img src="'.$file.'" id="img'.$i.'"> 
      </li>';