Technical Help /php /list_images.php

What this does

This php example walks you through the creation of a script that returns a list of images, one for each line of a text document.

Why would you want such a thing

In one of the Processing examples we created a slide show that relies on a text document with pointers to images. This php example would be perfect for that text document. Which means you could use that slide show code and this php script to make a slide show which displays all the images in a directory. Life can't get much better.

Start Here

Using a text editor create a new document in a directory that has some images in it. Name this new text document "list_images.php" (did you see that coming?). Oh, and make sure that this image directory is being served by a web server.

Using danm.ucsc.edu, connect via sftp or afp,

We want to return text

The web server normally returns html documents, so we need to have this script explicitly tell the server, which will tell the web browser that we are going to be returning text. Make this the content of your "list_images.php" file:

<?php
header("Content-type: text/plain");
?>
hello, I am text. <br /> <- See!

Now, view this using the web server and your web browser.

Where are we?

<?php
header("Content-type: text/plain");

// current directory
echo getcwd() . "\n";

?>

The getcwd() function returns a string of the current working directory. This is normally the directory in which the script that called this function resides in. The is a very useful function, because now we can open that directory and do stuff with it.

Open that directory and do something with it!

Add this directly below that echo command, re-save and refresh your browser.

if ($dh = opendir(getcwd()) ) {
  echo $dh;
  closedir($dh);
}

What the heck is "Resource id #2?" The more important question is, who cares? You can learn more about php resources if you would like, or you can just accept that things are going well and now we can ask this 'resource' some questions.

Open that directory and ask it for it's contents!

Make your 'list_images.php' file contain just the following (comment, "//", the other stuff):

<?php
header("Content-type: text/plain");

echo getcwd() . "\n";
if ($dh = opendir(getcwd()) ) {
  while (($file = readdir($dh)) !== false) {
    echo "filename: $file \n";
    echo "filetype: " . filetype($file) . "\n\n";
  }
  closedir($dh);
}
?>

Explanations:

Only the Images

Make the following the contents of the while loop:

  if (is_file($file) && (ereg(".jpg$", $file) || ereg(".png$", $file)) ){
    echo "filename: $file \n";
    echo "filetype: " . filetype($file) . "\n\n";
  }

So, that if statement says this: If this item is a file and this file name ends in a ".jpg" or it ends in a ".png" then print the filename and the filetype.

Format it plain

The two echo's above are all great and dandy for seeing what is going on, but that is not the format we want. So make your script look like this:

<?php
header("Content-type: text/plain");

$path_parts = pathinfo($_SERVER['REQUEST_URI']);

if ($dh = opendir(getcwd()) ) {
  while (($file = readdir($dh)) !== false) {
    if (is_file($file) && (ereg(".jpg$", $file) || ereg(".png$", $file)) ){
      echo "http://" . $_SERVER['HTTP_HOST'] . $path_parts['dirname'] . "/";
      echo $file . "\n";
    }
  }
  closedir($dh);
}
?>

There are three new lines in this version:

  1. $path_parts = pathinfo($_SERVER['REQUEST_URI'])

    • $_SERVER is a collection of stuff about the server, including the "file" (REQUEST_URI) that is requested.
    • pathinfo() is a function that returns a collection of information about the path that is given it.
    • one of the items it returns is the 'dirname'
  2. echo "http://" . $_SERVER['HTTP_HOST'] . $path_parts['dirname'] . "/";

    • This simply prints 'http://danm.ucsc.edu/~yourname/210/images/'
  3. echo $file ".\n";

    • this is the image name

So those three new lines create multiple lines that look like this:

http://danm.ucsc.edu/~lyle/210/images/some_image.jpg
http://danm.ucsc.edu/~lyle/210/images/another_image.png

Here is my example in action: http://danm.ucsc.edu/~lyle/210/images/list_images.php

Here is the final source for list_images.php.

This example was first written by Lyle Troxell as an in-class example of Server-Side tech for DANM 210 fall06.


Page Details
Contact DANM  |  Digital Arts and New Media  |  Arts Division  |  Grad Division
login