Sorting by upload/modified date PHP code

Question

I'm trying to get my PHP code to sort my files by upload/modified date but having issues. Does someone know how to do this or push me in the right direction?

Here is my working code so far:

$dir = 'files';
$file_display = array('jpg', 'jpeg', 'png', 'gif');

if(file_exists($dir) == false){
echo 'Directory \''.$dir,'\' not found!';
} else {
$dir_contents = scandir($dir);
foreach($dir_contents as $file){
    $file_type = strtolower(end(explode('.', $file)));

    if($file !== '.' && $file !== '..' && in_array($file_type, $file_display) == true){
        echo '<img src="', $dir, '/', $file,'" alt="', $file, '" width="700" height="700" />';
        echo "<br />\n<br />\n";

    }
}
}

Answer 1

You can sort the filenames by via PHP's usort() function as follows:

usort($dir_contents, create_function('$a,$b', 'return filemtime("'.$dir.'/$a")<filemtime("'.$dir.'/$b");'));

The above sorts array by file's last modification time. For sorting by the file's creation time you can replace filemtime with filectime function (also you can check official documentation for a return values meaning in Unix), or remember/retrieve file upload time from database. The above compact php sorting is based on this answer.

Another way is to sort images in Javascript. Your PHP code then can look like this:

<div id="container">
<?php
$dir = 'files';
$file_display = array('jpg', 'jpeg', 'png', 'gif');
if(file_exists($dir) == false){
    echo 'Directory \''.$dir,'\' not found!';
} else {
    $dir_contents = scandir($dir);
    foreach($dir_contents as $file){
        if($file == '.' || $file == '..') { continue; }
        $arr = explode('.',$file);
        $file_type = strtolower(end($arr));
        if(in_array($file_type, $file_display)){
            echo '<img src="', $dir, '/', $file,'" alt="', $file,
                '" data-m="', filemtime("$dir/$file"),
                '" data-u="', filectime("$dir/$file"), '" />';
        }
    }
}
?>
</div>

and related javascript

var container, images, arr;

function prepare_images(){
    container = document.getElementById('container');
    images = container.getElementsByTagName('img');//nodeList object
    arr = [];
    for (var i=0;i<images.length;i++) {
        arr[i] = images[i];
    }
    sort_images('data-m');
}

function sort_images(attr){
    arr.sort(function(a,b){
        return parseInt(a.getAttribute(attr),10) - parseInt(b.getAttribute(attr),10);
    });
    for (var i=0;i<arr.length;i++) {
      container.appendChild(arr[i]);
    }
}

if (window.addEventListener) {
    window.addEventListener("load", prepare_images, false);
} else if (window.attachEvent) {
    window.attachEvent("onload", prepare_images); //for IE5-8
}

test.php @ pastebin