Directory listing script.

[grant]

I've been working on a directory listing script, I'll share once I'm done. Looking for some input on what else to do with it.

http://gtgarvey.net/directory_listing/

Configuration:
Define the url, http://gtgarvey.net/directory_listing/ in this case and the directory that url points to, which is "/home/gtgarvey/public_html/directory_listing/".

Current Features of script:

Recursively lists the directory and each directory below.
Creates a link to the file.
If the file is a jpeg or png image it will create a thumbnail and store it in a thumbnail folder so it doesn't get created every time the script runs.
Array for files and directory names you don't want indexed (error_log, .htaccess , . , .., thumbnail folder, etc.)


I need to make it generate a cleaner layout. If text files are mixed in with image directories it currently looks stupid. Requires some thought on my part about how to do that. I've got a few ideas though.

Ideas:

Maybe use highslide (http://vikjavev.no/highslide/) or something similar to view the fullsize images.
Use ffmpeg to create a thumbnail for movies and popup a flash player.


My goal is to keep it to one php file.

Anyway just looking for some feedback. Thanks.

[ParodyUK]

Aww :( I was going to do this as my next project =(

[nocom]

From cssplay (http://www.cssplay.co.uk/menu/) demos,not PHP but maybe help

[Josh]

Hey grant good work so far :top:

For the thumbnails I'd recommend using the GD libary (http://uk.php.net/gd) over ffmpeg as it's more widely available (if you are to share to people outside of cirtex etc).

Also I think it may be possible with GD to create thumbnails only temporarily so you won't need to save them in a thumbnail directory - as at present if someone deletes image1.gif will you still have image1.gif in the /thumbnail folder?

For the cleaner layout you could possibly explode the filenames and anything that is classed as an image/video file have output to one DIV under a title of "Multimedia" and then have the rest of the files in a new DIV under "Everything else..." or similiar possibly?

Then you can use your lightbox to open up the multimedia parts (but that's gonna involve extra files i guess . just come across this one http://www.phatfusion.net/multibox/ I know there's plenty of free AJAX ones about I just didn't like the licensing options on the one you posted ;) )

Let us know how you get on
Good luck

[Cirtex Admin]

Very interesting project grant. If you need some help I think Andrew may be able to help or give few tips!

[grant]

Hey grant good work so far :top:

For the thumbnails I'd recommend using the GD libary (http://uk.php.net/gd) over ffmpeg as it's more widely available (if you are to share to people outside of cirtex etc).

Also I think it may be possible with GD to create thumbnails only temporarily so you won't need to save them in a thumbnail directory - as at present if someone deletes image1.gif will you still have image1.gif in the /thumbnail folder?

I already use GD to create thumbnails for images, I was going to use ffmpeg to create a thumbnail for movies. If I don't save them won't it generate a new one each time?


For the cleaner layout you could possibly explode the filenames and anything that is classed as an image/video file have output to one DIV under a title of "Multimedia" and then have the rest of the files in a new DIV under "Everything else..." or similiar possibly?


That's what I was thinking but impossible to implement with the way I have it now. I think I can add the files to an array and pass the array to another function that generates the output. That way I can have an array for text, pictures, etc. It's supposed to look like tree on win 95, I made a copy to list my gallery install as an example of what it does with files.

Then you can use your lightbox to open up the multimedia parts (but that's gonna involve extra files i guess . just come across this one http://www.phatfusion.net/multibox/ I know there's plenty of free AJAX ones about I just didn't like the licensing options on the one you posted ;) )


Yeah still looking around, If I can't cram everything into one file I'll have an option to enable/disable it in the code. I'm familiar with lightbox, I've used highslide before. (I like dragging pictures around the screen.) I know with highslide you can open html and pictures with it. So I was thinking everything could open ajax style.


Let us know how you get on
Good luck

Will do.
Thanks!

Everyone else thanks for the comments.

[zardac]

Nice idea, but I guess you have only worked on the script and not the layout yet right? All I saw was a list of pictures?

[grant]

Right now each list item gets assigned a class, it's a thumbnail, executable, or non-executable file. I could easily add more which should make it easy enough to style it with css.

The layout is unlikely to change as it is already valid xhtml (http://validator.w3.org/check?uri=http%3A%2F%2Fgtgarvey.net%2Fdirectory_li sting%2Findex.php&charset=%28detect+automatically%29&doctype=Inline&group=0).

Since the script lists the contents of a directory, an unordered list makes the most sense to me.

[grant]

I've made a few changes.

I now hash the image files so each one gets a unique filename, before if two different images had the same name but in different folders it would only make one thumbnail that would get displayed for both. This is because thumbnails for all folders are stored in one thumbnail folder.

To increase performance I'm now caching the html output. Right now it only runs the script at most 5 times a day. Might just switch to once a day.

I'm having a problem with the css, it seems stupid to have the images display vertically in the list so I'm trying to use display:inline, but I think that crazy javascript I'm using messes it up.

ul.mktree li.liOpen ul { display: block }
ul.mktree li.liClosed ul { display: none; }

The js changes the li class from liOpen to liClosed and vice versa when clicked to show/ hide it.

Anyone know how to make it work so just images are displayed inline?

Each list item that is an image has the class set to thumbnail.


li.liopen .thumbnail{ display: inline }


I figured something like that would work, but it doesn't.

I'll clean up the code and release it in a little while in case anyone wants to use/see/mess with it.

[dvduval]

Very nice work. It might be cool to come up with some ways to sort the data such as by filetype, name, last modified and file size. The thumbnail class is an extra nice touch, as it can aid in finding an image in a large group.

[grant]

Very nice work. It might be cool to come up with some ways to sort the data such as by filetype, name, last modified and file size. The thumbnail class is an extra nice touch, as it can aid in finding an image in a large group.

Good ideas, would probably be easy enough to do this with a database. When you hover over a thumbnail it the tooltip? tells you how big the full image is. I might need to learn javascript, something I've been wanting to do but haven't bothered yet.

http://javascripttoolbox.com/lib/mktree/

That's the library I'm currently using, but it changes all the class names of the li elements so I can't control the layout with css classes, at least not that I've figured out yet. I want files to display in a standard list but the images to fill the width of the screen (like they do in the example now).

Oh I just came up with a pretty good idea for image display, should be pretty quick to do, stay tuned.