Bagaimana cara mengubah ikon bidang File (tanpa mengubah inti)?

Markup yang dihasilkan untuk menampilkan bidang file adalah (PDF dalam contoh ini):

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

Saya ingin menggunakan gambar ikon yang berbeda. Bagaimana saya bisa melakukan ini tanpa mengubah konten / modul / file / ikon?

Saya kira saya bisa menyembunyikan gambar default dan menampilkan yang berbeda dengan CSS, tetapi tampaknya agak berantakan.

Anda dapat mengganti theme_file_icondalam tema Anda, dan menentukan gambar ikon yang berbeda. Lihat file_icon_pathreferensi tentang bagaimana core menentukan ikon mana yang digunakan.

Anda juga dapat mengatur variabel "file_icon_directory" ke path ke ikon Anda, karena file_icon_pathfungsi mencari path dalam variabel itu.

Dua catatan tambahan tentang ini:

1. Tidak perlu menyalin semua file ikon default ke direktori tema Anda.
2. Jika Anda menggunakan ikon khusus, ikon tersebut harus dinamai dengan tepat agar dapat ditemukan.

Sebagai contoh, saya harus menggunakan ikon khusus untuk file .bib (bibtex). Tipe ini dipetakan dalam file_default_mimetype_mapping () , tetapi ini default ke ikon teks default karena tidak ada ikon yang ditentukan secara spesifik untuk tipe mime itu (teks / x-bibtex).

Saya mengesampingkan theme_file_icon () di template.php tema saya, tetapi saya melakukannya sehingga jalur ikon hanya dimodifikasi sesuai kebutuhan, dan saya tidak perlu menyalin direktori ikon default ke direktori tema saya:

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

Yang kedua adalah Anda harus memberi nama ikon dengan tepat. Jika Anda tetap menggunakan file_icon_url () , kode ini dari fungsi itu akan menentukan nama file untuk ikon:

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

Jadi dalam kasus saya, saya perlu memberi nama file teks-x-bibtex.png saya. Tentu saja, jika Anda ingin memberi nama saja apa pun yang Anda inginkan (bibtex.png dalam kasus ini), Anda bisa mengatur nama file secara manual:

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

Salah satu akan berfungsi, tetapi metode ini memungkinkan Anda untuk menjaga ikon default di mana mereka berada dan hanya men-tweak hal-hal yang diperlukan.

Saya dan tregis menyelesaikan modul File Field Ikon ini beberapa waktu lalu. Semoga ini membantu

Modul ini menambahkan kemampuan untuk mengubah ikon bidang file default. Anda dapat menggunakan paket ikon inti (termasuk dalam modul ini), atau Anda dapat menentukan paket ikon khusus.

Anda dapat (biasanya) fungsi tema preproses. Jadi jika kamu:

1. Anda boleh menyalin semua ikon ke tema Anda untuk mengganti satu atau lebih ikon.
2. Tidak peduli untuk mengesampingkan theme_file_icon()dalam tema Anda.

Salin seluruh modules/file/iconsdirektori ke tema Anda (saya menggunakan file_icons) dan tambahkan fungsi preprocess ini ke template.php tema Anda:

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

Anda juga bisa melakukan conditional override dengan cara ini ala @ wonder95 tapi saya ingin membuat semuanya tetap sederhana.

Meskipun tidak sebersih beberapa solusi yang diberikan, cara yang sangat sederhana untuk mengatasi ini adalah dengan menggunakan pemilih atribut 'tipe' CSS3. Anda dapat menggunakan ini untuk dengan cepat menambahkan ikon khusus Anda sebagai gambar latar belakang ke tautan Anda. Hasilnya bahwa keduanya ditautkan ke file target. Anda kemudian dapat menyembunyikan gambar asli. Saya melakukan ini untuk mendapatkan penampilan berikut:

Ini adalah CSS yang saya gunakan untuk mencapai hasil di atas:

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

Dalam contoh saya, saya menunjukkan bidang file menggunakan tampilan.