SHOW ALL IMAGES IN FOLDER WITH PHP

A little bit of everything

Update!

You shouldn’t use the following code below directly, it is outdated. Please follow this link instead, for the latest updates:
https://github.com/mikelothar/show-all-images-in-a-folder-with-php

When I work on homepage or mobile layouts, or anything like that, i prefer to first sketch things up on a piece of paper, or in Photoshop. Then after I have a couple of ideas, I take photos of my paper-sketches, make png files of my PSD ideas, and show it all to the client. After receiving feedback I make any changes required, and show everything to the client again. Sometimes it turns out to be a lot of images.

The way I use to show it to the client is by giving them a link to a place where i keep this one PHP file, and a ‘img’ folder where i keep all the images in. The PHP file automatically shows all the images in this folder, and I don’t have to manually update anything, just upload to the folder. You can also use this as a simple photo album with your holiday pictures if you’d like.

UPDATE: Get the latest version of the code below from here.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title>Show images in folder</title>
<style type="text/css">
body {
    margin: 0 auto 20px;
    padding: 0;
    background: #acacac;
    text-align: center;
}
td {
    padding: 0 0 50px;
    text-align: center;
    font: 9px sans-serif;
}
table {
    width: 100%;
}
img {
    display: block;
    margin: 20px auto 10px;
    max-width: 900px;
    outline: none;
}
img:active {
    max-width: 100%;
}
a:focus {
    outline: none;
}
</style>
</head>
<body>
<?php
$folder = 'img/';
$filetype = '*.*';
$files = glob($folder.$filetype);
$count = count($files);
echo '<table>';
for ($i = 0; $i < $count; $i++) {
    echo '<tr><td>';
    echo '<a name="'.$i.'" href="#'.$i.'"><img src="'.$files[$i].'" /></a>';
    echo substr($files[$i],strlen($folder),strpos($files[$i], '.')-strlen($folder));
    echo '</td></tr>';
}
echo '</table>';
?>
</body>
</html>

Save the file as index.php, put it in a folder, and then put your images in a sub-folder called ‘img’.

Here’s a demo (images by John Kenn).

Update:
The above code sorts the images by file name. If you want to sort by file date, change the PHP part to the code as seen below. Please be aware that the date the image have on your server could be the date where you’ve uploaded the image, which is not necessarily the date you’ve created the image.

<?php
$folder = 'img/';
$filetype = '*.*';
$files = glob($folder.$filetype);
$count = count($files);
$sortedArray = array();
for ($i = 0; $i < $count; $i++) {
    $sortedArray[date ('YmdHis', filemtime($files[$i]))] = $files[$i];
}
ksort($sortedArray);
echo '<table>';
foreach ($sortedArray as &$filename) {
    #echo '<br>' . $filename;
    echo '<tr><td>';
    echo '<a name="'.$filename.'" href="#'.$filename.'"><img src="'.$filename.'" /></a>';
    echo substr($filename,strlen($folder),strpos($filename, '.')-strlen($folder));
    echo '</td></tr>';
}
echo '</table>';
?>