jump to navigation

How to make image links in MediaWiki January 21, 2008

Posted by Andy Roberts in : Enterprise 2.0, mediawiki , trackback

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.


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

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

more in comments….


If you enjoyed this post about image links in mediawiki you may wish to subscribe to my category “wiki” posts, or the full feed for this blog.

RSS feed | Trackback URI


Comment by John Subscribed to comments via email
2008-01-21 20:20:20

Thanks Andy, I had the same trouble in pmwiki which I am playing with, I’ll try this recipe there.

Comment by Tom Subscribed to comments via email
2008-01-22 11:02:23

You know, you really shouldn’t have to do this… you really, really, really shouldn’t have to do this. And funnily enough you don’t. Deki Wiki has a really nice image uploading interface, it’s built on MediaWiki and there’s a hosted version available.

If was being cynical, and I generally am, MindTouch have made Deki so stupidly impossible to install that you have to stump up for some support time. Yes, there’s a hosted version available at www.wik.is which gives you the ability to trial the interface… BUT with the bathwater of shitey wiki syntax they’ve thrown out the WikiWord….

At least it’s stopped raining eh?!

Comment by Andy Roberts
2008-01-22 14:18:13

On your recommendation Tom I’m taking a really good look at Deki Wiki. Like some other authoring interfaces, I find I often end up toggling between Wysiwyg and html views, whereas wiki text can be a nice in-between level.
I think there does need to be a popular fork of mediawiki at some time, it’s too good a piece of software for the core code to be dominated by the wikipedia-centric developers. So I’ll be interested to see if Deki or similar can gain a critical mass of developer community and users.
Going out in the sunshine now :-)

Comment by Emufarmers Subscribed to comments via email
2008-01-23 06:28:27

For what it’s worth, 15 minutes after you posted a link to this on the mwusers forum, Michael Daly posted “the easy way” to do this using the ImageMap extension. Evidently the MediaWiki support community isn’t entirely useless. ;)

Comment by Andy Roberts
2008-01-23 09:08:56

Thanks very much Emufarmers. I only discovered MWusers recently and it’s looking like a good alternative to the mediawiki support listserv. ImageMap extension could inspire a completely new approach to navigation on a mediawiki MainPage. Elsewhere, it’s always handy to have tips for wiki contributors who have don’t have access to install extensions and have to make do with what they are provided with.

A thought I have been ruminating on recently, is that If we make the wiki markup too complicated on many of the pages, by including too much raw HTML or CSS code for example, or even lots of nested tables, then we run the risk of gaining edits and contributions mainly from web developers and not from ordinary writers for whom the wiki concept is in theory the simplest solution that works.

Comment by Emufarmers Subscribed to comments via email
2008-01-23 22:38:03

That’s where templates come in. They don’t just let you reuse code: They provide information hiding and encapsulation. If you put the code for your tables and visual goo-gawkery in templates, it won’t scare your users.

Comment by Arjan Subscribed to comments via email
2008-01-25 01:26:23

Hey Andy,

Thanks for the tip!

Do you have any clue how to manipulate the “alt text” “title” of the link.
So showing your own text instead of the whole external link?


Comment by Andy Roberts
2008-01-31 01:50:24

Hi Arjan, thanks for the question about alt text. I’m afraid this workaround breaks the alt text as well as the “what links here” and I don;t think that can be fixed without taking a completely different approach. I’m going to write about templates later, so do stick around if you’re interested. Cheers.

Comment by Arjan Subscribed to comments via email
2008-01-31 13:55:11

Hi Andy,
I will stick arround, thanks.

The reason i am looking into this is for a multilingual website.
I have created a “menu/header” template which is included in all pages.
The header/menu also has flags to indicate other languages (ie dutch, english etc).
Since the template is included in every page i want the flags to be dynamic. (ie linking to {{PAGENAMEE}} and {{PAGENAMEE}}/en )

I have used/tried several extensions, but they do not parse wikicode in their code.

only downside is indeed the “alt” text showing the whole internet adrdess.


Comment by Observer Subscribed to comments via email
2008-02-14 06:57:25

Read about this usability disaster story with images in mediawiki:

Comment by Frankie Roberto Subscribed to comments via email
2008-03-27 18:02:16

This link details a few other ways of doing it: http://www.mediawiki.org/wiki/Help:Linked_images

The http://www.mediawiki.org/wiki/Extension:Icon extensions looks like the best fix…

Comment by James Subscribed to comments via email
2008-03-31 10:02:32

Awesome skills!

I’ve been knocking together an image-based homepage menu for Mediawiki, but I never thought it would be this difficult to make the images link to other pages…

Name (required)
E-mail (required - never shown publicly)
Subscribe to comments via email
Your Comment (smaller size | larger size)
You may use <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> in your comment.

Related Posts from the Past: