Adding icons to a user download area

» Visit the Client Downloads support page

Here is an example template to display a user’s folders:

{exp:ajw_client_downloads:folder orderby="id"}

{if no_results}<p>There are no folders for this user</p><p>{/if}</p>

<h3>{folder_title}</h3>

<p>{folder_description}</p>

<table width="100%">
    <thead>
        <tr>
            <th>Id</th>
            <th>Title</th>
            <th>Size</th>
            <th>Date</th>
            <th>Extension</th>
        </tr>
    </thead>
    <tbody>
        {if no_assets}<tr><td colspan="5">There are no assets in this folder</td></tr>{/if}
        {assets orderby="title"}
        <tr class="{switch="one|two"}">
            <td>{id}</td>
            <td><a href="{url}" class="icon icon-{extension}">{title}</a></td>
            <td>{size}</td>
            <td>{date}</td>
            <td>{extension}</td>
        </tr>
        {/assets}
    </tbody>
</table>

<p>{/exp:ajw_client_downloads:folder}</code></p>
</pre>

<p>The key part of this is the</p>

<pre><code>class="icon icon-{extension}"

added to the asset’s link. This creates a default icon class and then an additional class that varies depending on the asset’s extension.

We can then, along with a suitable icon library (I’ve used famfamfam’s silk icon set), use the following CSS:

.icon {
	padding: 3px 0 3px 24px;
	background: transparent url(../images/icons/unknown.png) no-repeat 0 3px;
}

.icon-folder {
	background: transparent url(../images/icons/folder.png) no-repeat 0 4px;
}

.icon-png,
.icon-jpeg,
.icon-jpg,
.icon-gif {
	background-image: url(../images/icons/gif.png);
}

.icon-zip {
	background-image: url(../images/icons/zip.png);
}

.icon-doc,
.icon-docx {
	background-image: url(../images/icons/doc.png);
}

.icon-xls,
.icon-xlsx {
	background-image: url(../images/icons/xls.png);
}

.icon-html {
	background-image: url(../images/icons/html.png);
}

.icon-pdf {
	background-image: url(../images/icons/pdf.png);
}

.icon-swf,
.icon-flv {
	background-image: url(../images/icons/swf.png);
}

to give a different icon based on the asset’s file type/extension.