Generating file icons (File Field)

[mike77]

Here is a simple script I wrote for my project and I thought maybe someone will find it useful just to avoid writing obvious things. If you use File type field in your template and want to display added files in nice graphic manner instead of ordinary file name this code may help.

The script - when included to the template - recognizes extension of added file and displays apprioprate icon as an output on the page. In present form the script can deal with these file extensions:

pdf

doc

docx

xls

xlsx

xlsm

mp3

txt

ppt

pptx

wmv

mp4

mpeg

html

The file extensions mentioned above must of course be added in "Details" section of File field in admin panel.

<?php
$fsize = 90; //icon px width in output
$field = 'file'; //name of the field in ProcessWire panel

$pdfImg = 'http://cdn1.iconfinder.com/data/icons/CrystalClear/128x128/mimetypes/pdf.png';
$docImg = 'http://cdn2.iconfinder.com/data/icons/sleekxp/Microsoft%20Office%202007%20Word.png';
$pptImg = 'http://cdn2.iconfinder.com/data/icons/sleekxp/Microsoft%20Office%202007%20PowerPoint.png';
$txtImg = 'http://cdn1.iconfinder.com/data/icons/CrystalClear/128x128/mimetypes/txt2.png';
$xlsImg = 'http://cdn2.iconfinder.com/data/icons/sleekxp/Microsoft%20Office%202007%20Excel.png';
$audioImg = 'http://cdn2.iconfinder.com/data/icons/oxygen/128x128/mimetypes/audio-x-pn-realaudio-plugin.png';
$videoImg = 'http://cdn4.iconfinder.com/data/icons/Pretty_office_icon_part_2/128/video-file.png';
$htmlImg = 'http://cdn1.iconfinder.com/data/icons/nuove/128x128/mimetypes/html.png';
$fileImg = 'http://cdn3.iconfinder.com/data/icons/musthave/128/New.png';

$files = $page->$field;
foreach ($files as $f) {   
    switch (get_file_extension($f)) {
        case 'pdf':
            $img = $pdfImg;
            break;
        case 'doc':
            $img = $docImg;
            break;
        case 'docx':
            $img = $docImg;
            break;
        case 'txt':
            $img = $txtImg;
            break;
        case 'xls':
            $img = $xlsImg;
            break;
        case 'xlsx':
            $img = $xlsImg;
            break;
        case 'xlsm':
            $img = $xlsImg;
            break;
        case 'ppt':
            $img = $pptImg;
            break;
        case 'pptx':
            $img = $pptImg;
            break;
        case 'mp3':
            $img = $audioImg;
            break;
        case 'wmv':
            $img = $videoImg;
            break;
        case 'mp4':
            $img = $videoImg;
            break;
        case 'mpeg':
            $img = $videoImg;
            break;
        case 'html':
            $img = $htmlImg;
            break;
        default:
            $img = $fileImg;
            break;
    }   
   
    echo "<a href='{$f->url}' target='_blank'><img src='$img' title='$f' width='$fsize' /></a><p>{$f->description}</p>";
  
}
function get_file_extension($f) {
    $ftype = pathinfo($f);
    return $extension = $ftype['extension'];
}
?>

show-filetype-icon.php

[diogo]

I like your idea, but it's also very simple to do this only with css http://www.hongkiat.com/blog/css3-attribute-selector/, or if you really want it to be crossbrowser you can also do this in php:

echo "<a href='{$f->url}' class='file-". get_file_extension($f) . "'>"

and use the class on the css.

edit: not saying my solutions are better though

[Macrura]

i agree with diogo, in that using classes based on the file extension is what I have seen in practice, for icon display;

interesting use of the iconfinder CDN though!

Usually if I'm doing anything with icons these days it will be in a icon font, like Entypo, Fontawesome, or Glyphicons which are included in bootstrap; this way you're covered for scaling and retina....

[mike77]

CSS way is great but still the code is ready to copy & paste if needed.

[Roych]

Hello, I like this but how do I use this within

<?php foreach($page->downloadi as $download): ?>
 <a href="<?=$download->fajli->url ?>">Download</a><?=$download->Content ?>
<?php endforeach; ?>

I'm using pagetable field for adding my "downloads"

Thank you

R