it-swarm.it

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.

11
pushka

Puoi ignorare theme_file_icon nel tuo tema e specifica immagini di icone diverse. Vedi file_icon_path come riferimento su come core determina quali icone usare.

Puoi anche impostare la variabile "file_icon_directory" sul percorso delle tue icone, come file_icon_path La funzione cerca il percorso in quella variabile.

10
jhedstrom

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 continui a usare 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 consente di mantenere le icone predefinite dove si trovano e modificare solo le cose secondo necessità.

4
wonder95

Io e tregis abbiamo ottenuto questo Icone del campo file modulo fatto qualche tempo fa. Spero che sia di aiuto

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.

1
Rudá Maia

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:

Screenshot of result

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.

0
Paul Trotter

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 sostituire theme_file_icon() nel tuo tema.

Copia l'intero modules/file/icons directory al tuo tema (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.

0
Cottser