Как изменить иконки файловых полей (без смены ядра)?


11

Сгенерированная разметка для отображения поля файла (PDF в этом примере):

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

Я хотел бы использовать другое изображение значка. Как я могу сделать это без изменения содержимого / modules / file / icons?

Я думаю, я мог бы скрыть изображение по умолчанию и отобразить другое изображение с помощью CSS, но кажется немного грязным.

Ответы:


10

Вы можете переопределить theme_file_iconв своей теме, а также указать различные значки изображений. См. file_icon_pathДля справки относительно того, как ядро ​​определяет, какие значки использовать.

Вы также можете установить переменную file_icon_directory для пути к значкам, так как file_icon_pathфункция ищет путь в этой переменной.


Исходя из того, что сказал jhedstrom, я написал блог для начинающих о том, как использовать две функции выше для достижения этого решения здесь . Надеюсь, это кому-нибудь пригодится!
Элисон

4

Два дополнительных примечания по этому вопросу:

  1. Нет необходимости копировать все файлы значков по умолчанию в каталог вашей темы.
  2. Если вы используете пользовательский значок, он должен быть соответствующим образом назван, чтобы его можно было найти.

Как пример, мне нужно было использовать пользовательский значок для файла .bib (bibtex). Этот тип отображается в file_default_mimetype_mapping () , но по умолчанию используется значок текста по умолчанию, поскольку для этого типа MIME специально не определен значок (text / x-bibtex).

Я переопределил theme_file_icon () в template.php моей темы, но я сделал это так, чтобы путь к значкам изменялся только по мере необходимости, и мне не пришлось копировать каталог значков по умолчанию в каталог моей темы:

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

Во-вторых, вы должны правильно назвать иконку. Если вы просто продолжите использовать file_icon_url () , этот код из этой функции будет определять имя файла для иконки:

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

Поэтому в моем случае мне нужно было назвать мой файл text-x-bibtex.png. Конечно, если вы хотите просто назвать его как хотите (в данном случае bibtex.png), вы можете просто установить имя файла вручную:

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

Любой из них будет работать, но этот метод позволяет вам сохранять значки по умолчанию там, где они есть, и настраивать их только по мере необходимости.


1

Я и Tregis сделали этот модуль File Field Icons некоторое время назад. Надеюсь это поможет

В этих модулях добавлена ​​возможность изменять значки полей файлов по умолчанию. Вы можете использовать основные пакеты значков (включенные в этот модуль), или вы можете определить пользовательский пакет значков.


0

Вы можете (обычно) предварительно обработать функции темы. Так что если вы:

  1. Все в порядке с копированием всех значков в вашу тему, чтобы переопределить один или несколько значков.
  2. Не волнуйтесь, чтобы переопределить theme_file_icon()в вашей теме.

Скопируйте весь modules/file/iconsкаталог в вашу тему (я использовал file_icons) и добавьте эту функцию предварительной обработки в template.php вашей темы:

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

Вы также можете сделать условные переопределения таким образом ala @ wonder95, но я хотел, чтобы все было просто.


0

Хотя это и не так чисто, как некоторые из приведенных решений, по-настоящему простой способ справиться с этим - использовать CSS3-селектор атрибута type. Вы можете использовать это, чтобы быстро добавить свой собственный значок в качестве фонового изображения для вашей ссылки. Результат, что оба связаны с целевым файлом. Затем вы можете скрыть исходное изображение. Я сделал это, чтобы получить следующий вид:

Скриншот результата

Это CSS, который я использовал для достижения результатов выше:

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

В моем примере я показывал поля файла, используя представления.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.