Difference between revisions of "Extension:Gadget-ImageAnnotator"

Revision as of 21:47, 8 April 2011

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. Currently, the Annotator is installed on testwiki and Open Media repository.

Installation

ImageAnnotator might be installed like Gadget (per-user usage 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.

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

Templates to be copied:

• Template:ImageNote (replace "File" as appropriate)
• Template:ImageNoteEnd
• Template:ImageWithNotes
• Template:ImageAnnotations
• Template:InlineImageAnnotations
• Template:ImageNoteControl
• Template:ImageNoteColors

Message files used:

• MediaWiki:ImageAnnotatorTexts
• MediaWiki:ImageAnnotatorUITexts
• MediaWiki:ImageAnnotatorEditSummaries

1. Sets the variable $wgEnableAPI to true in LocalSettings.php
2. Install the ParserFunctions extension
3. 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: 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 your Wiki's default language;
2. Translate the texts in the edit summaries into the content language of the wiki language.

Additional parameters to be setup

ImageAnnotator might be supplementary tuned though few variables. In this respect, edits the Common.css file and Vector.js (Monobook.js)as appropriate. For OpenMedia, this variables has the values in 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

1. 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.
2. Disabled the default message about the annotation presence.
3. The annotations show could be hided by setup the variable:

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

1. Semantic properties could be used inside the annotation.
2. As suggestion, semantic templates and properties allow an efficient management of the annotations.
3. 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:

• Lemmata
• Variable setting test
• [1]