psst.. this blog is on hiatus.

Apache Directory Indexes 201

After composing a cute little entry roughly 10 days ago describing how to sex up your Apache directory indexes, I came across some additional information this morning that doesn’t exactly invalidate my previous post but makes it seem amateurish. So I’ve renamed my previous guide to Apache indexes “101″ and called this new and improved primer (it slices, it dices!) the “201″ (advanced) version.

The big advantages of 201 over 101 include:

  • Ability to set the <title>,
  • Flexibility to have code in the <head>, and
  • Most importantly: the ability to integrate indexes quickly with your existing template system.

So with a bit of luck and a bit of resolve, here’s what your directory listings can eventually look like: Indexes 201 example listing

First, before attempting this, I suggest you read Apache Directory Indexes 101. It provides some necessary background.

Done? Excellent. I am truly too lazy to recreate the introduction of that post. So let’s dive right in. Here’s what we’ll need in .htaccess to improve on 101:

  • SuppressHTMLPreample directive
    • This prevents Apache from generating that troublesome HTML code at the top of the index that includes <html>, the <head>, and the open <body> tag.
  • IgnoreCase directive
    • Lists files in alphabetical order, regardless of case. Desirable.
  • SuppressDescription directive
    • Wipes out the (mostly useless) description column.
  • NameWidth directive
    • Forces the name column to be as wide as the longest filename in the list.

So that brings me to my fancy new .htaccess, in sum:

Options Indexes
IndexOptions +IgnoreCase +SuppressDescription NameWidth=* +SuppressHTMLPreamble
HeaderName /path/to/header.shtml
ReadmeName /path/to/footer.shtml

Note that I didn’t turn off FancyIndexing as I did in 101. That’s because I got a clue and decided to use the <pre>-based layout but to rip out the description and last modified columns.

Where does this get us? Well, not very far if you don’t make a Header and Readme (i.e. footer) file. By using SSI craftily, you can create a meaningful page title. That is, if your header and footer use the .shtml extension, Apache will process them and give your directory indexes a bit of a dynamic flavor.

How you integrate the index into your overall content management scheme depends on your individual setup, but here’s a sample to get the creative juices flowing:

—Sample Header—
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head><title>index of <!–#echo var=”REQUEST_URI” –></title>

<style type=”text/css”><!–
HR { display: none; }
–></style>

</head><body>

[include template via SSI, PHP, or whatever you use]

<h1>index of <!–#echo var=”REQUEST_URI” –></h1>

Note the use of the echo’d SSI variable. This list of environmental variables that can be used in your index may be of use.

—Sample Readme—
</body></html>

Hopefully I’ve provided enough direction for you to go forth and do amazing things with your own Apache indexes. If you discover anything great, gimme a holler.

19 Responses to “Apache Directory Indexes 201”

  1. 1
    nathan Says:
    April 21st, 2005 at 10:30 am

    It’s good to see the SSI is working for you. However, I have had zero luck with getting php to work in these header/footer files. I have gone pretty far with it–but nothing works.

    thoughts?

  2. 2
    tom sherman Says:
    April 21st, 2005 at 11:22 am

    PHP would require you to get the environmental variables via a different method. It’s similarly simple, but I don’t know PHP so I’ll defer to Google for this one. :)

    Also, in .htaccess, you should have:

    HeaderName /path/to/header.php
    ReadmeName /path/to/footer.php

    Rather than “.shtml”.

  3. 3
    Darren Greene Says:
    May 2nd, 2005 at 3:07 pm

    I’m actually trying to shut off directory listings but I’m having some problems. I have entered the following command and it says to everywhere but it is still showing the directory listings. Is there somewhere else I need to change this?

    #
    # Directives controlling the display of server-
    # generated directory listings.
    #

    Options -Indexes

  4. 4
    tom sherman Says:
    May 2nd, 2005 at 3:39 pm

    Do you have control over your instance of Apache (i.e. the httpd.conf)? If you don’t, you may have a problem. The webmaster can disallow htaccess overriding.

  5. 5
    Darren Greene Says:
    May 2nd, 2005 at 4:42 pm

    I’m making the actual change in the httpd.conf file. I didn’t change anything in the .htaccess file.

  6. 6
    cangrejero Says:
    October 4th, 2005 at 7:54 pm

    Your instructions worked as advertised except for . When I go from directory/folder to directory/folder, it doesn’t display the info. Thanks for such wonderful instructions, anyway!

  7. 7
    Stephen Paulger Says:
    February 13th, 2006 at 8:06 am

    I have found that HR { display: none; } shifts the first file onto the same line as the column headers. So I am using HR { visibility: hidden; }.

    I am using PHP instead of SSI, I found that using REQUEST_URI alone meant that the fancy indexing sorting options appear in the title. So I wrote this which also removes the trailing slash.


    $ruri = $_SERVER['REQUEST_URI'];
    $path = substr($ruri, 0, strpos($ruri,’?')-1);

    I hope someone finds this useful.

  8. 8
    webwolf Says:
    March 14th, 2006 at 6:55 pm

    can’t get any of this to work, just keeps casing server level errors.

    how should the config file be setup?
    is it known to work on apache 2.*

  9. 9
    tom sherman Says:
    March 14th, 2006 at 10:04 pm

    webwolf: Have never tested on Apache 2.x, no. That could be the problem. :/

  10. 10
    webwolf Says:
    March 16th, 2006 at 10:21 am

    IC, which apache version are you using at present.

    according to the apache guides, all the configs you present in the guide are supported by apache 2.*.

    i thought it could be because i used foxserv to install apache,php,mysql as a package, maybe they modified the conf file more than it would seem they needed to.

  11. 11
    webewolf Says:
    March 16th, 2006 at 6:48 pm

    manages to get it working, took some hacking in the config files.

    http://lair.digitalwolf.org/notes/

    needs some styling i know, but one final question, how did ya manage to get the spacings correctly alligned, notice myne are all over the place.

  12. 12
    brandon Says:
    April 12th, 2006 at 4:37 pm

    It’s working great for me in apache 2.0!
    There is a utility that comes with the pache 2.0 install that lets you test the configuration file. It should show what’s wrong in there, to some degree.

    Maybe you’re placing the described in the wrong location? Put it where the old readme and header definitions were.

  13. 13
    Ted Byrne Says:
    June 1st, 2006 at 1:32 pm

    Great little tutorials! I’m having a problem with the header and footer, however. Apache seems intent on slapping tags around the all content of the header and footer files when they’re included on the page load. I’m seeing the raw html/ssi/php code in the browser window.

    Is there way to suppress this PRE tag generation ?

    My host is on Apache 1.3.31 (and I’ve noticed that the more elegant supressHTMLpreamble doesn’t work either).

    Maybe there are overides on somewhere, but I thought localized .htaccess was supposed to suppress the globals…

    Any advice appreciated. Again, thanks for the two nice tutorials, exactly what I was looking for.

  14. 14
    Ted Byrne Says:
    June 1st, 2006 at 1:35 pm

    … I see that my PRE and /PRE tags got swallowed by the code in that last post… Humble apologies.

    -TB

  15. 15
    tom sherman Says:
    June 1st, 2006 at 2:57 pm

    Ted,

    No worries. You could also override PRE’s normal whitespace properties with some CSS for the indexes:

    pre {white-space: normal;}

  16. 16
    Ted Byrne Says:
    June 2nd, 2006 at 12:58 am

    Thanks Tom. The problem actually is the CSS is being generated after the PRE, so even the style info is showing in the code, not having any effect.

    Here: http://www.TimeNav07.org/outgoing/listing/

    I was initially looking for the method to eliminate the truncation of the file names, but saw that you could do more with CSS and includes.

    I don’t know why those PRE’s are being generated, and I can’t get SupressHTMLPreamble to do its thing either. Probably my host’s doing.

    Thanks again.

  17. 17
    tom sherman Says:
    June 2nd, 2006 at 2:31 am

    Ted,

    Shouldn’t matter where in the document the STYLE tag is — you can still override the default whitespace behavior of PRE… You may also want to change its font away from monospace?

  18. 18
    Ted Byrne Says:
    June 3rd, 2006 at 5:16 am

    Problem fixed! It was actually the .shtml extention…(?) Looks like I won’t be able to use SSI to fancy-schmancy it up, but at least I get CSS control of the directory. Cheers.

  19. 19
    RichardBronosky Says:
    June 30th, 2006 at 11:28 am

    One way to take this to the next level is to add JavaScript to the HEAD. I’ve built a full “OS X Column View”-like UI using XMLHttpRequest and the wonderful Yahoo! UI libraries. Unfortunately I can’t release that code at the moment, but I can give you this as an inspiration:

    <script>
    var path = window['location']['pathname'];
    var host = window['location']['host'];
    var shortHost = host.replace(/\.corp\.domain\.com|\.domain\.com|\.corp/,”);
    window['document']['title'] = “Browsing ” + path + ” on ” + shortHost;
    </script>

    Keep in mind that the search pattern is “stingy”, and will perform first come first replace.

    I hope this inspires you to do something great. (Maybe I can publish my code later.)

« Apache Directory Indexes 101
Selective hotlinking prevention through .htaccess »