User:CharlesC/Template for document links showing file icons

I have created a template for people who run or use mediawiki websites to easily create better links to embedded files. It shows an icon, the filename - which when clicked on takes you straight to the file - and an 'info' link at the end which takes you to the wiki page for the file where it gives stats (i.e. who uploaded it, how big it is e.t.c.). The wiki page for the file can also be edited like a normal page so a synopsis for the file could be written here.

It only works on Mediawiki websites that support embedding external images, which is most personal and public sites and corporate intranet sites that use it. Main Wikimedia sites like Wikipedia and Meta have this feature switched off.

As meta doesn't support this kind of template, here is an image of how a file would be displayed using this template:

Making sure your wiki is setup to enable uploads and embedded images

Enable 'External images'

For this template to work your wiki must have file uploads enabled (see http://meta.wikimedia.org/wiki/Uploading_files) and users must be logged in, otherwise they won't get the "Upload file" link to the left of the page.

Also you need to to enable embedding of external images. If you write the full URL of an image file on the internet in a wiki page (e.g. http://www.google.com/intl/en/images/logo.gif) and it doesn't show up as an image when you preview or save the page then in LocalSettings.php you need to add:

$wgAllowExternalImages = true;

Allow various filetypes

Also need to make sure that you allow filetypes that might get uploaded.

Again in localSettings.php add a line such as this somewhere:

$wgFileExtensions = array( 'png', 'gif', 'jpg', 'jpeg', 'pdf', 'doc', 'xls' );

Add any filetypes you choose to the list.

Creating a document type template

First you have to find and upload some small icons representing some general filetypes that you might want to use - see list below for example of types:

pdf
word
excel
powerpoint
video
document - to be a catch all for any other filetype

These examples include some proprietary ~~Adobe and~~ Microsoft document types, you may wish to use generic words instead.

When you upload the PNG (or JPG) icon files call them something like: 'word_icon.png', 'excel_icon.png', 'pdf_icon.png' etc.

Then upload this icon (or a similar icon to your wiki):

(You will have to create a version of this template for each of the main filetypes you might want to use).

Example: Creating template for handling PDF files

First of all we'll need to get the full path of your pdf icon you uploaded. Make the pdf icon appear on a page somewhere using the usual image format, eg: [[Image:pdf_icon.png]] or whatever your icon is called. Then right-click on the graphic and select 'properties'. Find the full image path in the dialogue box that your browser gives you. It will be something like:

http://XYZ/wiki/images/f/f2/pdf_icon.png

Make a note of this, then similarly get the full path for the small 'i' icon .

On your own Mediawiki site type 'template:pdf' at the end of the site's URL. For example navigate to your Main Page and in the address bar of your browser highlight 'Main Page' and replace it with 'template:pdf' (ignore quotes). The site should then tell you that page doesn't exist or is empty. Now click the 'edit' link and paste this code in:

http://XYZ/wiki/images/f/f2/pdf_icon.png [[media:{{{1}}}|{{{2}}}]] <span class="plainlinks">[{{SERVER}}{{localurl:image:{{{1}}}}} http://XYZ/wiki/images/3/34/Info_circle.png]</span>

Where does the media: tag come from?

Note: To make the code more portable - i.e. more easily transferrable to other wikis, replace any references to the server name with {{SERVER}}. In the above example references to http://XYZ/wiki/images... becomes {{SERVER}}/wiki/images...

Now to use this template the format is:

{{pdf|DOCUMENT FILENAME|DOCUMENT TITLE}}

First of all the document in question must have been uploaded before it can be referenced. Also when files are uploaded you will notice the name format is something like "Image:test_document.pdf". When you reference the document name, ignore the 'Image:' bit and just write the full name of the document including the extension.

The following example will use the above template to recreate this: .

{{pdf|Example PDF document.pdf|Example PDF document}}

Repeat for other filetypes

Now repeat the above for all other file types that you might want to be able to show in this format. You could also have a template called 'doc' or 'document' that has a generic document icon and can be used as a catch all for any other document filetype that doesn't have a specific template.

Getting rid of extra whitespace in IE

Internet Explorer and Opera seem to show an extra space after the icon (where Firefox doesn't). To cure this go to: http://<your wiki address>/index.php/MediaWiki:Monobook.css, click the 'edit' link and add this code:

#bodyContent .plainlinks a {
    background: none !important;
    padding: 0;
}

PDF download extension in Firefox

If you have the PDF download extension installed in Firefox and you click on the 'info circle link' of a PDF file link, a pop-up will ask you if you want to open/download the file information page because of the '.pdf' ending for the 'image:filename' hyperlink. The open/download pop-up should give you the option to 'bypass PDF download' which opens the correct info page.

Generic template for many filetypes

See Generic File Icon Template section on talk page for information on creating a single templates rather than multiple ones and the pros and cons of either method.