Improving the Default Directory View

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.

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.

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

I wanted to use this on my iphone so I modified this a bit so it would format correctly. I have a couple of issues that hopefully, I can get some help with. The age portion is displaying the incorrect time and when you rotate the display and then back upright the text if formatted incorrectly.

We have a pretty good* newsletter.

Email Address

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans Pro and Source Code Pro. It is made possible through sponsorships from products and services we like.