Question

I am trying to write a simple (for some) script that will get the images in an uploaded folder and then populate my html document with the filenames in the apropriate places.
I have successfully achieved the upload and writing of the filenames to a database (not sure if that part is required).
Would love some clarity on how to best achieve this. I have tried several things but no luck thus far.

<?php
 $hote = 'localhost';
 $base = '*****';
 $user = '*****';
 $pass = 'testuser2012';
 $cnx = mysql_connect ($hote, $user, $pass) or die(mysql_error ());
 $ret = mysql_select_db ($base) or die (mysql_error ());
 $image_id = mysql_real_escape_string($_GET['ID']);
 $sql = "SELECT image FROM image_upload WHERE ID ='$image_id'";
 $result = mysql_query($sql);
 $image = mysql_result($result, 0);

 header('Content-Type: text/html');
 echo '<img src="' . $image . '"/>';
 exit;
 ?>

But, perhaps I should explain complete functionality: I need the user to upload thier images into thier folder, then when the PHP image gallery is called, populate it with those said images from that folder.
I am not sure if I am going about it correctly, should I read a list of files from the folder? OR write the names to a DB and pull them from there…that is where my issue lies
The code above is what i was attempting to use, and while it will return the filename, it will not echo it in the tag…not sure where my ineptitude lies 🙂

the html i am trying to populate is as follows:

<div class="slide">
                <div class="image-holder">
                   <img src="img/asoft_table.jpg" alt="" /> 
                </div>
                <div class="info">

                    <p>Morbi a tellus lorem, id scelerisque ligula. Maecenas vitae turpis et.</p>
                </div>
            </div>
            <div class="slide">
                <div class="image-holder">
                    <img src="img/soft_table.jpg" alt="" />
                </div>
                <div class="info">

                    <p>Sed semper, lorem ac lobortis bibendum, magna neque varius augue, vel accumsan.</p>
                </div>
            </div>
            <div class="slide">
                <div class="image-holder">
                    <img src="img/living_room2.jpg" alt="" />
                </div>

Answer 1

If you’re only looking through one directory, your image paths are going to be static. If you have the image names stored in your database, you can simply preform a small query which outputs the file name and appends the static path.

$result = mysql_query("SELECT * FROM Images");

while($row = mysql_fetch_array($result)) {
  echo "<img src='/path/to/images/".$row['image_name']."'/>";
}

To break down what exactly is happening here – essentially a MySQL query is being stored in $result. I then create a while loop which cycles through the array returned from the MySQL query. This array would look something like this:

  0 => 'id' => 1, 
       'file_name' => 'foo.jpg',
       'file_size' => '36.6 kb',
       'time_stamp' => '14/01/02',
  1 => 'id => 2,
       'file_name' => 'bar.jpg',
       'file_size' => '12.8 kb',
       'time_stamp' => '14/01/03'

For each index, while will output its nested array. In this case it would be the database row. I would then want to echo out an image tag for each database row, and append the image’s name to the tag.

In your HTML you have created a block of elements for each image. So on a static page if you had 100 images, you would have to repeat that block of HTML 100 different times. With programming you don’t have to do that. In my example MySQL will return a big array that contains each of your images and their rows. So if you have a table with 100 images, your array will have 100 items and thus your while loop will run through and print out 100 times. Follow?

So using your HTML, your code would look like the following:

<? while($row = mysql_fetch_array($result)) ?>

<div class="slide">
  <div class="image-holder">
    <? echo "<img src='img/".$row['image_name']."' alt='' />"; ?>
  </div>
  <div class="info">
    <p>
      <? echo $row['image_description']; ?>
    </p>
  </div>
</div>

<? endwhile; ?>

So as you can see you create one block of HTML, and PHP will loop through and populate for you based on the variables returned.

If you wanted to order them by date/size, you can determine these variables upon upload and append them to a column in your database. Having a timestamp and an index in your table will help greatly with ordering from the database’s output. I would structure my table like so:

+----+-----------+-----------+------------+
| id | file_name | file_size | time_stamp |
+----+-----------+-----------+------------+
| 1  | foo.jpg   |  36.6 kb  | 14/01/02   |
+----+-----------+-----------+------------+

Although storing your file info in the database as opposed to traversing/parsing through your directories is probably your best bet, you can still check out this page for information about the directory methods and sequences here.

Edit: You can also check out Tizag which has comprehensive tutorials and resources for those learning PHP.

Edit: To answer your question about how you put the information in the right spot: that’s a very broad question with a wide variety of answers. In short – it depends on how you want to order them and where you want them to go. You can use MySQL queries to order the outputted data in specific ways. You can additionally use inclusion methods to break up and order your data across your site.