Wie ändere ich Dateifeldsymbole (ohne den Kern zu ändern)?


11

Das generierte Markup zum Anzeigen eines Dateifelds lautet (PDF in diesem Beispiel):

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

Ich möchte ein anderes Symbolbild verwenden. Wie kann ich dies tun, ohne den Inhalt von / modules / file / icons zu ändern?

Ich denke, ich könnte das Standardbild ausblenden und ein anderes mit CSS anzeigen, aber es scheint ein bisschen chaotisch.

Antworten:


10

Sie können theme_file_iconIhr Thema überschreiben und verschiedene Symbolbilder angeben. Siehe file_icon_pathals Referenz, wie der Kern bestimmt, welche Symbole verwendet werden sollen.

Sie können auch die Variable "file_icon_directory" auf den Pfad zu Ihren Symbolen setzen, da die file_icon_pathFunktion nach dem Pfad in dieser Variablen sucht.


Nach dem, was jhedstrom sagt, habe ich einen neuen Blog darüber geschrieben, wie man die beiden oben genannten Funktionen verwendet, um diese Lösung hier zu erreichen . Hoffe das ist hilfreich für jemanden!
Alison

4

Zwei zusätzliche Hinweise dazu:

  1. Es ist nicht erforderlich, alle Standardsymboldateien in Ihr Themenverzeichnis zu kopieren.
  2. Wenn Sie ein benutzerdefiniertes Symbol verwenden, muss es entsprechend benannt sein, damit es gefunden werden kann.

Als Beispiel musste ich ein benutzerdefiniertes Symbol für eine BIB-Datei (Bibtex) verwenden. Dieser Typ wird in file_default_mimetype_mapping () zugeordnet , verwendet jedoch standardmäßig das Standardtextsymbol, da für diesen MIME-Typ (text / x-bibtex) kein Symbol speziell definiert ist.

Ich habe theme_file_icon () in der template.php meines Themas überschrieben, aber ich habe es so gemacht, dass der Symbolpfad nur nach Bedarf geändert wird und ich das Standard-Symbolverzeichnis nicht in mein Themenverzeichnis kopieren musste:

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

Die zweite Sache ist, dass Sie das Symbol entsprechend benennen müssen. Wenn Sie nur file_icon_url () verwenden , bestimmt dieser Code dieser Funktion den Dateinamen für das Symbol:

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

In meinem Fall musste ich meine Datei text-x-bibtex.png benennen. Wenn Sie es einfach so benennen möchten, wie Sie möchten (in diesem Fall bibtex.png), können Sie den Dateinamen natürlich auch manuell festlegen:

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

Beides funktioniert, aber mit dieser Methode können Sie die Standardsymbole dort belassen, wo sie sich befinden, und die Dinge nur nach Bedarf anpassen.


1

Me and tregis habe diese Datei eingeblendete Symbole Modul vor einer Weile getan. Hoffe das hilft

Dieses Modul bietet die Möglichkeit, Standard-Dateifeldsymbole zu ändern. Sie können Kernsymbolpakete (in diesem Modul enthalten) verwenden oder ein benutzerdefiniertes Symbolpaket definieren.


0

Sie können (normalerweise) Themenfunktionen vorverarbeiten. Also, wenn Sie:

  1. Sie können alle Symbole in Ihr Thema kopieren, um ein oder mehrere Symbole zu überschreiben.
  2. Es ist dir egal, ob theme_file_icon()du dein Thema überschreibst .

Kopieren Sie das gesamte modules/file/iconsVerzeichnis in Ihr Thema (ich habe es verwendet file_icons) und fügen Sie diese Vorverarbeitungsfunktion zur template.php Ihres Themas hinzu:

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

Sie können auf diese Weise auch bedingte Überschreibungen durchführen, aber ich wollte die Dinge einfach halten.


0

Obwohl dies nicht so sauber ist wie einige der angegebenen Lösungen, besteht eine wirklich einfache Möglichkeit, damit umzugehen, darin, den CSS3-Attributselektor 'type' zu verwenden. Sie können dies verwenden, um Ihr benutzerdefiniertes Symbol schnell als Hintergrundbild zu Ihrem Link hinzuzufügen. Das Ergebnis, dass beide mit der Zieldatei verknüpft sind. Sie können dann das Originalbild ausblenden. Ich habe dies getan, um das folgende Erscheinungsbild zu erhalten:

Screenshot des Ergebnisses

Dies ist das CSS, mit dem ich die oben genannten Ergebnisse erzielt habe:

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

In meinem Beispiel habe ich die Dateifelder mithilfe von Ansichten angezeigt.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.