Link to home
Start Free TrialLog in
Avatar of satmanuk
satmanukFlag for United Kingdom of Great Britain and Northern Ireland

asked on

display images from directory in PHP loop

hi all,


i have a dynamic form where i am trying to show images from a directory in the last column of my table.

My table is dynamic because it has as many records as there are images within a chosen directory.

Something i want to add is showing each image in the last column of the table.

If you look at my code in the loop you will see i am echo'ing a fixed image at the moment. So naturally this same image is displayed on each row.

This image needs to be different on each row and in total all images in the chosen folder($dir) will be listed.

Hope im making sense
<?php
 
// declare what url to look in and count each file within that directory
$dir = "images/temp/member/";
$count = count(glob($dir . "*"));
 
 
// test if count has found the files in the temp image dir.
echo "count is";
echo $count;
 
 
// Open the folder for display
$dir_handle = @opendir($dir) or die("Unable to open $dir");
 
 
 
// asign the amount of files in the temp dir above to the variable $nFish
$nFish = $count;
 
echo "<form id=\"form1\" name=\"form1\" method=\"post\" action=\"array3.php\">\n";
echo "  <table width=\"600\" border=\"0\">\n";
echo "    <tr>\n";
echo "      <td><p>Amount of Fish (" . $nFish . ")</p>\n";
echo "      <p>&nbsp; </p></td>\n";
echo "      <td>fish_type</td>\n";
echo "      <td>bait</td>\n";
echo "      <td>notes</td>\n";
echo "      <td>Date</td>\n";
echo "      <td>Image Preview</td>\n";
echo "    </tr>\n";
 
 
 
for ($i = 1; $i <= $nFish; $i++) {
  echo "    <tr>\n";
  echo "      <td><div align=\"center\">" . $i . "</div></td>\n";
  echo "      <td><input name=\"fish_type_$i\" type=\"text\" id=\"fish_type_$i\" /></td>\n";
  echo "      <td><input name=\"bait_$i\" type=\"text\" id=\"bait_$i\" /></td>\n";
  echo "      <td><input name=\"notes_$i\" type=\"text\" id=\"notes_$i\" /></td>\n";
  echo "	  <td><input type=\"text\" id=\"date$i\" name=\"date$i\" /></td>\n";
  echo "	  <td><button id=\"trigger\">Click here for Calendar</button></td>";
  echo "	  <td><img src=\"images/bart_logo.jpg\" width=\"264\" height=\"102\" /></td><br>";
  echo "    </tr>\n";
?>
<script type="text/javascript">
  Calendar.setup(
    {
      inputField  : "date<?php echo $i; ?>",         // ID of the input field
      ifFormat    : "%Y-%m-%d",    // the date format
      button      : "trigger"       // ID of the button
    }
  );
</script>
 
<?php  
  echo "    </tr>\n";
}
 
echo "    <tr>\n";
echo "      <td colspan=\"4\"><div align=\"center\">\n";
echo "        <input type=\"submit\" name=\"Submit\" value=\"Submit\" />\n";
echo "      </div></td>\n";
echo "    </tr>\n";
echo "  </table>\n";
echo "</form>\n";
 
?>

Open in new window

Avatar of slouko
slouko
Flag of Finland image

I didn't get the point of ID's used there.
And the javascript between every row.

<?php
 
// declare what url to look in and count each file within that directory
$dir = "images/temp/member/";
#$count = count(glob($dir . "*"));
// Note: just get the list first, count if needed
$images = glob($dir."*");
$count = count($images);
 
// test if count has found the files in the temp image dir.
echo "count is ",$count;
 
// Open the folder for display
#$dir_handle = @opendir($dir) or die("Unable to open $dir");
// Note: not needed, we have the list already
 
// asign the amount of files in the temp dir above to the variable $nFish
#$nFish = $count;
// Note: not needed either
 
echo <<<EOS
<form id="form1" name="form1" method="post" action="array3.php">
  <table width="600" border="0">
    <tr>
      <td><p>Amount of Fish ($count)</p>
      <p>&nbsp; </p></td>
      <td>fish_type</td>
      <td>bait</td>
      <td>notes</td>
      <td>Date</td>
      <td>Image Preview</td>
    </tr>
EOS;
 
// Note: I'm assuming you are gonna list here the list of images? "bart_logo.jpg" :-P
// Note: I don't get the point of your $i id used there. Order of images may change, you should have an index, but here we go
$i = 1;
foreach ($images as $img)
{
  echo <<<EOS
    <tr>
      <td><div align="center">" . $i . "</div></td>
      <td><input name="fish_type_$i" type="text" id="fish_type_$i" /></td>
      <td><input name="bait_$i" type="text" id="bait_$i" /></td>
      <td><input name="notes_$i" type="text" id="notes_$i" /></td>
      <td><input type="text" id="date$i" name="date$i" /></td>
      <td><button id="trigger">Click here for Calendar</button></td>";
      <td><img src="images/$img" width="264" height="102" /></td><br>";
    </tr>
 
<script type="text/javascript">
  Calendar.setup(
    {
      inputField  : "date $i",         // ID of the input field
      ifFormat    : "%Y-%m-%d",    // the date format
      button      : "trigger"       // ID of the button
    }
  );
</script>
    </tr>
EOS;
  ++$i;
}
 
echo <<<EOS
    <tr>
      <td colspan="4"><div align="center">
        <input type="submit" name="Submit" value="Submit" />
      </div></td>
    </tr>
  </table>
</form>
EOS;
 
?>

Open in new window

Avatar of satmanuk

ASKER

what i have is a page with an applet for uploading images. This applet can accept multiple images. Once the user select the pics they want to upload they get redirected to the page with the form.

What im doing is counting the amount of pics that were uploaded to the temp folder and then showing a table where there is a row for each picture. Here the user will enter details on each picture. Then after this that info will go into a database.

I use $i to give each input field a unique id for the database entry.

I assume this is right, but i am no expert i just try and learn and apply some logic to it. When it comes to efficient coding, well that comes after i make the thing work that im trying to do.

To put it simple im no php programmer but yet i make web sites that use php and mysql. :-P
Well. You should have some kind of a relation between the name and id. Now there isn't such thing.
We have only some images and counting these will give us only a number of images we have got.
What if any images added or removed and glob() order changes. Id's are not matching anymore.
If you are going to use database, you should read that info there and keep them indexed.
right...i think we may be drifting from my question

The code looks completely different using code i ain't seen before.

Seeing im a noob and would rather learn at my pace, could you just advise how i can get the names of the images to be in my for loop?

so where bart logo is i will have the image name.

Thats all i want. from there im ok and no doubt i will make a few errors but im learning. Re writing my code seems unnesecery at the moment.

FWIW - what i have done is working fine. I just want to preview the image at the end of the row. in any order. so long as each row has the different image found in the dir.

I have tidy;d my code a little

PS - go easy on me :)
<?php
 
// declare what url to look in and count each file within that directory
$dir = "images/temp/melvin.baynham@ntlworld.com/";
$nFish = count(glob($dir . "*"));
 
 
// test if count has found the files in the temp image dir.
//echo "count is";
//echo $count;
 
 
// Open the folder for display
$dir_handle = @opendir($dir) or die("Unable to open $dir");
 
 
 
// asign the amount of files in the temp dir above to the variable $nFish
//$nFish = $count;
 
echo "<form id=\"form1\" name=\"form1\" method=\"post\" action=\"array3.php\">\n";
echo "  <table width=\"600\" border=\"0\">\n";
echo "    <tr>\n";
echo "      <td><p>Amount of Fish (" . $nFish . ")</p>\n";
echo "      <p>&nbsp; </p></td>\n";
echo "      <td>fish_type</td>\n";
echo "      <td>bait</td>\n";
echo "      <td>notes</td>\n";
echo "      <td>Date</td>\n";
echo "      <td>Image Preview</td>\n";
echo "    </tr>\n";
 
 
 
for ($i = 1; $i <= $nFish; $i++) {
  echo "    <tr>\n";
  echo "      <td><div align=\"center\">" . $i . "</div></td>\n";
  echo "      <td><input name=\"fish_type_$i\" type=\"text\" id=\"fish_type_$i\" /></td>\n";
  echo "      <td><input name=\"bait_$i\" type=\"text\" id=\"bait_$i\" /></td>\n";
  echo "      <td><input name=\"notes_$i\" type=\"text\" id=\"notes_$i\" /></td>\n";
  echo "	  <td><input type=\"text\" id=\"date$i\" name=\"date$i\" /></td>\n";
  echo "	  <td><button id=\"trigger\">Click here for Calendar</button></td>";
  echo "	  <td><img src=\"images/bart_logo.jpg\" width=\"264\" height=\"102\" /></td><br>";
  echo "    </tr>\n";
?>
<script type="text/javascript">
  Calendar.setup(
    {
      inputField  : "date<?php echo $i; ?>",         // ID of the input field
      ifFormat    : "%Y-%m-%d",    // the date format
      button      : "trigger"       // ID of the button
    }
  );
</script>
 
<?php  
  echo "    </tr>\n";
}
 
echo "    <tr>\n";
echo "      <td colspan=\"4\"><div align=\"center\">\n";
echo "        <input type=\"submit\" name=\"Submit\" value=\"Submit\" />\n";
echo "      </div></td>\n";
echo "    </tr>\n";
echo "  </table>\n";
echo "</form>\n";
 
?>

Open in new window

Problem is not that do you get the name(s) of the images into that loop.
Your id-numbers should be stored somewhere with the image names.
If anything changes with your images, data loss, overwrite, removal, new image, restore from backup or any disk defragmentation etc.
The order of your images may change. Id pointing to some image will point to another image if something changes. That's the problem.

If you are gonna use MySQL, solution will be easy peasy, but if you keep using files only and read the list of images every time directly from the filesystem you are surely gonna face problems.

Do you want i write you any example? If you want, tell me what you want to have featured. I'll show you some direction from where to continue.
ok i have been looking at your code and picking up a little more.

I have what i want except the images are being shown.

I look the source on the web page and is duplicating the the file pat to the image twice.

So my code line:
  echo "<td><img src=\"images/temp/membername/$img\" width=\"264\" height=\"102\" /></td><br>";

Becomes
<td><img src="images/temp/membername/images/temp/membername/pic.jpg" width="264" height="102" /></td><br>    </tr>

other than this i have exactly what i want.
<?php
 
// declare what url to look in and count each file within that directory
$dir = "images/temp/membername/";
// Note: just get the list first, count if needed
$images = glob($dir."*");
$nFish = count($images);
 
 
 
// test if count has found the files in the temp image dir.
//echo "count is";
//echo $count;
 
 
// Open the folder for display
//$dir_handle = @opendir($dir) or die("Unable to open $dir");
 
 
 
// asign the amount of files in the temp dir above to the variable $nFish
//$nFish = $count;
 
echo "<form id=\"form1\" name=\"form1\" method=\"post\" action=\"array3.php\">\n";
echo "  <table width=\"600\" border=\"0\">\n";
echo "    <tr>\n";
echo "      <td><p>Amount of Fish (" . $nFish . ")</p>\n";
echo "      <p>&nbsp; </p></td>\n";
echo "      <td>fish_type</td>\n";
echo "      <td>bait</td>\n";
echo "      <td>notes</td>\n";
echo "      <td>Date</td>\n";
echo "      <td>Image Preview</td>\n";
echo "    </tr>\n";
 
 
 
//for ($i = 1; $i <= $nFish; $i++) {
foreach ($images as $img)
{
 
  echo "    <tr>\n";
  echo "      <td><div align=\"center\">" . $i . "</div></td>\n";
  echo "      <td><input name=\"fish_type_$i\" type=\"text\" id=\"fish_type_$i\" /></td>\n";
  echo "      <td><input name=\"bait_$i\" type=\"text\" id=\"bait_$i\" /></td>\n";
  echo "      <td><input name=\"notes_$i\" type=\"text\" id=\"notes_$i\" /></td>\n";
  echo "	  <td><input type=\"text\" id=\"date$i\" name=\"date$i\" /></td>\n";
  echo "	  <td><button id=\"trigger\">Click here for Calendar</button></td>";
  echo "	  <td><img src=\"images/temp/membername/$img\" width=\"264\" height=\"102\" /></td><br>";
  echo "    </tr>\n";
?>
<script type="text/javascript">
  Calendar.setup(
    {
      inputField  : "date<?php echo $i; ?>",         // ID of the input field
      ifFormat    : "%Y-%m-%d",    // the date format
      button      : "trigger"       // ID of the button
    }
  );
</script>
 
<?php  
  echo "    </tr>\n";
}//}
 
echo "    <tr>\n";
echo "      <td colspan=\"4\"><div align=\"center\">\n";
echo "        <input type=\"submit\" name=\"Submit\" value=\"Submit\" />\n";
echo "      </div></td>\n";
echo "    </tr>\n";
echo "  </table>\n";
echo "</form>\n";
 
?>

Open in new window

In that foreach loop you will have all images at once, and you removed that ++$i; which increased the ID-number.
But you still have no association between the image and the id. Should i write simple index-textfile to use with that loop above?
i guessed i would have to sort something out with the name of pics due to overwriting etc. I was going to tackle that after.

in my experience on here if i ask too much people dont reply. :)

I would sure like to get some help. i would post my link on here but i dont like the thought of posting my test site on the web

How can i message you the url to the page, it may make more sense.

Thanks for being so helpful

*making a cuppa*
all images at once?

When i try it it works. Its just the images are not shown due to the url. if i read the soucre i can see each image name on each row. Surely thats right?
See...

<?php
$dir = "images/temp/member";
$images = glob($dir."/*");

// as you can see we have all of them in an array
echo "<pre>";
print_r($images);
echo "</pre>"

// simple example of showing them all
foreach ($images as $img) echo "<hr><img src=\"$dir/$img\" width=\"264\" height=\"102\" />\n";
?>

As you can see, it works every time. You see the names/images every time. but you cannot be sure of it's ID..
Your first script used $i in for loop to produce id-numbers..
If we want to add the same here, just change:

foreach ($images as $id => $img) echo "<hr>ID # $id<br /><img src=\"$dir/$img\" width=\"264\" height=\"102\" />\n";

But if anything changes in your images directory, they changes may affect your id-numbering. They will not match anymore.
i am not getting why the id thing is so important

i plan to have the images renamed to a unique name for each. I havent thought of this yet but i know its possible.

The way it will work but some bits may not right now is:

Each member has their own temp folder. This temp folder is emptied when they log in.

The member logs in and can then go and upload x amount of images.

Once the applet has resized and uploaded the images the images upload to the users temp folder.
The applet then redirects to the page we have been working on.

Here they will see as many rows as there are fish uploaded. With a thumbnail beside each row.

Once they add the details of each picture they will go to  confirm page. Here the records are entered into the database( and a url to the image in the photo data field) The images will then be moved to a new directory and most likely given a unique name at this point.

Does that make sense?
 echo "      <td><input name=\"fish_type_$i\" type=\"text\" id=\"fish_type_$i\" /></td>\n";
  echo "      <td><input name=\"bait_$i\" type=\"text\" id=\"bait_$i\" /></td>\n";
  echo "      <td><input name=\"notes_$i\" type=\"text\" id=\"notes_$i\" /></td>\n";
  echo "        <td><input type=\"text\" id=\"date$i\" name=\"date$i\" /></td>\n";

How do you separate fish_type_15 and fish_type_23 from each other?
Erm with the different number?

im sorry i dont understand.
Where that number comes from?
i feel like my head is going to explode.

With the for loop
for ($i = 1; $i <= $nFish; $i++) {     i get what i want with each row having unique names. The table loops as i want. but i want images.

With the for loop
foreach ($images as $img)          i get the table as i want but the pics are not showing because the url prefix to the image name is duplicated. I can see this  in the web source.

I may sound like a noob but i just want to mix the 2 so i get each record with its own id _1 _2 etc
and the image to not have 2 URL prefix's

I shouldnt be allowed near a computer. :)



I'm trying to say that your input fields are meaningless.
If you post those values you cannot be sure what is the image they are belonging to.
Data posted doesn't belong to any image, it belongs to some number, but there is nothing which indicates what image belongs to that same number.
Lets say you have three members, "foo" (1), "bar" (2) and "quux" (3).
When you read the images they are already misordered. You'll get:

1 - bar
2 - foo
3 - quux

Sorted or not, doesn't really matter. Point is that if you remove "foo" or "bar" or create "diz" for example.
after remove:

1 - foo or bar (depending which one removed)
2 - quux

there is no longer 3 at all. or

1 - bar
2 - diz
3 - foo
4 - quux

Order changed. If you are going to save any information that is related to those numbers, it's ok, but images or anything else are not associated to them at all.
there was me thinking it would be simple to shows rows of a table for every picture in a directory and then each row has a thumbnail beside it.
i really thought i was close to cracking it.

From what i gather what i have spent the last 2 days working out means nothing.

I was hoping just to see my dynamic form with images on the end.

I had the same set of php pages which work fine. God knows how but it works. the difference then was i had php upload and resize my pages.
That worked but was good due to resizing of images taking forever server side and limits on file uploads.

I have got myself an applet and i am trying to implement what i have already achieved using that applet.

The only thing thats different is the beginning of the wizard i created.

Now your saying my code means nothing.

Im sure it doesnt to you but for me i feel closer than what i was yesterday.

If i could just get the damn images to show at random on each row i could move on. Right now i dont care what relates to what. Its a table of rows controlled by the amount of images in a folder. DONE
At the end of each row one(any one) of the images to be showing.

Form there i will rest learn more stuff and tackle my next hurdle.

As i said i aint no programmer i just tinkle with it from time to time.
That's fine too, but you still need an index where you keep the existing associatons (ie. dirnames versus id-number).
Let's take the example again above. We are gonna create four items, foo, bar, quux and diz. Let's do this one by one.

1 - foo

then we add another

2 - bar
1 - foo
or depending the sort order
1 - foo
2 - bar

and another again

2 - bar
1 - foo
3 - quux

and the last

2 - bar
4 - diz
1 - foo
3 - quux

Now we have a list.. associated id-number and name (directory for example)
If we decide to remove user called bar, list will became:

4 - diz
1 - foo
3 - quux

Bar and id number 2 dissappeared. That id number will no longer be in available.
You may replace it by replacing all associated data and removing old directory etc.
But now your id's are 1, 3 and 4. No 2 at all.
If we look how that's done in your script, the leading number on every row is that $i
and the name is an image name for example.
As i already mentioned, id # 2 no longer exists, you cannot do use the counting value in your for-loop
as an id-number or either trust the glob returning keys.
maybe your doing what you do best and analyzing my code and wondering what it all means.

Dont worry about that. Can you just assist me in getting the images to show. Please.
i wish i knew what you knew mate. For you the project im working on would be so simple.

For me its a headache.

so its not possible to do what i want to do?
ASKER CERTIFIED SOLUTION
Avatar of slouko
slouko
Flag of Finland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
thanks and sorry for being a pain in the rear end.

back to that php book.......
Very Patient.