Styling Folder Contents

kbc1

I am keen to learn how I could write a page in PHP which simply reads and lists the contents of a folder on my server and if the folder contains subfolders, have those clickable to expand and display links to the sub files/folders. i guess like a family tree with nodes etc

I understand that it is not as easy as simply asking someone how to do it, but if you could point me in the write direction I would appreciate it.

Many Thanks

leatherback

well.. I think you could have a llok at [man]readdir[/man] and [man]is_dir[/man], which would be the place I would start.

Use CSS classes for styling, and use a $level paramater in your class. Then create a function to read a folder which also updates the level, and nest it to itself

if(is_dir($dir)) { Read_my_dir($dir, $level);}

echo " <span class=\"folder".$level."\">".$foldername."</span>

greenie2600

Better yet...just render the tree as a series of nested <ul>s, assign a single CSS class to the root <ul>, and use child selectors in your stylesheet to automatically apply appropriate styles to items at any depth in the list. If you want to display icons next to different types of items (folders, PDF files, image files, etc.), you might want to define separate CSS classes for those, too.

Sample HTML:

<ul class="folder-tree">
    <li class="folder">
        pictures_of_fruit
        <ul>
            <li class="folder">
                oranges
                <ul>
                    <li class="jpg">tasty_orange.jpg</li>
                    <li class="gif">delicious_orange.gif</li>
                </ul>
            </li>
            <li class="folder">
                bananas
                <ul>
                    <li class="png">green_banana.png</li>
                    <li class="jpg">huge_banana.jpg</li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="folder">
        pictures_of_elephants
        <ul>
            <li class="folder">
                asian
                <ul>
                    <li class="jpg">pachyderm.jpg</li>
                </ul>
            </li>
            <li class="folder">
                african
                <ul>
                    <li class="gif">trunkalicious.gif</li>
                    <li class="jpg">smellephant.jpg</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

As for the CSS...I've found that using background images to create custom bullets is much easier to control, and more cross-browser-compatible, than using the list-style-image property. Using this approach, here's a stylesheet that would complement the above:


/*
this rule will apply to any <ul> with class="folder-tree" AND
any ULs that are its children
*/
ul.folder-tree,
ul.folder-tree ul {
    /*

*/
list-style-type: none;
/*
we set both margin and padding to zero because
some browsers use one and some use the other
to control indentation of list items. cute, huh?
*/
margin: 0;
padding: 0;
}

ul.folder-tree li {
    /*
    place some padding to the left of the text
    to make room for the icon (background image)
    */
    padding-left: 20px;
    background-repeat: no-repeat;
    background-position: left top;
}

/*
default icon for unspecified item types
*/
ul.folder-tree li {
    background-image: url("/images/icon_default.png");
}


ul.folder-tree li.folder {
    background-image: url("/images/icon_folder.png");
}

ul.folder-tree li.jpg {
    background-image: url("/images/icon_jpg.png");
}

/* etc. */

I haven't tested this, but it should be pretty close.

leatherback

greenie2600 wrote:
Better yet...just render the tree as a series of nested <ul>s, assign a single CSS class to the root <ul>, and use child selectors in your stylesheet to automatically apply appropriate styles to items at any depth in the list. If you want to display icons next to different types of items (folders, PDF files, image files, etc.), you might want to define separate CSS classes for those, too.

Sweet, me likes it!

😃