Come cambiare le icone del campo File (senza cambiare core)?

Il markup generato per la visualizzazione di un campo file è (PDF in questo esempio):

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

Vorrei usare un'immagine dell'icona diversa. Come potrei farlo senza cambiare il contenuto di / modules / file / icons?

Immagino di poter nascondere l'immagine predefinita e visualizzarne una diversa con CSS, ma sembra un po 'confusa.

È possibile ignorare theme_file_iconil tema e specificare immagini di icone diverse. Vedi file_icon_pathper riferimento riguardo a come core determina quali icone usare.

Puoi anche impostare la variabile "file_icon_directory" sul percorso delle tue icone, poiché la file_icon_pathfunzione cerca il percorso in quella variabile.

Due note aggiuntive su questo:

1. Non è necessario copiare tutti i file icona predefiniti nella directory del tema.
2. Se si utilizza un'icona personalizzata, è necessario che abbia un nome appropriato affinché possa essere trovata.

Ad esempio, avevo bisogno di usare un'icona personalizzata per un file .bib (bibtex). Questo tipo è mappato in file_default_mimetype_mapping () , ma per impostazione predefinita è l'icona di testo predefinita poiché non esiste un'icona specificatamente definita per quel tipo di mime (text / x-bibtex).

Ho scavalcato theme_file_icon () nel template.php del mio tema, ma l'ho fatto in modo che il percorso dell'icona fosse modificato solo se necessario, e non dovevo copiare la directory delle icone predefinita nella mia cartella del tema:

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

La seconda cosa è che devi nominare l'icona in modo appropriato. Se mantieni solo l'uso di file_icon_url () , questo codice da quella funzione determinerà il nome del file per l'icona:

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

Quindi nel mio caso, avevo bisogno di nominare il mio file text-x-bibtex.png. Naturalmente, se vuoi semplicemente nominarlo come preferisci (bibtex.png in questo caso), puoi semplicemente impostare manualmente il nome del file:

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

O uno funzionerà, ma questo metodo ti consente di mantenere le icone predefinite dove sono e modificare le cose solo se necessario.

Io e Tregis abbiamo fatto questo modulo Icone Campo File fatto un po 'di tempo fa. Spero che questo ti aiuti

Questo modulo aggiunge la possibilità di modificare le icone dei campi di file predefiniti. Puoi utilizzare i pacchetti di icone principali (inclusi in questo modulo) oppure puoi definire un pacchetto di icone personalizzato.

Puoi (di solito) preelaborare le funzioni del tema. Quindi se tu:

1. Va bene copiare tutte le icone nel tema per sovrascrivere una o più icone.
2. Non preoccuparti di ignorare il theme_file_icon()tuo tema.

Copia l'intera modules/file/iconsdirectory sul tuo tema (che ho usato file_icons) e aggiungi questa funzione di preelaborazione al template.php del tuo 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';
}

Puoi anche fare le sostituzioni condizionali in questo modo ala @ wonder95 ma volevo mantenere le cose semplici.

Pur non essendo pulito come alcune delle soluzioni fornite, un modo davvero semplice di gestirlo è utilizzare il selettore di attributi "type" CSS3. Puoi usarlo per aggiungere rapidamente la tua icona personalizzata come immagine di sfondo al tuo link. Il risultato è che entrambi sono collegati al file di destinazione. È quindi possibile nascondere l'immagine originale. L'ho fatto per ottenere il seguente aspetto:

Questo è il CSS che ho usato per ottenere i risultati sopra:

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

Nel mio esempio stavo mostrando i campi del file usando le viste.