Improving the Default Directory View

Chris Coyier //

You've all seen a page like this:

That's when you are viewing a directory on a server (or locally), that doesn't have an "index" page to show you, but does have permissions set to allow you to see the directories contents. Different browsers have different takes on it. Here is Fx3:

None of them are exactly shining examples of user-friendliness, but they'll do. After all, chances are all you need to do is quickly scan the contents and click on what you are looking for or are interested in. There is a bigger problem at work here though, and that is when you don't get one of these default directory views at all. This can happen for two reasons:

  • You are unable to set the proper permissions for that directory.
  • You have a CMS installed which is preferring to serve up a custom 404 page instead.
  • Your hosting provider just doesn't viewing of raw directories for whatever reason (see below.)

PHP FTW

Leave it to the mighty PHP to solve this problem for us. PHP is able to scour a directory and return it's contents, so many folks have leveraged that ability into creating some very nice "directory listing" scripts. I've looked at a number of these, but the nicest I've seen so far is Greg Johnson's PHP Directory LIster script: PHPDL v2.

Check out a demo directory on CSS-Tricks

Just drop the "index.php" file into any directory you wish to view, navigate to that directory in your browser, and it'll make your directory look like this:

So what's so cool about Greg's PHPDL v2?

  • It's a single file. Just drop it in any directory and you are done.
  • It has nice plain text wording for when files were last altered.
  • A very simple, yet pleasant design.
  • But best of all, it has support for viewing all kind of different file types You can see in my above demo directory I have a number of different multimedia file types. Click on them to check them out. Built-in MP3 player, built-in Movie player, and a built-in modal box for images.

I am already finding this immensely useful. Just recently I wanted to share some MP3's with a friend. Just chucked them in a directory, threw this in there, and send them the link. You could do the same sharing photos, or really anything else. It's like the lazy-man's webpage!

Update: Trouble with Filenames?

If you are using this script and have trouble with it only showing the file extention and not the file name, try replacing the variables name and lname with this at around line 213

$item['name']           =       str_replace('.'.$info['extension'], '', $file);
$item['lname']          =       strtolower(str_replace('.'.$info['extension'], '', $file));