Як змінити піктограми файлів (без зміни ядра)?


11

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

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

Я хотів би використовувати інше зображення значка. Як я можу це зробити, не змінюючи вміст / модулів / файлів / піктограм?

Я думаю, я міг приховати зображення за замовчуванням і відобразити інше з 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

Мені та трегім цей модуль значків файлових полів був зроблений деякий час тому. Сподіваюсь, це допомагає

Цей модуль додає можливість зміни піктограм файлового поля за замовчуванням. Ви можете використовувати основні пакети значків (включені в цей модуль) або ви можете визначити спеціальний пакет значків.


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.