¿Cómo cambiar los iconos de campo de archivo (sin cambiar el núcleo)?


11

El marcado generado para mostrar un campo de archivo es (PDF en este ejemplo):

<img src="/modules/file/icons/application-pdf.png" title="application/pdf" alt="" class="file-icon">

Me gustaría usar una imagen de icono diferente. ¿Cómo podría hacer esto sin cambiar el contenido de / modules / file / icons?

Supongo que podría ocultar la imagen predeterminada y mostrar una diferente con CSS, pero parece un poco desordenada.

Respuestas:


10

Puede anular theme_file_iconsu tema y especificar diferentes imágenes de iconos. Consulte la file_icon_pathreferencia sobre cómo el núcleo determina qué iconos usar.

También puede establecer la variable "file_icon_directory" en la ruta a sus iconos, ya que la file_icon_pathfunción busca la ruta en esa variable.


Siguiendo lo que dice jhedstrom, he escrito un blog para principiantes sobre cómo usar las dos funciones anteriores para lograr esta solución aquí . Espero que sea útil para alguien!
Alison

4

Dos notas adicionales sobre esto:

  1. No es necesario copiar todos los archivos de iconos predeterminados a su directorio de temas.
  2. Si está utilizando un icono personalizado, debe tener un nombre apropiado para poder encontrarlo.

Como ejemplo, tuve la necesidad de usar un icono personalizado para un archivo .bib (bibtex). Este tipo está mapeado en file_default_mimetype_mapping () , pero su valor predeterminado es el icono de texto predeterminado ya que no hay un icono específicamente definido para ese tipo de mime (text / x-bibtex).

Reemplacé theme_file_icon () en el template.php de mi tema, pero lo hice para que la ruta del ícono solo se modifique según sea necesario, y no tuve que copiar el directorio de íconos predeterminado a mi directorio de temas:

function mytheme_file_icon($variables) {
  $file = $variables['file'];
  $icon_directory = $variables['icon_directory'];

  $mime = check_plain($file->filemime);

  if ($mime == 'text/x-bibtex') {
    $icon_directory = drupal_get_path('theme', 'mytheme') . '/images';
  }

  $icon_url = file_icon_url($file, $icon_directory);
  return '<img class="file-icon" alt="" title="' . $mime . '" src="' . $icon_url . '" />';
}

Lo segundo es que debes nombrar el ícono apropiadamente. Si solo mantiene el uso de file_icon_url () , este código de esa función determinará el nombre del archivo para el icono:

// For a few mimetypes, we can "manually" map to a generic icon.
$generic_mime = (string) file_icon_map($file);
$icon_path = $icon_directory . '/' . $generic_mime . '.png';
if ($generic_mime && file_exists($icon_path)) {
  return $icon_path;
}

Entonces, en mi caso, necesitaba nombrar mi archivo text-x-bibtex.png. Por supuesto, si desea nombrarlo como quiera (bibtex.png en este caso), puede configurar el nombre del archivo manualmente:

$icon_url = $icon_directory . '/bibtex.png';

Cualquiera de los dos funcionará, pero este método le permite mantener los iconos predeterminados donde están y solo modificar las cosas según sea necesario.


1

Tregis y yo terminamos este módulo de Iconos de campo de archivo hace un tiempo. Espero que esto ayude

Este módulo agrega la capacidad de cambiar los iconos de campo de archivo predeterminados. Puede usar paquetes de iconos principales (incluidos en este módulo) o puede definir un paquete de iconos personalizado.


0

Puede (generalmente) preprocesar funciones de tema. Así que si usted:

  1. Puede copiar todos los iconos en su tema para anular uno o más iconos.
  2. No te preocupes por anular theme_file_icon()tu tema.

Copie todo el modules/file/iconsdirectorio a su tema (lo usé file_icons) y agregue esta función de preproceso a la plantilla de su tema.php:

/**
 * Implements hook_preprocess_HOOK() for theme_file_icon().
 *
 * Change the icon directory to use icons from this theme.
 */
function MYTHEME_preprocess_file_icon(&$variables) {
  $variables['icon_directory'] = drupal_get_path('theme', 'MYTHEME') . '/file_icons';
}

También podría hacer anulaciones condicionales de esta manera ala @ wonder95 pero quería mantener las cosas simples.


0

Si bien no es tan limpio como algunas de las soluciones dadas, una forma realmente simple de lidiar con esto es hacer uso del selector de atributos 'tipo' CSS3. Puede usar esto para agregar rápidamente su icono personalizado como imagen de fondo a su enlace. El resultado es que ambos están vinculados al archivo de destino. Luego puede ocultar la imagen original. Hice esto para obtener la siguiente apariencia:

Captura de pantalla del resultado

Este es el CSS que utilicé para lograr los resultados anteriores:

.views-field-field-image-files img.file-icon {display:none;}
.views-field-field-image-files a {padding-left: 100px; height: 80px; display: block; margin-bottom: 20px;}
.views-field-field-image-files a[type*="application/pdf"] {background: url(../img/icons/file-icon-pdf.gif) no-repeat; }
.views-field-field-image-files a[type*="application/zip"] {background: url(../img/icons/file-icon-zip.gif) no-repeat; }
.views-field-field-image-files a[type*="application/ppt"] {background: url(../img/icons/file-icon-ppt.gif) no-repeat; }
.views-field-field-image-files a[type*="application/pptx"] {background: url(../img/icons/file-icon-ppt.gif) no-repeat; }

En mi ejemplo, estaba mostrando los campos del archivo usando vistas.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.