วิธีการเปลี่ยนไอคอนฟิลด์ไฟล์ (โดยไม่เปลี่ยนคอร์)


11

มาร์กอัพที่สร้างขึ้นสำหรับการแสดงฟิลด์ไฟล์คือ (PDF ในตัวอย่างนี้):

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

ฉันต้องการใช้ภาพไอคอนอื่น ฉันจะทำสิ่งนี้โดยไม่เปลี่ยนเนื้อหาของ / modules / file / icons ได้อย่างไร

ฉันเดาว่าฉันสามารถซ่อนภาพเริ่มต้นและแสดงภาพที่แตกต่างกับ 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

ฉันและtregisได้รับโมดูลไอคอนฟิลด์ไฟล์นี้ทำในขณะที่ผ่านมา หวังว่านี่จะช่วยได้

โมดูลนี้เพิ่มความสามารถในการเปลี่ยนไอคอนฟิลด์ไฟล์เริ่มต้น คุณสามารถใช้ชุดไอคอนแกนหลัก (รวมอยู่ในโมดูลนี้) หรือคุณสามารถกำหนดชุดไอคอนแบบกำหนดเอง


0

คุณสามารถ (ปกติ) ฟังก์ชั่นชุดรูปแบบ preprocess ดังนั้นถ้าคุณ:

  1. ไม่เป็นไรกับการคัดลอกไอคอนทั้งหมดลงในชุดรูปแบบของคุณเพื่อแทนที่ไอคอนอย่างน้อยหนึ่งไอคอน
  2. ไม่สนใจที่จะเขียนทับtheme_file_icon()ธีมของคุณ

คัดลอกmodules/file/iconsไดเรกทอรีทั้งหมดไปยังธีมของคุณ (ฉันใช้file_icons) และเพิ่มฟังก์ชั่น preprocess นี้ไปที่ 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 คุณสามารถใช้สิ่งนี้เพื่อเพิ่มไอคอนที่กำหนดเองของคุณเป็นภาพพื้นหลังในลิงก์ของคุณ ผลลัพธ์ที่ทั้งคู่เชื่อมโยงกับไฟล์เป้าหมาย จากนั้นคุณสามารถซ่อนภาพต้นฉบับ ฉันทำสิ่งนี้เพื่อให้ได้ลักษณะที่ปรากฏดังต่อไปนี้:

สกรีนช็อตของผลลัพธ์

นี่คือ 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; }

ในตัวอย่างของฉันฉันแสดงฟิลด์ไฟล์โดยใช้มุมมอง

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.