it-swarm-id.com

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.

11
pushka

Anda dapat mengganti theme_file_icon di tema Anda, dan tentukan gambar ikon yang berbeda. Lihat file_icon_path untuk referensi mengenai bagaimana core menentukan ikon mana yang akan digunakan.

Anda juga dapat mengatur variabel "file_icon_directory" ke path ke ikon Anda, sebagai file_icon_path fungsi mencari path dalam variabel itu.

10
jhedstrom

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 defaultnya 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 bekerja, tetapi metode ini memungkinkan Anda untuk menyimpan ikon default di mana mereka berada dan hanya Tweak hal-hal yang diperlukan.

4
wonder95

Saya dan tregis mendapatkan ini Ikon Bidang File modul dilakukan beberapa saat yang 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.

1
Rudá Maia

Meskipun tidak sebersih beberapa solusi yang diberikan, cara yang sangat sederhana untuk mengatasi hal ini adalah dengan menggunakan pemilih atribut 'type' 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:

Screenshot of result

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.

0
Paul Trotter

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. Jangan pedulikan untuk menimpa theme_file_icon() dalam tema Anda.

Salin seluruh modules/file/icons direktori ke tema Anda (saya menggunakan file_icons) dan tambahkan fungsi preproses 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.

0
Cottser