Business Catalyst offers a great media downloads solution but there's no native way to use your own icons in the list view for media downloads. Furthermore, while you can update the list view layout of the media downloads module, there is no tag available to us that renders the filetype of the download that would make it possible for us to use specific images for the different file types in the list either by creating a CSS hook via a classname or even rendering our own image tag using a filetype tag.
The idea here is that since we don't have any CSS hooks via a tag like a filetype tag then we are just going to upload our new icon images to another folder on our site and use jQuery to change the URL from "/CatalystImages/Literature/" to "/images/Literature/" or another custom folder where you are storing your custom icons.
We'll be keeping the same base filename for our custom icons that BC uses for their images to make it easier. BC uses the same image file for multipe filetypes (MOV, WMV) and since there's no tag for a filetype we can't tell the difference between the types of files that share the same icon.
Our solution involves jQuery so make sure it's loaded in the <head> of your template or page or at least referenced before you add this jQuery solution to your template or page.
- Create your custom icons. See the list below for all the icon filenames you'll need to reproduce. Start with pre-made custom icons or create your own with Fontello icon fonts
- Upload these icons to a custom folder. For our example, we created a folder called "Literature" inside our "images" folder on our BC site.
- Download the bcCustomMediaIcons jQuery plugin and upload it to your site. Reference our script after jQuery has been loaded in your page or page template:
<script src="/js/jquery.bcCustomMediaIcons.js"></script>- Add our CSS styles to hide the BC icons and only show our custom icons when our jQuery is loaded. This CSS is based on the default media download container class of "literature-container". If you've updated your layout for the media downloads then you should update the CSS references as well to suit.
- Call our jQuery plugin by adding this javascript once to your page or page template:
<script>
(function($){
$(document).ready(function() {
$(".literature-container").bcCustomMediaIcons();
});
})(jQuery);
</script>- You can customize the script by passing in parameters which we'll cover in the next section.
That's it, you're done!
You can customize a few aspects of the script by passing in parameters to the plugin.
- If you want to change the size of the icons from the default 16px x 16px, pass in an array of parameters that include
iconWidthandiconHeight. Be sure to use "px" in your value:$(".literature-container").bcCustomMediaIcons({iconWidth: "24px", iconHeight: "24px"})
- If you've created a custom layout for the media downloads module and changed the class name of the container, when calling our jQuery plugin on the page just change the main jQuery object this method is acting on from ".literature-container" to the object reference of your custom literature container element:
$(".custom-container").bcCustomMediaIcons();
- If you used a different folder on your site to store your custom fonts instead of
/images/Literature/then pass in adirparameter to your directory where you keep your icons: $(".literature-container").bcCustomMediaIcons({dir: "/images/mydir/"});
Here's a list of all the filenames for the icons used by BC for the media downloads module. You'll need to upload new icons with these filenames into your custom directory. Some of these icons are used over multiple filetypes like wmv.png which is used for all streaming video types. This list is subject to change if BC adds more filetype support and adds new icons. Please don't hold me responsible.
- mp3.png
- wmv.png
- pdf.png
- flash.png
- executable.png
- help.png
- msaccess.png
- msexcel.png
- mspowerpoint.png
- project.png
- visio.png
- word.png
- other.png
- realaudio.png
- text.png
- wordperfect.png
- zip.png
## Replacement icons
Download this ZIP archive of 3 sets of icons already renamed and in folders. The icons are free for commercial use and author credit is in a text file in each folder.
To use on your site, unzip the file locally and upload the whole "Literature" folder into your "images" folder or another folder where you'll keep your icons.
Then, when calling the jQuery plugin on your page or template, pass in a dir parameter that is the location of your icons you downloaded above. To use the "perqui" icons, point to that directory:
$(".literature-container").bcCustomMediaIcons({dir: "/images/Literature/perqui/"});
from Teambox
Download the ZIP file from Github, extract locally and change the filenames to the ones above for the applicable icons. Not everything is there like "visio" or "wordperfect" but the major filetype icons are there and most people don't share Visio files or Wordperfect files anymore.
I've created a custom font package on [Fontello] which you can use to create your own filetype icons.
- Save this JSON config file locally
- Visit Fontello and click the "wrench" icon for settings
- Choose "import config" and upload the config file you downloaded.
- Download your custom font package
- Install the font in the zip file you downloaded
- Use the font in Photoshop or other image editor to create custom icons
Our icons glyphs are mapped to the main alphabet keys: a-z (lowercase) and A-J (uppercase). Here's a preview of each icon and the corresponding keystroke which will render the glyph using our custom fontello font.
- Add a function that adds a class if extensions are found in the "name" field of the media download item so we can have more unique icons for files like ".mov" and ".wmv"
- Add a function that let's you add a class for CSS hooks if the file is a streaming file and also the option to use alternate icon filenames like "mp3-streaming.png" for mp3's that stream and "mp3.png" for non-streaming. Same goes with all streaming file types.