Indexr

Directory Listing and Utilities script

Indexr Directory Listing

August 24th, 2010By mjau-mjau30 Comments

Indexr DemoDownload Indexr

Indexr is a small versatile footprint PHP script that lists images and files in any folder on your server. Simply drop the single index.php file into your directory with files or images, and it will list everything in a nice eye-pleasing manner when accessed.

You can use Indexr to quickly set up small gallery, display files for clients online, or simply to resize all images or create thumbnails in a specific folder. You can change sorting order, thumbnail size, CSS and html layout by simply editing the single index.php file. Not only does Indexr list files in folders, but it also creates thumbnails for images and shows additional file information. If you need a simple but pretty directory listing with thumbnails, try Indexr!

PS! Indexr is FREE to download, and is not related to the Imagevue Gallery.

  • List all/any filetypes in a specific directory
  • Resize images or create thumbnails on-the-fly for any folder
  • Displays thumbnail preview for image formats
  • Display full-size images with previous/next navigation
  • Sort files by date, name or extension
  • Filter files by extension
  • Easily Customize CSS and layout

Installation

Simply copy the index.php file into your file directory, and access it from your browser. In the demo below, we simply dropped the Indexr index.php file into our /demo/indexr/ directory:

imagevuex.com/demo/indexr/

System Requirements

  • Web server with PHP4 or greater
  • GD2 or ImageMagick is required for thumbnails. One of these will normally exist on your server already.

Customization

You can change some options like sorting, thumbnail-size and allowed extensions by editing the index.php file directly. By changing css and html you can give it any look you want. Simply open index.php in any text-editor.

Options

define('THUMB_PREFIX', 'tn_');
 * Sets the thumbnail prefix to be used

define('THUMB_DIMENSIONS', '120x');
 * Thumbnail dimensions in format of 'WIDTHxHEIGHT'
 * If only the width is specified (e.g. '160x'), all thumbnails will be one width but different height.
 * If only the height is specified (e.g. 'x120'), all thumbnails will be one height but different width.
 * If width and height will be empty both, thumbnail will be a copy of original image.

define('THUMB_QUALITY', '85');
 * Thumbnail JPG quality

define('DATE_FORMAT', 'd M Y');
 * Date format

define('ALLOWED_FILES', '*.png|*.jpg|*.gif|*.mp3|*.htm*|*.txt|*.zip');
 * List of masks for allowed files
 * Empty string means all files allowed.
 * You can use shell wildcards:
 *   * - zero or more characters (any);
 *   ? - exactly one character (any).
 * Divide masks with | character.

define('SORT_METHOD', 'date-');
 * Sorting method with possible values:
 *   - name+ - sort by name ascending 
 *   - name- - sort by name descending 
 *   - date+ - sort by date ascending 
 *   - date- - sort by date descending 

define('NUMBER_OF_COLUMNS', 3);
* Number of columns in directory list

CSS Styles

* { margin: 0; padding: 0; outline:0; }body{background:black;color:#999;font:12px/18px "Lucida Grande",Candara,Tahoma;margin:18px 36px;}span{color:#333;}h1,h2,h3,h4{font-weight:normal;line-height:110%;color:#ffa600;}h2{font-size:18px;}a{text-decoration:none;color:#ffa600;}a:visited{color:#bb8816;}.pagemenu a:visited{color:#ffa600;}a:hover{color:white;}a.span{color:#333;}img{border:9px solid white;}td{vertical-align:top;}table table td{padding:0 18px 18px 0;}.thumb{text-align:right;}.thumb img{border:4px solid #ccc;}.thumb img:hover{border:4px solid white;}.thumbtext{padding:4px 0px 0px 0px;}.imagetext,.pagemenu{padding:0px 0px 9px 9px;}.indexr{margin:18px 0px 0px 0px;}p{margin:0 0 9px 0;}form{}

30 Responses to "Indexr Directory Listing"

  1. Hey, very nice website!
    You might want to replace that “lorem ipsum” here.

    Cheers,
    Alex

  2. A feature request:
    – make it to display the image to fit the browser resolution.

    It shouldn’t be complicated.
    I modified an old indexr version to save the resolution in a cookie using javascript and in the php add width= or height= (depending on which of them it was bigger) to match the browser resolution.

    Maybe is not a good solution but was a 2min hack :)
    Of course it won’t help the mobile devices save traffic …
    For this, on the fly resizing + caching (like the thumbnails) should be used i guess.

  3. A feature request:
    – make it to display the image to fit the browser resolution.
    :DD
    Id like so muchhh!

  4. This looks perfect for my site, nice work . How would I go about removing the file extension and other details from showing and perhaps removing the the filters at the top. oh and how about opening the large image in Lightbox or similar ?

    • Since this is a single-file script you can simply edit it and delete the part with the filters on top (form class=”pagemenu”, line 517) or add .pagemenu {display: none} in the style section.

      To remove file information either delete td class=”thumbtext” in lines 572-585 or add .thumbtext { display: none } to styles.

      To add Lightbox, add the script to the head section and in 566 change the link so it looks like this:

      <a href="name; ?>” rel=”lightbox”>

      This is it I think.

  5. Has this been tested with PHP 5.4.3? I can not get it to work at all.

  6. Hi
    Can the target of the thumbnail be set elsewhere.
    I have this in a frame and when I click a thumbnail want the target to be “inner.htm”.

    Can this be done and what code do I use and which line?

    Regads

  7. Is there a way to get it to display folders?

  8. Is there a way to force a new column? How many files have to list before it goes to a new column?

    • It always displays 3 columns, you can change this in line 59:
      define(‘NUMBER_OF_COLUMNS’, 3);
      There are other settings as well that you can edit. The point is to have a single file that you can drop in a folder to display the files inside.

  9. Okay we have moved index to http://github.com/firedev/indexr it should allow us to keep track of suggestions. And I have even created the first issue about subfolders. https://github.com/firedev/indexr/issues/1

    • This is very nice script. Two things –

      1. Doesn’t seem to show vertical pictures properly. Should it rotate them up?

      2. It would be nice to click the right side of the image to go to the next image and click the left side to go to the previous image.

  10. Beautiful script… 99% what I’m looking for!

    How could I go about adding a “Download Photo” link next to each image (both in thumbnail view and in full size view)? Clicking the link should prompt the user where to save the photo on his/her computer. I’d like to avoid the right-click, download method if possible.

    Thanks!!

    Ray

  11. That is outside the scope of this simple script … That would require coding the backend PHP to change the header of a file, so that instead of loading into a page, it will prompt to download instead.

  12. Actually, i found a solution quite easily (thanks to Google search)…

    I added the following line to the .htaccess file:

    ——————
    AddType application/octet-stream .jpg
    ——————

    Worked like a charm!

    Ray

  13. I’m trying to modify the script to display the contents of a sub-directory (don’t want the script in the directory itself for now).

    I have edited line 60 to the following:

    define(‘DIRNAME’, dirname(__FILE__) . ‘/sub1/sub2/sub3/’);

    When I re-load the script, the page shows the “alt” placeholders for the photos INSIDE sub3 correctly, but the images themselves aren’t shown. I checked the sub3 folder, and a new “thumbs” folder was created inside, but that folder is empty (no physical thumbs created).

    I’ve scoured the code, and most file/folder actions are accomplished using the DIRNAME variable, which I appear to have set correctly (judging by the images trying to display and the creation of the thumbs directory). What have I missed editing to keep this folder structure transparent to the script?

    Thanks again,

    Ray

  14. Hi There,

    Awesome script! Realy neat :) But can it also generate thumbnails from pdf files?

    Gr,
    Bram

    • Unfortunately, that would require a specific PHP module on your server called “Imagemagik”, else your server is simply not capable of creating thumbnails from PDF files. Since imagemagik is largely unavailable to most servers, Indexr has been built without it …

      • Hey Mjau-Mjau,

        Thanks for your reply! If I could get Imagemagik installed onto
        my server would it than be easy to enable indexr to make thumbs
        of pdf’s as well? You see, I run a graphic design company and allmost
        all of the files I hand out to my clients are in PDF format because
        of their capability to include vector’s and such. So it would be realy nice
        if I could offer some thumbs to ;)


Comments are closed in preparation for new website. Use the forum or contact page.