How to make image links in MediaWiki

Mediawiki Images

Mediawiki handles uploaded images on pages in a way which is perfectly suitable for a free encyclopaedia. If you click on an image you get taken to special page which tells you more about the image itself. Who uploaded it, where it came from, any revision history and which other pages link to it. But what if you want to use an image just as a graphical link, such as a button or banner that takes you to the page which the image is about? That’s quite a reasonable requirement because it’s how the internet usually works, it’s what what visitors are more likely to expect. Sending them to a dead end meta page full of technical data might not be what you want to do. So this article will show you how to make image links work properly in mediawiki.

Upload a file

For my example I’m going to upload a new image file to UsefulWiki. The file is a logo button for the Better Reading Partners section of the wiki, which I want to feature on the Main Page. Not all installations of mediawiki have enabled the uploading of images, but this one does. You can tell because there’s a link in the left hand side Toolbar: “Upload File” The upload process is straightforward, but it’s worth copying the hint which appears there, as it’s harder to find again later.

To include the image in a page, use a link in the form [[Image:file.jpg]],
[[Image:file.png|alt text]] or [[Media:file.ogg]] for directly linking to the file

I tried something like that in the Sandbox with this result (screenshot):

mediawiki image link

The orange BRP logo is a bit too large so I can adjust the syntax to ask for it to be rendered only 70 pixels wide.

[[Image:Brp-logo.gif|thumb|Description|70px]]

That’s better, but you see how clicking on the button takes you here? when you might expect to go to the Better Reading Partners page. I’m going to fix that by getting rid of the syntax for direct image linking and using the syntax for building an external link instead, using the full URL of the target page:

[http://usefulwiki.com/page/Better_Reading_Partners description]

then replacing the description with the sytax for rendering an external image directly onto a page – which is just the full url of the hosted image. In this case I can find out the exact location of the image file by right-clicking ( ctrl-click on my Mac ) the image itself and choosing “Copy image location”. That’s then pasted in instead of “description” above to give

[http://usefulwiki.com/page/Better_Reading_Partners http://usefulwiki.com/w/images/thumb/a
/a6/Brp-logo.gif/70px-Brp-logo.gif]

( all on one line, just one space chracter between the two urls )
What’s happening here is that the image is being retrieved and then used just like anchor text for the link, like a hyperlinked description, except that it’s a picture. That works fine in the sandbox, but there’s one more thing I can tweak. The little blue arrow which denotes an external link needs to go, because it’s an internal page which I’m linking to.
mediawiki external image link with little blue arrow

I can get rid of it by wrapping the whole piece of code in a little bit of CSS:

<span class=”plainlinks”>…….</span>

so all I have to do is transfer the code over to the UsefulWiki Main Page

Done. Any questions? Ok….

How else can this technique be applied?

You might use it with externally hosted graphics instead of uploading image files to the same mediawiki.

Problems you may encounter

If your mediawiki does not have direct rendering of image files enabled, it won’t work. So in LocalSettings.php, set $wgAllowExternalImages = true;

Leave a Reply

Your email address will not be published.