फ़ाइल फ़ील्ड आइकन (कोर को बदले बिना) कैसे बदलें?


11

फ़ाइल फ़ील्ड प्रदर्शित करने के लिए उत्पन्न मार्कअप है (इस उदाहरण में पीडीएफ):

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

मैं एक अलग आइकन छवि का उपयोग करना चाहता हूं। मैं / मॉड्यूल / फ़ाइल / आइकन की सामग्री को बदले बिना ऐसा कैसे कर सकता हूं?

मुझे लगता है कि मैं डिफ़ॉल्ट छवि को छिपा सकता हूं और सीएसएस के साथ एक अलग प्रदर्शन कर सकता हूं, लेकिन थोड़ा गड़बड़ लगता है।

जवाबों:


10

आप theme_file_iconअपने विषय में ओवरराइड कर सकते हैं , और विभिन्न आइकन छवियों को निर्दिष्ट कर सकते हैं । file_icon_pathसंदर्भ के लिए देखें कि कोर किस प्रतीक का उपयोग करने के लिए निर्धारित करता है।

आप "file_icon_directory" चर को अपने आइकन पर पथ पर सेट कर सकते हैं, क्योंकि file_icon_pathफ़ंक्शन उस चर में पथ की तलाश करता है।


इसके बाद jhedstrom ने कहा कि मैंने इस समाधान को प्राप्त करने के लिए ऊपर के दो कार्यों का उपयोग करने के बारे में एक नौसिखिया ब्लॉग लिखा है । आशा है कि किसी के लिए उपयोगी है!
एलिसन

4

इस पर दो अतिरिक्त नोट:

  1. सभी डिफ़ॉल्ट आइकन फ़ाइलों को अपनी थीम निर्देशिका में कॉपी करना आवश्यक नहीं है।
  2. यदि आप एक कस्टम आइकन का उपयोग कर रहे हैं, तो इसे खोजने के लिए इसे उचित रूप से नामित किया जाना चाहिए।

एक उदाहरण के रूप में, मुझे एक .bib (bibtex) फ़ाइल के लिए एक कस्टम आइकन का उपयोग करने की आवश्यकता थी। यह प्रकार file_default_mimetype_mapping () में मैप किया गया है , लेकिन यह डिफॉल्ट टेक्स्ट आइकन को डिफॉल्ट करता है, क्योंकि उस माइम टाइप (टेक्स्ट / x-bibtex) के लिए विशेष रूप से परिभाषित आइकन नहीं है।

मैंने अपने विषय के खाका में थीम_file_icon () को ओवररोड किया है। लेकिन मैंने ऐसा इसलिए किया ताकि आइकन पथ केवल आवश्यकतानुसार संशोधित हो, और मुझे अपने विषय निर्देशिका में डिफ़ॉल्ट आइकन निर्देशिका की प्रतिलिपि नहीं बनानी थी:

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

इसलिए मेरे मामले में, मुझे अपनी फ़ाइल टेक्स्ट-x-bibtex.png नाम देने की आवश्यकता थी। बेशक, यदि आप इसे केवल जो चाहें नाम दें (bibtex.png इस मामले में), आप बस फ़ाइल फ़ाइल मैन्युअल रूप से सेट कर सकते हैं:

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

या तो एक काम करेगा, लेकिन यह विधि आपको डिफ़ॉल्ट आइकन रखने की अनुमति देती है जहां वे हैं और केवल आवश्यकतानुसार चीजों को घुमाएं।


1

मुझे और ट्रेगिस को कुछ समय पहले यह फाइल फील्ड आइकन मॉड्यूल मिला । उम्मीद है की यह मदद करेगा

यह मॉड्यूल डिफ़ॉल्ट फ़ाइल फ़ील्ड आइकन को बदलने की क्षमता जोड़ता है। आप कोर आइकन पैकेज (इस मॉड्यूल में शामिल) का उपयोग कर सकते हैं, या आप कस्टम आइकन पैकेज को परिभाषित कर सकते हैं।


0

आप (आमतौर पर) पूर्वप्रक्रिया थीम कार्य कर सकते हैं। तो फिर आप:

  1. एक या अधिक आइकन को ओवरराइड करने के लिए अपने विषय के सभी आइकन कॉपी करने के साथ ठीक हैं।
  2. theme_file_icon()अपने विषय में ओवरराइड की परवाह न करें।

संपूर्ण modules/file/iconsनिर्देशिका को अपने विषय में कॉपी करें (मैंने उपयोग किया है file_icons) और इस प्रीप्रोसेस फ़ंक्शन को अपने विषय के टेम्पलेट में जोड़ें।

/**
 * 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 के 'प्रकार' विशेषता चयनकर्ता का उपयोग करना है। आप अपने कस्टम आइकन को पृष्ठभूमि लिंक के रूप में अपने लिंक पर जल्दी से जोड़ने के लिए इसका उपयोग कर सकते हैं। परिणाम यह है कि दोनों लक्ष्य फ़ाइल से जुड़े हैं। फिर आप मूल छवि छिपा सकते हैं। मैंने निम्नलिखित उपस्थिति प्राप्त करने के लिए ऐसा किया:

परिणाम का स्क्रीनशॉट

यह सीएसएस है जिसका उपयोग मैंने उपरोक्त परिणामों को प्राप्त करने के लिए किया है:

.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 Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.