Displaying lists of files attached to documents is something we've all had to do. When doing so, it's a nice touch to show an icon next to each file, which denotes the type of document, as in the image to the right.

This isn't exactly difficult but I've seen some overly-complicated solutions used and wanted to share what I think has to be the simplest, cleanest and cleverest. All it uses is a smidgen of CSS. The attachment are listed as a set of <li> tags where the class name is the same as the extension of the file. Like so:

<ul class="download">
 <li class="pdf">link to PDF file here</li>
 <li class="xls">link to Excel file here</li>
 <li class="mp3">Music file link here</li>
</ul>

The CSS is divinely simple. You just add a background image to the list item. You can add a new rule for each file type you want to cater for. All other file types are covered by the default case of the generic file image. Here's a simplified look at the style used (note their order is important — generic must be first):

ul.download li {
        background-image:url(generic_file_small.gif);
}

ul.download li.xls{
        background-image:url(XLS_small.gif);
}

ul.download li.ppt{
        background-image:url(PPT_small.gif);
}

To create the HTML. Just use a simple @Function like this:

@Implode("<li class=\"" + @LowerCase(@RightBack(@AttachmentNames; ".")) 
        + "\"><a href=\"/"+@WebDbName+"/0/"+
        @Text(@DocumentUniqueID)+"/$file/"+@AttachmentNames+"\">"
        + @AttachmentNames +
        "</a></li>";
@NewLine)

You can see a working demo here (read only, for obvious reasons). All the images, CSS and code is wrapped up rather nicely in the zipped-up copy of that database.