Jump to content
mike77

Generating file icons (File Field)

Recommended Posts

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

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...