web-dev-qa-db-fra.com

Comment changer les icônes de champ de fichier (sans changer de noyau)?

Le balisage généré pour afficher un champ de fichier est (PDF dans cet exemple):

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

Je voudrais utiliser une image d'icône différente. Comment pourrais-je faire cela sans changer le contenu de/modules/fichier/icônes?

Je suppose que je pourrais masquer l'image par défaut et en afficher une autre avec CSS, mais cela semble un peu compliqué.

7files
11
pushka

Vous pouvez remplacer theme_file_icon dans votre thème et spécifiez différentes images d'icônes. Voir file_icon_path pour référence sur la façon dont le noyau détermine les icônes à utiliser.

Vous pouvez également définir la variable "file_icon_directory" sur le chemin d'accès à vos icônes, comme file_icon_path la fonction recherche le chemin dans cette variable.

10
jhedstrom

Deux notes supplémentaires à ce sujet:

  1. Il n'est pas nécessaire de copier tous les fichiers d'icônes par défaut dans votre répertoire de thèmes.
  2. Si vous utilisez une icône personnalisée, elle doit être nommée de manière appropriée pour être trouvée.

Par exemple, j'avais besoin d'utiliser une icône personnalisée pour un fichier .bib (bibtex). Ce type est mappé dans file_default_mimetype_mapping () , mais il correspond par défaut à l'icône de texte par défaut car il n'y a pas d'icône spécifiquement définie pour ce type de mime (text/x-bibtex).

J'ai surchargé theme_file_icon () dans le template.php de mon thème, mais je l'ai fait pour que le chemin d'icône ne soit modifié que si nécessaire, et je n'ai pas eu à copier le répertoire d'icônes par défaut dans mon répertoire de thème:

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

La deuxième chose est que vous devez nommer l'icône de manière appropriée. Si vous conservez simplement l'utilisation de file_icon_url () , ce code de cette fonction déterminera le nom de fichier de l'icône:

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

Donc dans mon cas, j'avais besoin de nommer mon fichier text-x-bibtex.png. Bien sûr, si vous souhaitez simplement le nommer comme vous le souhaitez (bibtex.png dans ce cas), vous pouvez simplement définir le nom du fichier manuellement:

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

L'un ou l'autre fonctionnera, mais cette méthode vous permet de conserver les icônes par défaut là où elles se trouvent et de ne modifier que les éléments nécessaires.

4
wonder95

Moi et tregis avons obtenu ce module File Field Icons il y a quelque temps. J'espère que cela t'aides

Ce module ajoute la possibilité de modifier les icônes de champ de fichier par défaut. Vous pouvez utiliser des packages d'icônes de base (inclus dans ce module), ou vous pouvez définir un package d'icônes personnalisé.

1
Rudá Maia

Tout en n'étant pas aussi propre que certaines des solutions proposées, un moyen très simple de résoudre ce problème consiste à utiliser le sélecteur d'attribut CSS3 "type". Vous pouvez l'utiliser pour ajouter rapidement votre icône personnalisée en tant qu'image d'arrière-plan à votre lien. Résultat: les deux sont liés au fichier cible. Vous pouvez ensuite masquer l'image d'origine. J'ai fait cela pour obtenir l'apparence suivante:

Screenshot of result

Voici le CSS que j'ai utilisé pour obtenir les résultats ci-dessus:

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

Dans mon exemple, je montrais les champs du fichier à l'aide de vues.

0
Paul Trotter

Vous pouvez (généralement) prétraiter des fonctions de thème. Donc si vous:

  1. Acceptez de copier toutes les icônes dans votre thème pour remplacer une ou plusieurs icônes.
  2. Ne vous souciez pas de remplacer theme_file_icon() dans votre thème.

Copiez l'intégralité de modules/file/icons répertoire vers votre thème (j'ai utilisé file_icons) et ajoutez cette fonction de prétraitement au template.php de votre thème:

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

Vous pouvez également effectuer des remplacements conditionnels de cette façon ala @ wonder95 mais je voulais que les choses soient simples.

0
Cottser