Give your Apache file Index a face lift with h5ai

Are you running an server?

If you are then you would have been greeted by that horrible directory page more than once. Isn’t it time to get rid of the old to make way for the new? Give your a face lift with h5ai.

h5ai makes browsing directories on HTTP web servers more pleasant

h5ai is a modern replacement for the built in Index view for and it boast plenty of . It is build with HTML5 Boilerplace, + Modernizr and can be implemented with just a few steps (2 in my case). It has been created by Lars Jung (@lrsjng) and he has a number of other useful libraries and tools, go check him out.

The of h5ai is nice and minimal and uses and sprinkles of JS to get things working. If you have JS turned off though it degrades nicely. There is a built in that enables you to view images on the fly and to top it all off there is a code syntax view so you can easily read things like JS and XML.

This definitely makes your index views easier to digest and easier to navigate around as there is a built in search and tree view.

There are plenty of and extensions you can enable with h5ai as seen above where you can enable QR Codes on file hover. The whole install sits in one folder at the root of your site and all you need to do is get your server to add its to the list. Basically just add this line to your .htaccess

1
DirectoryIndex index.html index.php /_h5ai/server/php/index.php

Here are just some of the optional features that are available

  • for the current directory, linked to all parent directories
  • auto refresh
  • custom header and/or footer for each directory
  • select and download multiple files and folders at once, either as tar or zip archive
  • filter function for the displayed files and folders
  • folder sizes
  • localization with a lot of languages already included
  • link hover states between main view, breadcrumb and tree view
  • display HTTP web server details
  • image preview with keyboard support
  • text file preview with Markdown rendering and keyboard support
  • QR codes on hovering files
  • sort files and folders
  • status bar with additional information about files and folders
  • thumbnails for images, pdfs and movies
  • directory tree view
  • display breadcrumb in the browser title

If your not convinced yet then why not head on over to the official page or check out the Github repo.

h5ai demo

Know of any other cool scripts like this? Let me know so I can get them installed and featured on here.

  • Did I mention how easy it was to install? It has been a great help for me over the past few days, especially with the QR Codes

    • M3

      Don’t know if you still monitor this after 3 years but here goes.

      The install was a breeze. However, i am also trying to get movie thumbnails to show up. After spending 2 days failing to get php_ffmpeg to function (apparently ffmpeg is a dead project and doesn’t work on any php version over 5.4, and i’m not dropping down from my 5.5.15) i’ve considered using Avconv as the other alternative.

      That said, i have no idea how to use it. I downloaded it from sourceforge but the install looked suspicious (not signed), and then i had no clue how to enable it for H5ai to utilize it for thumbnail generation. There is no documentation for where/how to install Avconv and how to get H5ai to make use of it.

      This is what currently shows up in my h5ai info page.

      Any and all help/advice is most welcome if this thread isn’t already dead. Tnx.

  • Super easy! And beautiful.

  • Esperanza Rosel

    where should I exactly add this line? ”
    DirectoryIndex index.html index.php /_h5ai/server/php/index.php” and what should I modify in it?

    • validatethis

      in the root directory’s .htaccess file