Làm cách nào để thay đổi biểu tượng trường Tệp (không thay đổi lõi)?


11

Đánh dấu được tạo để hiển thị trường tệp là (PDF trong ví dụ này):

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

Tôi muốn sử dụng một hình ảnh biểu tượng khác. Làm thế nào tôi có thể làm điều này mà không thay đổi nội dung của / mô-đun / tệp / biểu tượng?

Tôi đoán rằng tôi có thể ẩn hình ảnh mặc định và hiển thị một hình ảnh khác với CSS, nhưng có vẻ hơi lộn xộn.

Câu trả lời:


10

Bạn có thể ghi đè theme_file_icontrong chủ đề của mình và chỉ định các hình ảnh biểu tượng khác nhau. Xem file_icon_pathđể tham khảo về cách lõi xác định biểu tượng nào sẽ sử dụng.

Bạn cũng có thể đặt biến "file_icon_directory" thành đường dẫn đến các biểu tượng của mình, vì file_icon_pathhàm tìm đường dẫn trong biến đó.


Tiếp theo những gì jhedstrom nói rằng tôi đã viết một blog mới về cách sử dụng hai chức năng trên để đạt được giải pháp này tại đây . Hy vọng điều đó hữu ích cho ai đó!
Alison

4

Hai lưu ý thêm về điều này:

  1. Không cần thiết phải sao chép tất cả các tệp biểu tượng mặc định vào thư mục chủ đề của bạn.
  2. Nếu bạn đang sử dụng một biểu tượng tùy chỉnh, nó phải được đặt tên thích hợp để tìm thấy nó.

Ví dụ, tôi có nhu cầu sử dụng biểu tượng tùy chỉnh cho tệp .bib (bibtex). Loại này được ánh xạ trong file_default_mimetype_mapping () , nhưng nó mặc định là biểu tượng văn bản mặc định vì không có biểu tượng được xác định cụ thể cho loại mime đó (text / x-bibtex).

Tôi đã ghi đè theme_file_icon () trong template.php của chủ đề, nhưng tôi đã làm điều đó để đường dẫn biểu tượng chỉ được sửa đổi khi cần và tôi không phải sao chép thư mục biểu tượng mặc định vào thư mục chủ đề của mình:

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

Điều thứ hai là bạn phải đặt tên cho biểu tượng một cách thích hợp. Nếu bạn chỉ sử dụng file_icon_url () , mã này từ hàm đó sẽ xác định tên tệp cho biểu tượng:

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

Vì vậy, trong trường hợp của tôi, tôi cần đặt tên cho tệp của mình là text-x-bibtex.png. Tất nhiên, nếu bạn muốn đặt tên theo bất cứ thứ gì bạn muốn (bibtex.png trong trường hợp này), bạn chỉ có thể đặt tên tệp theo cách thủ công:

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

Một trong hai sẽ hoạt động, nhưng phương pháp này cho phép bạn giữ các biểu tượng mặc định ở vị trí của chúng và chỉ điều chỉnh những thứ cần thiết.


1

Tôi và tregis đã hoàn thành mô-đun biểu tượng trường tệp này một lúc trước. Hi vọng điêu nay co ich

Mô-đun này thêm khả năng thay đổi các biểu tượng trường tệp mặc định. Bạn có thể sử dụng các gói biểu tượng cốt lõi (có trong mô-đun này) hoặc bạn có thể xác định gói biểu tượng tùy chỉnh.


0

Bạn có thể (thường) tiền xử lý các chức năng chủ đề. Vì vậy, nếu bạn:

  1. Không sao với việc sao chép tất cả các biểu tượng vào chủ đề của bạn để ghi đè một hoặc nhiều biểu tượng.
  2. Đừng quan tâm đến việc ghi đè theme_file_icon()trong chủ đề của bạn.

Sao chép toàn bộ modules/file/iconsthư mục vào chủ đề của bạn (tôi đã sử dụng file_icons) và thêm chức năng tiền xử lý này vào template.php của chủ đề của bạn:

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

Bạn cũng có thể ghi đè có điều kiện theo cách này ala @ wonder95 nhưng tôi muốn giữ mọi thứ đơn giản.


0

Mặc dù không sạch như một số giải pháp được đưa ra, một cách xử lý thực sự đơn giản này là sử dụng bộ chọn thuộc tính 'loại' CSS3. Bạn có thể sử dụng điều này để nhanh chóng thêm biểu tượng tùy chỉnh của bạn làm hình nền vào liên kết của bạn. Kết quả là cả hai được liên kết với tệp mục tiêu. Sau đó bạn có thể ẩn hình ảnh gốc. Tôi đã làm điều này để có được sự xuất hiện sau đây:

Ảnh chụp màn hình kết quả

Đây là CSS tôi đã sử dụng để đạt được kết quả ở trên:

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

Trong ví dụ của tôi, tôi đã hiển thị các trường tệp bằng cách sử dụng các khung nhìn.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.