Extension:Gadget-ImageAnnotator

ImageAnnotator is a JavaScript extension of the MediaWiki user interface, allowing users to place comments onto images shown on file description pages, similar to the "photo notes" on Flickr. This works on all image files for which the MediaWiki software displays a preview image on the file description page, i.e., PNG, JPG, GIF, and SVG files.

Documentation sources:

• Installation
• Description

Currently, the Annotator is installed on testwiki and Open Media repository.

Installation

ImageAnnotator might be installed like Gadget (per-user state - then an entrance into MediaWiki:Gadget-definition is necessary), or like any other JavaScript extension, by installing into MediaWiki: namespace component files. For emergencies cases(unexpected behavior or system crashes) the gadget MediaWiki:Gadget-DisableImageAnnotator.js is necessary to be enabled into MediaWiki:Gadget-definition. For editing, annotations ImageAnnotator makes use of templates.

1. Copy the following files on your system.
   1. JavaScript files to be copied:
   • MediaWiki:Gadget-ImageAnnotator.js
   • MediaWiki:ImageAnnotatorConfig.js
   • MediaWiki:LAPI.js
   • MediaWiki:TextCleaner.js
   • MediaWiki:Tooltips.js
   • MediaWiki:UIElements.js
   • MediaWiki:AjaxSubmit.js
   • MediaWiki:Gadget-DisableImageAnnotator.js
   1. Templates to be copied:
   • Template:ImageNote (replace "File" as appropriate)
   • Template:ImageNoteEnd
   • Template:ImageWithNotes
   • Template:ImageAnnotations
   • Template:InlineImageAnnotations
   • Template:ImageNoteControl
   • Template:ImageNoteColors
   1. Message files used:
   • MediaWiki:ImageAnnotatorTexts
   • MediaWiki:ImageAnnotatorUITexts
   • MediaWiki:ImageAnnotatorEditSummaries
2. Sets the variable $wgEnableAPI to true in LocalSettings.php
3. Install the ParserFunctions extension
4. Change the variable LAPI_file_store at the beginning of MediaWiki:LAPI.js on your wiki to match the image URLs served by your Wiki. For example, on OpenMedia:

 var LAPI_file_store = "(http?://species-id\\.net)?/o/media/";

1. Adapt the configuration MediaWiki:ImageAnnotatorConfig.js on wiki is needed. Edit imageIsFromSharedRepository' function and sharedRepositoryAPI function and establish the right value for parameters.
2. Edit MediaWiki:Common.js file and add the entrance for Annotator, if would be enabled for all users. For example, on OpenMedia:

if (wgNamespaceNumber != -1 && $.inArray(mw.config.get('wgAction'), ['view', 'purge']) != -1 ) {
 if (typeof ImageAnnotator_disable == 'undefined' || !ImageAnnotator_disable) {
 // Don't even import it if it's disabled.
 importScript('MediaWiki:Gadget-ImageAnnotator.js');
 }
}

1. Modify MediaWiki:ImageAnnotatorTexts to adapt it to Wiki's default language;
2. Translate the texts in the edit summaries into the content language of the wiki.

Setup of additional parameters

ImageAnnotator might be supplementary tuned though few variables. In this respect, edits the MediaWiki:Common.css file and MediaWiki:Vector.js (or Monobook.js) as appropriate. For OpenMedia, this variables has the values in MediaWiki:Vector.js file:

// textbox for modifying notes, by default is 50 characters wide 
var ImageAnnotationEditor_columns = 80; // Or any other number from 30 to 100

/*When the full image is much larger than the preview image, the script activates a floating zoom to make positioning new rectangles easier. How much larger the full image needs to be than the preview image to activate this zoom is governed by the zoom threshold. By default, this threshold is set to 8.0: the zoom is activated only if the full image is eight times larger than the preview. Setting the threshold to very high values will in practice disable zooming for most images. Setting it to zero enables the zoom on all images where the full image is at least twice the size of the preview. (In other words, the lower bound of ImageAnnotator_zoom_threshold is 2.0 in practice.)*/
 
var ImageAnnotator_zoom_threshold = 2.0; // Or any other number >= 0

/*the variable ImageAnnotator_hide_captions, you can switch off the display of extra captions indicating the presence of annotations on image uses in articles. */

var ImageAnnotator_hide_captions = ["*"]; // hide captions for all image uses (thumbnails and otherwise included images) in all namespaces

/*  * no_images : switch off note display on all image uses in the namespaces given
    * no_thumbs : switch off note display only on thumbnails in the namespaces given
    * no_shared : switch off note display for non-local images in the namespaces given
    * icon_thumbs : use only an indicator icon (instead of showing the note rectangles and popups) for thumbnails in the namespaces given
    * icon_images : use only an indicator icon for other (non-thumbnail) image uses in the namespaces given
*/

var ImageAnnotator_no_images = ["Creator", "Creator talk"]; // No image note display on creator pages
var ImageAnnotator_no_thumbs = ["Talk"];                    // Don't show notes for thumbs on talk pages
var ImageAnnotator_icon_thumbs = ["Commons"];               // Only an indication icon for thumbs in the commons
var ImageAnnotator_icon_images = ["Talk"];               // Only an indication icon for thumbs in the discussions

In MedaWiki:Common.css, for OpenMedia, add the lines for a font re-dimensioning.

/* Gadget-ImageAnnotator needs */
.image_annotation div p{
   font-size:0.7em;
}
.tooltipContent div div p{
   font-size:0.7em;
}

Experience with Gadget-ImageAnnotator

• Inline preview of images annotations works fine. The font is setup by default 100% but it not looks nice on thumbnails, so the actual size of the font is 0.7em.
• Disabled the default message about the annotation presence.
• The annotations show could be hided by setup the variable:

var ImageAnnotator_no_thumbs = ["Talk"]; // hide the annotations on discussion namespace 

• Semantic properties could be used inside the annotation.
• As suggestion, semantic templates and properties allow an efficient management of the annotations.
• Zoom is working fine with the threshold of 2.0 . Zoom proved to be necessary on details. See also the example pages on testwiki and OpenMedia:
• Example Lemmata for Cora project
• Variable setting test
• The annotations text switched to hide

Other settings

The Annotator is saving the annotations text into the "file:" namespace. Sometimes, the image preview showed there is too small When the details of the pages are too fines and they are important for the user the Annotator cannot be used properly. Not all the time Annotator's zooming facility is supplying an initial larger preview. To accomplish this, two MediaWiki global variables could be setup in LocalSettings.php as follows:

# Allow larger image sizes for file page preview 
$wgImageLimits = array (
     array(320,240),
     array(640,480),
     array(800,600),
     array(1024,768),
     array(1280,1024),
     array(10000,10000) 
     );

$wgDefaultUserOptions['imagesize'] = 5; // by default is 2

Planned experience with annotator

• to hide the annotations per-user;
• to build semantic forms for users, with respect to users necessities.
• to turn templates into semantic forms. Non expert-users are scared to use MediaWiki template syntax.
• to save the annotation into separate wiki pages, one page/annotation. This process seems to not be very difficult, but the inverse one it a challenging task. TODO: maybe Media Fragments URI could help? A .js library might be downloaded from: Javascript library for Media Fragment