Grow your CSS skills. Land your dream job.

Improving the Default Directory View

Published by 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));

Comments

  1. Nacho
    Permalink to comment#

    I find it extremely cool. Will be using it for sure.
    Thanks for the tip.

  2. I think you should try INDXR.

  3. Permalink to comment#

    Thats pretty sweet! Ill have to give it a spin!

  4. Permalink to comment#

    I think the strongest argument for a solution like this is that it’s all contained within the index.php file. A solution like INDXR, as Lukasz suggested, requires a more involved installation.

    Definitely a tool worth having around!

  5. Permalink to comment#

    Could you update your example folder to include a sub-folder, so I can see what sub-folders look like using this method? Thanks :)

  6. tim
    Permalink to comment#

    the script doesn’t work for me … :/
    i don’t have the name of files, just the “.jpg”, “.tiff”, “.doc”, etc …

  7. @tim: I updated the post to include a fix I got from Greg himself, as I actually had that same problem.

  8. Permalink to comment#

    I like it. I might use it on my site. One quick question. For program (if at all) do you use to get the chmod settings for a file or folder.

    Thanks.

  9. Permalink to comment#

    hmm, nice…

    Though now I feel old because I had to google your urban slang “FTW” to find out what it means.

    James (no longer down with the kids :-()

  10. Permalink to comment#

    That’s pretty cool, I’ve never thought of dressing up my directory listing

  11. fatnic
    Permalink to comment#

    That magic trick is aweful!!!

  12. Permalink to comment#

    Thanks for this! I had been looking for something this simple and elegant and this is definitely the best solution so far.

  13. Permalink to comment#

    Although I already have directory listing enabled, I definitely want to pretty up how it’s displayed and am definitely using it. Thanks! :D

  14. Permalink to comment#

    Awesome Script. Thanks for sharing this thing with us!

  15. Michael
    Permalink to comment#

    For security, unless you need directory listing don’t enable it or provide a work around for it. That is of course you actually need to.

  16. Brian
    Permalink to comment#

    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.

    Here’s a link to what I have.

  17. Nieminen
    Permalink to comment#

    Great script, except the .flv and .mp3 players don’t work with Safari (or Chrome)…

    :N

  18. This is a great tool for anyone on the web. I’ve implemented this in a directory to share some photos with friends, but I have run into some problems.

    File names didn’t display…initially – Chris, your code solution, when I realized it was there, worked.
    Once filenames began to display, then I realized that the lightbox functionality failed to work.

    Maybe I’m doing something wrong, but I’d love to hear if there’s a code modification I could do to get that working. It’s kind of the coolest thing about this service.

    As always, Chris, thanks for sharing with us tremendous tips and tools. Keep up the great work!

  19. Permalink to comment#

    This is great, although I do have a few gripes (like I should complain)…

    What about folders that have an .htaccess file to enable password protection for this directory? Also, is there any way to edit the styles?

    Either way, this is a fantastic script. Thanks for posting this.

  20. Permalink to comment#

    Thanks not just for this little trick, but for the update regarding showing the full file name. I was having the same problem ;)

  21. Colin
    Permalink to comment#

    The website for PHP DL has been offline for some time now. However, there are two alternatives based it:

    Listr: hasn’t been updated since 2010 though
    Bootstrap Listr: a more recent fork of Listr, completely bootstrapped with support for Bootswatch themes and more filetypes

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".