upload and display images

[anfetienne]

Hi,

i went through a tutorial on how to display images stored with a directory and it came out good but i have a problem.....when i upload less than 5 files it displays the 1 image and then shows broken image placeholders. If i don't upload in sums of 5 then these broken image places holders keep showing, and instead of the images displaying row by row it goes by columns.

Below is the code to display....can someone tell me where i've gone wrong or how i can change this so it displays the uploaded images in rows of 5?

<?php
 
$folderPath= $id;
$full_path=$fileL;
 
$path = "$folderPath"; // path to the directory to read ( ./ reads the dir this file is in)
if ($handle = opendir($path)) {
   while (false !== ($file = readdir($handle))) {
    if ($file != "." && $file != "..") {
        if(!is_dir($file)){
            $item[] = $file;
            }
       }
   }
   closedir($handle);
}
 
$total_items = count($item);
$max_items = ceil($total_items / 5); // items per <td>
$start = 0;
$end = $max_items
 
//generate the table
?>
<center>
<table width="650px" border="1" cellspacing="5" cellpadding="5" align="center">
  <tr>
<?php
require_once 'js/iframeRS.js'; 
    for($i=0; $i<5; $i++){
        if($i != 0){
            $start = $start + $max_items;
            $end   = $end + $max_items;
        }
 
        echo "<td>";
        for($x = $start; $x < $end; $x++){
      $imageL= $path.$item[$x];
      $img_path="http://ve-creative.com/test/8/$imageL";
            // display the item
            echo '<center><p><img src= "'.$path.$item[$x] .'" height="100" width="100"></p></center>';
            echo "<input type=CHECKBOX name=$imageL>";
            echo "<a href=imgEdit.php?img=$img_path>[Edit / resize]</a><br>";        }
    echo "</td>";
    }
 
    ?>
  </tr>
</table>
 
        </div>          <!--end:mult.pictures-->
 
 
          <table width="100%" border="0" cellpadding="5">
 

[devsusen]

After looking at a glance I found two problem in your code.

First one is

$max_items = ceil($total_items / 5); // items per <td>

if the $total_items is less 5 then the expression will always produce 1 in $max_items.

Second is in your 2 nested for loop in the display part. For the outermost loop you will always get 5 cells in the table. Each cell will contain atleast one image placeholder and related link.

I think you should check the total no. of images while displaying them in the table. Here is the snippet

<center>
<table width="650px" border="1" cellspacing="5" cellpadding="5" align="center">
  <tr><td>
<?php
for($n=0; $n<$total_items; $n++) {
   if($n !=0 && fmod($n, 5) == 0) {
      echo "</td><td>";
   }
   echo '<center><p><img src= "'.$path.$item[$x] .'" height="100" width="100"></p></center>';
   echo "....other lines.....";
}
?>
  </tr>
</table>

Hope this will help.

[anfetienne]

hi, it helped some what....it shows the images perfectly fine and doesn't show the broken placeholder but it is displaying in 1 column....i am trying to get it to show in rows at max of 5 images per row

[devsusen]

@anfetienne
Your display logic is not very clear to me. Can you put the dummy output HTML code for two cases like 3 images and 7 images. Once I see the HTML code I may try to help you with the php coding.

[Markus]

Check out this old post. It'll help you display your images in rows and columns.

[devsusen]

@Markus
I have gone through the above mentioned thread. Now it seems to me that display should looks like a martix, so here is another version of code for that:

<center>
<table width="650px" border="1" cellspacing="5" cellpadding="5" align="center">
  <tr><td>
<?php
$r = 0;
for($n=0; $n<$total_items; $n++) {
   if($n !=0 && fmod($n, 5) == 0) {
      echo "</tr><tr>";
   }
   echo '<td><center><p><img src= "'.$path.$item[$x] .'" height="100" width="100"></p></center>';
   echo "....other lines.....</td>";
}
 
if($r>0) {
  for($m=$r; $m<5; $m++) {
   echo "<td>&nbsp;</td>";
  }
}
?>
  </tr>
</table>

[anfetienne]

thank you guys for the help and advice i will test the last code and see how it displays

[anfetienne]

hi it still does not work....it shows the last 2 images in a row like it should....

here is the web address to the testing page....upload images and see what it does

http://ve-creative.com/test/8/templateEdit2.php

[anfetienne]

here is the dummy html code

<center><p><img src= "upload/71947137/1.jpg" height="100" width="100"></p></center><input type=CHECKBOX name=upload/71947137/1.jpg><a href=imgEdit.php?img=http://ve-creative.com/test/8/upload/71947137/1.jpg>[Edit / resize]</a><br></td><center><p><img src= "upload/71947137/2.jpg" height="100" width="100"></p></center><input type=CHECKBOX name=upload/71947137/2.jpg><a href=imgEdit.php?img=http://ve-creative.com/test/8/upload/71947137/2.jpg>[Edit / resize]</a><br></td><center><p><img src= "upload/71947137/3.jpg" height="100" width="100"></p></center><input type=CHECKBOX name=upload/71947137/3.jpg><a href=imgEdit.php?img=http://ve-creative.com/test/8/upload/71947137/3.jpg>[Edit / resize]</a><br></td><center><p><img src= "upload/71947137/4.jpg" height="100" width="100"></p></center><input type=CHECKBOX name=upload/71947137/4.jpg><a href=imgEdit.php?img=http://ve-creative.com/test/8/upload/71947137/4.jpg>[Edit / resize]</a><br></td><center><p><img src= "upload/71947137/5.jpg" height="100" width="100"></p></center><input type=CHECKBOX name=upload/71947137/5.jpg><a href=imgEdit.php?img=http://ve-creative.com/test/8/upload/71947137/5.jpg>[Edit / resize]</a><br></td>   </tr>
 
 </table>
 

[devsusen]

In IE and FF its displaying perfectly alright. I have tested by uploading 3 and 5 images. Have u corrected ur code? In the dummy HTML code I found the </td> tag missing.

[anfetienne]

i've coorected the code somewhat and it lines up almost as it should....then only problem now is there is a blank space at the start of the 1st row as if there should be an image there.

[Markus]

If you look at the source code your page produces, you will see you output an empty <td>. Looking at the code in this post, you can see on line 3 a <td> that shouldn't be there. Remove it, job's a good'un.

[anfetienne]

THAT'S GREAT!!!!! thanks for all the help.....what took you a few posts I couldn't even get a reply on other forums....thanks alot!!!

[Markus]

That's why Bytes.com rules.

Take care,

Markus.

[anfetienne]

is it possible to upload images and have them renamed like below???

1
1b
2
2b
3
3b
4
4b etc etc