With the new FileDownload version the templating has been enhanced. With this example a custom template was used to create a custom layout for the list of files. The browse directory functionality was used as well to show how it can be styled with a custom template.

Snippet Call

[!FileDownload? &tplList=`fd-example4` &imgLocat=`assets/images/filetype` &imgTypes=`fileImages` &includeFileSize=`0` &skipTableCheck=`1` &browseDirectories=`1` &firstFolderCss=`fd-firstfolder` &lastFolderCss=`fd-lastfolder` &firstFileCss=`fd-firstfile` &lastFileCss=`fd-lastfile`!]

Template

<div class="fd-example4">
	<span[+fd.class+]>Current Path: [+fd.path+]</span>
<!-- Fd:Splitter -->
        <span[+fd.class+]><img src="[+fd.image+]"/><a href="[+fd.link+]">Parent</a></span>
<!-- Fd:Splitter -->
        <span[+fd.class+]><img src="[+fd.image+]"/><a href="[+fd.link+]">[+fd.filename+]</a></span>
<!-- Fd:Splitter -->
        <div[+fd.class+]><img src="[+fd.image+]"/><a href="[+fd.link+]">[+fd.filename+]</a>
                <span class="fdexp-info">[+fd.count+] downloads :: [+fd.sizetext+] :: [+fd.date+]</span>
        </div>
<!-- Fd:Splitter -->
	<a href="[+fd.deletelink+]">Delete</a>
<!-- Fd:Splitter -->
        <span[+fd.class+]><strong>[+fd.directory+]</strong></span>
<!-- Fd:Splitter -->
</div>

Snippet Output

These examples are no longer functioning due to the fact that I updated my site to MODx Revolution. However, all of the code and explanations on how to run the examples are still in place.

CSS for above layout

/* Example 4 */
div.fd-example4 {
	display: block;
	border: 1px dashed #ccc;
	padding: 6px;
}
div.fd-example4 span {
	display: block;
}
div.fd-example4 div.fd-file{
	border-bottom: 1px solid #336699;
	padding: 5px;
	background: transparent url('../../images/menu.png') bottom center repeat-x;
}
div.fd-example4 div.fd-alt {
	background: transparent url('../../images/menu-active.png') bottom center repeat-x;
}
div.fd-example4 div.fd-firstfile {
	border-top: 1px solid #336699;
}
div.fd-example4 div.fd-file span.fdexp-info {
	margin-left: 20px;
	font-size: 80%;
	margin-top: -.75em;
}
div.fd-example4 img {
	vertical-align: middle;
	padding: 2px;
}
⇐ Previous Example All Examples
logoLeaving tracks across the web.