Fotonotes

Overview

I've modified Fotonotes to work with MediaWiki. Fotonotes provides a really cool way to annotate images online. With this extension, you can add annotations when editing an Image: page, and they will show up when displaying the Image: page. The annotations are stored inside a <fotonotes> tag in the edit box.

Installing this extension requires making some (simple) changes to the MediaWiki source files, so I'm not sure if this should be categorized as a hack, an extension, or what. Also, I've never posted an extension before, so if I'm doing something wrong, please let me know.

I've tested this with MediaWiki 1.7.1 but it hasn't been tested extensively so let me know if you find any bugs. Also, I don't consider myself a javascript expert or a php expert so let me know if you see anything that could be improved.

You can see an example of a slightly-modified version of this extension/hack at: http://www.werelate.org/wiki/Image:Test_image.jpg

Installation

To install this hack/extension, here's what you need to do:

• Download the fotonotes script and untar it somewhere. This extension is based upon FNClient-0.6.0.
• Create a new "fotonotes" directory under "skins/common/images" in your MediaWiki installation, and copy the files from "fnclient-0.6.0/fnclientlib/styles/artwork" into the new "fotonotes" directory.
• Append the style directives from this css file to the end of "skins/monobook/main.css". I've only tested this with the monobook skin.
• Copy the files Fotonotes.php and FotonotesExt.php to your extensions directory.
• Edit your LocalSettings.php file to require the FotonotesExt.php file.
• Copy the file fnclientwiki.js to whatever directory your $wgScriptPath points to.
• You need to make the following change to the openShowImage function in ImagePage.php: Just after the addHTML call,

$wgOut->addHTML( '<div class="fullImageLink" id="file">' . $anchoropen . 			
   "<img border=\"0\" src=\"{$url}\" width=\"{$width}\" height=\"{$height}\" alt=\"" .
   htmlspecialchars( $wgRequest->getVal( 'image' ) ).'" />' . $anchorclose . '</div>' );

add the lines:

global $wgScriptPath;
$wgOut->addHTML("<script type=\"text/javascript\" src=\"$wgScriptPath/fnclientwiki.js\"></script>");

• This hack/extension needs to show the image when the page is being edited. Therefore, you'll need to make the following changes near the bottom of function showEditForm in EditPage.php:

• Remove "{$toolbar}" from the line

$wgOut->addHTML( <<<END
<form id="editform" name="editform" method="post" action="$action" enctype="multipart/form-data">
END
);

• Add a new runhook about 10 lines later (after the hidden input fields), and add "{$toolbar}" to the existing addHTML call just below it:

wfRunHooks('ArticleEditShow', array(&$this));

$wgOut->addHTML( <<<END
{$toolbar}
$recreate
{$commentsubject}
<textarea tabindex='1' accesskey="," name="wpTextbox1" id="wpTextbox1" rows='{$rows}'
cols='{$cols}'{$ew} $hidden>
END
. htmlspecialchars( $this->safeUnicodeOutput( $this->textbox1 ) ) .
"
</textarea>
" );

Licensing

The fnclientwiki.js extends the original fnclient.js file found in Fotonotes and is therefore relased under the same license that Fotonotes is released under: Open Source License v2.1 or later. The Fotonotes.php and FotonotesExt.php files are released under the GPL. The fnclient.js (and also fnclientwiki.js) files include the DragResize script, which is copyright 2005-2006 Angus Turnbull TwinHelix Designs and is licensed under the GNU LGPL, version 2.1 or later.