User:CharlesC/Template for navigational images on Mediawiki websites

I have created a template for people who run or use mediawiki websites to easily create navigational images - i.e. images that link to a specified page when clicked on. By default it's not a specifically designed feature of Mediawiki.

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 which I why I can't show an actual example on this page.

Creating 'clickpic' template

To recreate the template on your own Mediawiki site type 'template:clickpic' at the end of the site's URL - e.g.: http://en.wikipedia.org/wiki/template:clickpic. The site will tell you that page doesn't exist or is empty. Now click the 'edit' link and paste in:

<span class="plainlinks">[{{SERVER}}{{localurl:{{{1}}}}} {{{2}}}]</span>

Then save the page. (An example of this template can be found at Template:clickpic).

Use of the template

In the page you want the image link to appear, use this format:

{{clickpic|TARGET PAGE TITLE|FULL PATH OF IMAGE FILE}}

Note: FULL PATH OF IMAGE FILE doesn't just mean the image title, see section "If you want to use an image that is contained within the wiki" for details.

Example using this format:

{{clickpic|Software|http://XYZ/wiki/images/thumb/f/fd/Software_box.jpg/45px-Software_box.jpg}}

If you want to use an image that is contained within the wiki

First you need to make sure that you wiki is set to be able to link to external images. (Confusingly in this case the images are actually internal to the wiki, but the external link format will be used, which is why it needs to be switched on). In localSettings.php within the wiki folder you need to make sure there is this line somewhere (and if not add it in):

$wgAllowExternalImages = true;

Make sure there is no '#' at the beginning of the line, and that you save changes!

This is how you find the image path needed for the link:

Scale the image to the right size using the usual display method and specifying the width of the image in pixels, e.g.:

[[Image:abc123.jpg|150px]]

Preview or save the page so the image renders on-screen
Then right-click on it and select 'Properties'. Cut and paste the path from:
- Internet Explorer: the 'Address' field in the dialog box
- Firefox: the 'Location' field in the dialog box.

I would show an example here, but unfortunately Meta doesn't allow embedding external images which the code in the template requires.

Getting rid of extra whitespace in IE

Internet Explorer and Opera seem to show extra whitespace (where Firefox doesn't). It is more noticeable if a navigational image is put in a table. 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;
}

Creating 'clickpic' template

Use of the template

If you want to use an image that is contained within the wiki

Getting rid of extra whitespace in IE

See also