Concrete 5 : Add a filetype-logo to the "File-Block" [TinyHowTo]

A small how-to add a CSS selector to the File-block in the Concrete 5.4 base install :

The Goal

When linking to a file for download, a nice way to brush up the presentation of the link is to display the file-type icon alongside it. This gives the site visitor an idea as to what they are downloading, and makes the link stand out a bit more within the page:






By default, concrete5's file block simply displays a link to the file, without any icon. But adding this icon can be easily done with some quick modifications to the file block's view.php and controller.php files.

Override the File Block's View Template and Controller

First you have to create the folder 'file' in the blocks folder in your concrete5 root. Then copy the files 'view.php' and 'controller.php' from the /concrete/blocks/file/ folder in your newly created one. This will allow you to make changes to these two templates without affecting the core files.

Modify the Controller

Open the controller.php and add the following function to the end of the class :
function getFileExtension() {
$f = $this->getFileObject();
$file_name = $f->getTitle();
$file_extension = explode('.',$file_name);
return $file_extension[1];
}


Modify the View

Now open the view.php and change the line 7 (the HTML link) to :

<a href="<?php echo View::url('/download_file', $controller->getFileID())?>" title="<?php echo stripslashes($controller->getLinkText())?>" class="file-type-<?=$controller->getMimeType()?>"><?php echo stripslashes($controller->getLinkText())?></a>

What you get

As a result you will have the usual link, but now with a CSS selector you can use to add a file-type logo/icon, like this style-sheet (case PDF) :

.file-type-pdf {
display:block;
background-image:url(./images/pdf.gif);
background-position:0 center;
background-repeat:no-repeat;
padding-left:20px;
}


Now you have a file-type logo with your file download in Concrete5.