Jak zmienić ikony pól pliku (bez zmiany rdzenia)?


11

Wygenerowany znacznik do wyświetlania pola pliku to (PDF w tym przykładzie):

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

Chciałbym użyć innego obrazu ikony. Jak mogę to zrobić bez zmiany zawartości / modułów / plików / ikon?

Myślę, że mógłbym ukryć domyślny obraz i wyświetlić inny z CSS, ale wydaje się nieco niechlujny.

Odpowiedzi:


10

Możesz zastąpić theme_file_iconmotyw i określić różne obrazy ikon. Zobacz, file_icon_pathw jaki sposób rdzeń określa, których ikon użyć.

Możesz także ustawić zmienną „file_icon_directory” na ścieżkę do swoich ikon, ponieważ file_icon_pathfunkcja szuka ścieżki w tej zmiennej.


Kontynuując to, co mówi jhedstrom, napisałem blog dla początkujących, w jaki sposób korzystać z dwóch powyższych funkcji, aby osiągnąć to rozwiązanie tutaj . Mam nadzieję, że komuś się to przyda!
Alison,

4

Dwie dodatkowe uwagi na ten temat:

  1. Nie jest konieczne kopiowanie wszystkich domyślnych plików ikon do katalogu motywów.
  2. Jeśli używasz niestandardowej ikony, należy ją odpowiednio nazwać, aby można ją było znaleźć.

Na przykład musiałem użyć niestandardowej ikony dla pliku .bib (bibtex). Ten typ jest odwzorowany w file_default_mimetype_mapping () , ale domyślnie jest domyślną ikoną tekstową, ponieważ nie ma specjalnie zdefiniowanej ikony dla tego typu MIME (text / x-bibtex).

Przesłoniłem theme_file_icon () w szablonie theme.php mojego motywu, ale zrobiłem to, aby ścieżka do ikon była modyfikowana tylko w razie potrzeby i nie musiałam kopiować domyślnego katalogu ikon do mojego katalogu motywów:

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

Po drugie, musisz odpowiednio nazwać ikonę. Jeśli nadal korzystasz z funkcji file_icon_url () , ten kod z tej funkcji określi nazwę pliku ikony:

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

Więc w moim przypadku musiałem nazwać mój plik text-x-bibtex.png. Oczywiście, jeśli chcesz nadać jej dowolną nazwę (w tym przypadku bibtex.png), możesz po prostu ustawić nazwę pliku ręcznie:

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

Każdy z nich będzie działał, ale ta metoda pozwala zachować domyślne ikony tam, gdzie są i dostosowywać tylko w razie potrzeby.


1

Ja i tregis zrobiliśmy ten moduł File Field Icons jakiś czas temu. Mam nadzieję że to pomoże

Ten moduł dodaje możliwość zmiany domyślnych ikon pól plików. Możesz użyć podstawowych pakietów ikon (zawartych w tym module) lub zdefiniować niestandardowy pakiet ikon.


0

Możesz (zwykle) wstępnie przetwarzać funkcje motywu. Więc jeśli ty:

  1. Możesz skopiować wszystkie ikony do motywu, aby zastąpić jedną lub więcej ikon.
  2. Nie przejmuj się nadpisywaniem theme_file_icon()motywu.

Skopiuj cały modules/file/iconskatalog do motywu (użyłem file_icons) i dodaj tę funkcję przetwarzania wstępnego do szablonu theme.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';
}

W ten sposób można również wykonać przesłonięcia warunkowe ala @ wonder95, ale chciałem zachować prostotę.


0

Choć nie jest tak czysty, jak niektóre z podanych rozwiązań, bardzo prostym sposobem radzenia sobie z tym jest skorzystanie z selektora atrybutów „typ” CSS3. Możesz go użyć, aby szybko dodać niestandardową ikonę jako obraz tła do linku. W rezultacie oba są połączone z plikiem docelowym. Następnie możesz ukryć oryginalny obraz. Zrobiłem to, aby uzyskać następujący wygląd:

Zrzut ekranu wyniku

Oto CSS, którego użyłem do osiągnięcia powyższych wyników:

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

W moim przykładzie pokazywałem pola plików za pomocą widoków.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.