PHP: Directory Listing: Images
Following on from the article on Directory Listing, here's another simple PHP script to display the contents of a directory of images within an HTML page.
Extracting Images from a Directory
We first define the file types that we want to be recognised and displayed. There's no reason why this couldn't be done within the function itself (below) but having it separate makes it easier to update.
# image types to display
$imagetypes = array("image/jpeg", "image/gif");
Then comes the main function. It takes a directory as an argument and returns a list of files who's type matches the array. Also returned is the size of the image as calculated by getimagesize. The function expects the variable passed to be the component of the path following the first /. For example "images" or "images/" would indicate the images directory at the root of the site.
Note: It's always easier in PHP to work with absolute paths (starting from /) - especially if you're using mod_rewrite which can confuse relative file paths.
# Original PHP code by Chirp Internet: www.chirp.com.au
# Please acknowledge use of this code by including this header.
function getImages($dir)
{
global $imagetypes;
# array to hold return value
$retval = array();
# add trailing slash if missing
if(substr($dir, -1) != "/") $dir .= "/";
# full server path to directory
$fulldir = "{$_SERVER['DOCUMENT_ROOT']}/$dir";
$d = @dir($fulldir) or die("getImages: Failed opening directory $dir for reading");
while(false !== ($entry = $d->read())) {
# skip hidden files
if($entry[0] == ".") continue;
# check for image files
if(in_array(mime_content_type("$fulldir$entry"), $imagetypes)) {
$retval[] = array(
"file" => "/$dir$entry",
"size" => getimagesize("$fulldir$entry")
);
}
}
$d->close();
return $retval;
}
Formatting the Output
The function is called, and the result output to HTML, as follows:
# fetch image details
$images = getImages("images");
# display on page
foreach($images as $img) {
echo "<img class=\"photo\" src=\"{$img['file']}\" {$img['size'][3]} alt=\"\">\n";
}
This HTML output can be easily formatted using CSS. Something like the following should give a decent effect:
.photo {
float: left;
margin: 0.5em;
border: 1px solid #ccc;
padding: 1em;
font-size: 10px;
}
As demonstrated here:
Or we can modify the output to also display the image filename and pixel dimensions:
# display on page
foreach($images as $img) {
echo "<div class=\"photo\">";
echo "<img src=\"{$img['file']}\" {$img['size'][3]} alt=\"\"><br>\n";
echo "<a href=\"{$img['file']}\">",basename($img['file']),"</a><br>\n";
echo "({$img['size'][0]}x{$img['size'][1]})";
echo "</div>\n";
}
If the images you want to display are very large, then you might want to look at using thumbnails that then link to the larger image. This is a more complicated process and beyond the scope of this article.
mime_magic bug
Some versions of PHP5 appear to have a bug relating to the mime_magic file and will return text/plain for all files. The work-around for UNIX-based systems is the following:
# check for image files
$f = escapeshellarg("$fulldir$entry");
if(in_array($mimetype = trim( `file -bi $f` ), $imagetypes)) {
$retval[] = array(
"file" => "/$dir$entry",
"size" => getimagesize("$fulldir$entry")
);
}
Affected Windows users will have to rely on the file extension rather than the mime type.
Related Artices
- PHP: Directory Listing
- PHP: Directory Listing: Images
