Making Wiki Images More Wiki

One thing that has always annoyed me about most wiki is the way they handle images. MediaWiki, like most wikis, allows users to upload images and embed pictures. However, if you want to change an image, you need to download the file, open it up in GIMP, Inkscape, or Photoshop, edit it, save it, and re-upload it. Somewhere in this long process, the ease of editing that makes wikis so wonderful gets lost. Basically, I’m annoyed because images in wikis aren’t very "wiki."

I had a talk with Brianna Laugher at Wikimania about ways to make it easier to folks to edit pictures from within the browser — even if it is only simple stuff. Yesterday I took the afternoon to write a new MediaWiki extension which gives a working example of in-browser image editing. It provides the ability to crop images using David Spurr’s wonderful Javascript cropping user interface and uses ImageMagick to do the actual image manipulation.

It is in the form of an extension to Mediawiki I’ve called EditImage. It’s an afternoon hack from an under-qualified PHP hacker so it’s nothing special. You can read it about on its page in the Mediawiki wiki and you can try it out on my personal wiki where I have it installed.

I’m certainly not the first person to think about doing this. In fact, some old pages in the MediaWiki wiki imply that I’m not even the first person to play around with the idea of using Spurr’s code to do image cropping for MediaWiki. Hopefully though, my code can act as a nice first step and a framework for folks wanting to add additional image manipulation features. For example, I think it would be quick to add the ability to do in-browser brightness and contrast manipulation and I would love to see this in a future version of the extension.

6 Replies to “Making Wiki Images More Wiki”

  1. Whilst making changes on the backend using ImageMagick is fine for some editing tasks, it doesn’t really allow much fine control. Perhaps in the longer term there’s a need for an in-browser image editing control based on the html5 canvas element (see http://caimansys.com/painter/ for a rudimentary example).

    SVG files are perhaps even more ripe for wikification, given that they are already text files (so tracking history is easier), and each object in the image can be edited independently of the others (not often possible in a raster image).

  2. Yay :D

    I want to poke it fairly hard so all the obvious functionality bugs are shaken out before requesting it to be enabled on Commons. Where do you want bug reports?

  3. MarkC, I think you are right about the canvas element. It should be possible to make an extremely powerful in-browser image editor using canvas. Having simple and very cross-platform versions of some simple, common tasks seems important too!

Leave a Reply to Nick Ellery Cancel reply

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