Como alterar os ícones do campo Arquivo (sem alterar o núcleo)?

A marcação gerada para exibir um campo de arquivo é (PDF neste exemplo):

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

Eu gostaria de usar uma imagem de ícone diferente. Como eu poderia fazer isso sem alterar o conteúdo de / modules / file / icons?

Acho que poderia ocultar a imagem padrão e exibir uma imagem diferente com CSS, mas parece um pouco confusa.

Você pode substituir theme_file_iconseu tema e especificar imagens de ícones diferentes. Consulte file_icon_patha referência sobre como o núcleo determina quais ícones usar.

Você também pode definir a variável "file_icon_directory" como o caminho para seus ícones, pois a file_icon_pathfunção procura o caminho nessa variável.

Duas notas adicionais sobre isso:

1. Não é necessário copiar todos os arquivos de ícones padrão no diretório de temas.
2. Se você estiver usando um ícone personalizado, ele deverá ser nomeado adequadamente para ser encontrado.

Como exemplo, eu precisava usar um ícone personalizado para um arquivo .bib (bibtex). Esse tipo é mapeado em file_default_mimetype_mapping () , mas o padrão é o ícone de texto padrão, pois não há um ícone definido especificamente para esse tipo de mime (text / x-bibtex).

Substituí theme_file_icon () no template.php do meu tema, mas o fiz para que o caminho do ícone seja modificado apenas conforme necessário e não precisei copiar o diretório de ícones padrão para o diretório 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 . '" />';
}

A segunda coisa é que você precisa nomear o ícone adequadamente. Se você apenas mantiver o uso de file_icon_url () , esse código dessa função determinará o nome do arquivo para o ícone:

// 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;
}

Portanto, no meu caso, eu precisava nomear meu arquivo text-x-bibtex.png. Obviamente, se você quiser nomear apenas o que quiser (bibtex.png neste caso), você pode definir o nome do arquivo manualmente:

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

Qualquer um funcionará, mas esse método permite que você mantenha os ícones padrão onde eles estão e apenas ajuste as coisas conforme necessário.

Eu e Tregis obtivemos este módulo File Field Icons há algum tempo. Espero que isto ajude

Este módulo adiciona a capacidade de alterar os ícones padrão dos campos de arquivos. Você pode usar pacotes principais de ícones (incluídos neste módulo) ou definir um pacote personalizado de ícones.

Você pode (geralmente) pré-processar as funções do tema. Então, se você:

1. Você pode copiar todos os ícones do seu tema para substituir um ou mais ícones.
2. Não se preocupe em substituir theme_file_icon()seu tema.

Copie o modules/file/iconsdiretório inteiro para o seu tema (eu usei file_icons) e adicione esta função de pré-processo ao template.php do seu tema:

/**
 * 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';
}

Você também pode fazer substituições condicionais dessa maneira ala @ wonder95, mas eu queria manter as coisas simples.

Embora não seja tão limpo quanto algumas das soluções fornecidas, uma maneira realmente simples de lidar com isso é fazer uso do seletor de atributo 'type' do CSS3. Você pode usar isso para adicionar rapidamente seu ícone personalizado como imagem de plano de fundo ao seu link. O resultado é que ambos estão vinculados ao arquivo de destino. Você pode ocultar a imagem original. Fiz isso para obter a seguinte aparência:

Este é o CSS que eu usei para alcançar os resultados acima:

.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; }

No meu exemplo, eu estava mostrando os campos do arquivo usando visualizações.