FileDownload
Custom template usage
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
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