Adding icons to a user download area
» Visit the Client Downloads support page
A quick tutorial on how to add icons to assets with Client Downloads.
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.