Changing the icon for filefield fields

If you are working with Drupal and you need to upload documents associated with the content, sure you will be using filefield module. This provides a framework to allow upload documents also offer a very interesting set of features by default. Although it may seem that no drawback, for me it does have one very important: the default icons are quite ugly.

Well, in this small post, I will show you how can you change these icons easily.

All I found on the network to change filefield icons passed to create a function that overwrites the default function theme, and there, make all changes to a complex series of conditionals. Personally, I thought this could not be so sure that the thing was so much simpler. Well after some reading the module code, I saw that it was.

Icon organization

If there is a look at filefield.module and filefield.theme.inc filefield modulefiles, we can see that the icons associated with files are arranged in closed sets called themes. Filefield, by default, has a theme called "default" where are the icons you want to substitute. Incidentally, the name of the theme that is currently used is in a variable called filefield_icon_theme.

An easy way to change the icons would replace the existing files for which we are concerned, but in doing so, we would be modifying the module files and thus lose the ability to make future updates without problems. We have to find a non-intrusive form to change the icon set to use that we want.

A hook to define our theme

Fortunately, within the Drupal world, modify things is easy with the use of hooks and functions of overwriting. In this case, if you look at the file filefield.module, we find an interesting hook, hook_filefield_icon_sets()where the default implementation is:

/**
 * Implementation of hook_filefield_icon_sets().
 *
 * Define a list of icon sets and directories that contain the icons.
 */
function filefield_filefield_icon_sets() {
  return array(
    'default' => drupal_get_path('module', 'filefield') . '/icons',
  );
}

Oh! It's just what we need, right? This function is defined by an associative array with a the theme name in key and value given the path to the icon set. Awesome!

What icons are within a theme?

If you want to know what icons you have to do in your theme, you can see what icons are in the default theme in icons/ subdirectory into filefield module, or you can see _filefield_icon_path() function in filefield.theme.inc. Note that icon images should be in PNG format.

Putting all together

To accomplish what we want, we must create a new module named icontheme. Create the icontheme diectory in sites/all/modules/custom/ (I always put my custom modules in this subdirectory and contributted in a subdirectory named contrib). We can create the file icontheme.info with this content:

name = Icon theme
description = New icon theme for filefield fields
version = 6.x-0.1
core = 6.x
package = Ymbra

And then we also create icontheme.module file:

<?php
/**
 * @file
 * New icon theme for filefield fields
 */


/**
 * Implementation of hook_init()
 */
function icontheme_init() {
  //setting the mytheme theme as default
  variable_set('filefield_icon_theme', 'mytheme');
}

/**
 * Implementation of hook_filefield_icon_sets().
 *
 * Define a list of icon sets and directories that contain the icons.
 */
function icontheme_filefield_icon_sets() {
  return array(
    'mytheme' => drupal_get_path('module', 'icontheme') . '/icons',
  );
}

And once we have this, will only create a directory called icons/ into your module and put all the icons there for our new theme.

Well that's it. Easy, right? If you detect any error or you think that there is somewhere that could be better, leave a comment.

Extensions and improvements

This is a simple module, but we can make some interesting expansion or improvements, including:

  • Having more than one theme and create a small management interface where we can select the theme you want to use.
  • Create themes using the admin interface.