Cambiar el icono de un campo de tipo filefield

Si estás trabajando con Drupal y necesitas poder subir documentos asociados al contenido, seguro que estarás utilizando el módulo filefield. Este ofrece un marco de trabajo para permitir subir documentos, además, de ofrecer un conjunto de funcionalidades muy interesantes de forma predeterminada. Aunque pueda parecer que no tiene ningún inconveniente, para mí sí tiene uno muy importante: los iconos predeterminadas son bastante feos, y eso a un buen diseño, no le viene muy en gracia.

Pues bien, en esta pequeña entrada, mostraré cómo cambiar estos iconos fácilmente.

Todo lo que encontré por la red para modificar los iconos de campos filefield pasaba por crear una función que sobrescribía la predeterminada del tema, y allí, hacer todos los cambios con una série de condicionales muy complejos. Personalmente, pensé que esto no podía ser así y que seguro que la cosa era mucho más sencilla. Pues después de leer un poco el código del módulo, vi que así era.

Organización de los iconos

Si se da un vistazo al archivo filefield.module y al archivo filefield.theme.inc del módulo filefield se puede ver que los iconos asociados a los ficheros se organizan en conjuntos cerrados llamados temas. Filefield, de forma predeterminada, lleva un tema llamado "default" donde están los iconos que queremos sustituir. Por cierto, el nombre del tema que se utiliza actualmente se encuentra en la variable filefield_icon_theme.

Una forma fácil de cambiar los iconos sería sustituir los actuales ficheros por los que a nosotros nos interesa, pero haciendo esto, estaríamos modificando los ficheros del módulo y con ello perderíamos la posibilidad de realizar futuras actualizaciones sin problemas. Tenemos que encontrar una forma no intrusiva de modificar el conjunto de iconos para usar los que nosotros queramos.

Un hook para definir nuestro tema

Por suerte, dentro del mundo Drupal, modificar cosas de forma sencilla es muy fácil con el uso de hooks y funciones de sobreescritura. En este caso, si miramos el fichero filefield.module, podemos encontrar un hook muy interesante, hook_filefield_icon_sets(), donde su implementación por defecto es:

/**
 * 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! Es precisamente lo que necesitamos, no? En esta función se definen los temas mediante una clave y cómo valor, se le da la ruta hacia el conjunto de iconos. Fantástico!

¿Qué iconos hay dentro de un tema?

Si quieres saber qué iconos tenéis que hacer en vuestro tema, podeis mirar qué iconos hay en el tema predeterminado en el directorio icons/ del módulo filefield, o bien, podéis mirar la función _filefield_icon_path() del archivo filefield.theme.inc. Tened en cuenta que las imágenes de los iconos deben estar en el formato PNG.

Pongámoslo todo en común

Para llevar a cabo lo que queremos, debemos crear un nuevo módulo que llamaremos icontheme. Crearemos el directorio icontheme dentro de sites/all/modules/custom/ (yo siempre pongo mis módulos en este subdirectorio y los contribuidos, en un subdirectorio llamado contrib). Ya podemos crear el fichero icontheme.info con el contenido:

name = Icon theme
description = Nuevo tema de iconos para campos filefield
version = 6.x-0.1
core = 6.x
package = Ymbra

Y entonces, creamos también el fichero icontheme.module:

<?php
/**
 * @file
 * Nuevo tema de iconos para campos filefield
 */


/**
 * Implementation of hook_init()
 */
function icontheme_init() {
  // establecemos el tema mytheme como el predeterminado
  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',
  );
}

Y una vez tenemos esto, sólo quedará crear un directorio llamado icons/dentro de nuestro módulo y allí colocar todos los iconos para nuestro nuevo tema.

Pues eso es todo. Fácil, no? Si detectais algún error o creeis que hay alguna parte que se pueda mejorar, dejad un comentario.

Posibles ampliaciones o mejoras

Este es un módulo bastante sencillo, pero podría hacerse alguna ampliación o mejora bastante interesante, como por ejemplo:

  • Tener más de un tema y crear una pequeña interfaz de administración donde podamos seleccionar el tema que queramos usar.
  • Poder crear temas mediante la interfaz de administración.