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;

more in comments….


Subscribe?

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.

This entry was posted in Mediawiki. Bookmark the permalink.

Comments welcome via facebook:

22 Responses to How to make image links in MediaWiki

  1. John says:

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

  2. Tom says:

    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 http://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?!

    • Andy Roberts says:

      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 :-)

  3. Emufarmers says:

    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. ;)

    • Andy Roberts says:

      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.

  4. Emufarmers says:

    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.

  5. Arjan says:

    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?

    thnx
    cheers
    Arjan

    • Andy Roberts says:

      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.

  6. Arjan says:

    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.

    cheers
    Arjan

  7. Observer says:

    Read about this usability disaster story with images in mediawiki:
    http://tirania.org/blog/archive/2008/Jan-24-1.html

  8. 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…

  9. James says:

    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…

  10. Pingback: Mediawiki: Remove External Arrow from Links » Yet Another Linux Blog

  11. Dale Antrim says:

    Hey there guys,

    I am modifying a support and process wiki.

    I have spent a month searchign and trying to link images within the wiki environment. This page BY FAR has the most helpful information.

    It worked except for the resize. I couldn’t figure out how to get around that…

    Anyway… i wanted to share that i found a simple and effective workaround. YEAHHHHH

    Click on the image and go to its page. Choose to edit the page and place a: # REDIRECT [[…]] voila….

    The only weakness of the work-around is that when you hover over the image… the url will display at the bottom of the browser window and show the image page… BUT if you place a label you should avoid ‘almost’ all questions…

    let me know your thoughts…

    • Dale Antrim says:

      Sorry.. i included a space.. the correct code should be:

      #REDIRECT [[…]]

  12. KenPem says:

    Excellent post, saved me HOURS of head-scratching. Thanks!

  13. Pingback: Mediawiki: Remove External Arrow from Links | Teknologist

  14. Currently there are four approaches to find:

    “Although not a feature of the MediaWiki software, an image can be made to link to a specified page if desired. (..) so here is the short version:

    1. You can use the re-direct feature on an image page, but when used, the target page shows all sorts of unwanted information that gets transcluded from the image page itself.
    2. For MediaWiki sites that support the embedding of external_images (which is basically all MediaWiki websites except the Wikipedia and Meta) you can use the ‘clickpic’ template.
    3. For website such as Wikipedia that preclude the use of embedding external images you can superimpose hyperlinks onto images.
    4. Use the ImageMap functionality:

    For more detailed explanations, see below…
    http://meta.wikimedia.org/wiki/Help:Navigational_images

  15. Pingback: links for 2011-01-29 | Philip Oakley's blog

  16. Many thanks, that was a great article and turned up straight away on Google. The ‘LocalSettings.php, set $wgAllowExternalImages = true;’ was a big help.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

WP-SpamFree by Pole Position Marketing