Gallery2:Modules:imagenotes - Gallery Codex
Personal tools


From Gallery Codex

Revision as of 14:49, 22 January 2008 by Barkbarkuk (Talk | contribs)

Imagenotes Module

Select regions of your images and apply annotations, tags, etc.


Design and manufacture (Only client side region selection currently implemented, no annotation)


This module is intended to allow the selection of regions within your images for the purposes of annotation and tagging.




- Selection of multiple regions on an image.

- AJAX communication with the server so page reloads are not required.

- Associate tags (from the [Tags] module) with one of more regions.

- Associate some arbitrary text with an area of the image and display it either in a separate block or over the top of the image (potentially stylised as a speech or thought bubble).

- Integration with external systems. Tags, images and objects exist in other systems. We may want to export information about our image regions or import/link to additional data in other systems. E.g. If we tag a person in an image, we may want to pull contact details from a CMS when we hover over or click on that person in the image.

- Search for tagged image regions and potentially display just the selected portion of the image in the search results.

Planned, but may never happen

- Contextual search about the location or size of a region. E.g. Where a person is tagged, we want them to take up a certain percentage of the image, or be a certain distance from another person in the image.

- Hook in open source image recognition software for automatically suggestion image regions to tag. E.g. It searches through all your pictures, finds similarities in faces, lets you tell it who they are and then magically all your photos are tagged. :-)

Known bugs

Frequently Asked Questions

Dev stuff

Current status

- Module renamed to imagenotes - Some code tidying performed to move towards coding guidelines - Namespaces applied to javascript code (Imagenotes.util.*, Imagenotes.widget.*)

Client side

- Created utility methods for creating instances of templates. That is, cloning a DOM node and applying IDs to the new node and it's children.

- Created TemplatedRubberBandRegion which allows a rubber band to be dragged over a specified region of the document and on mouseup a custom event is fired with the selected region

- Created TemplatedResizeOverlay which extends the YUI Overlay widget and adds YUI DragDrop functionailty and the ability to resize the region. The code searches a template passed in client side for certain classes to turn into resize and drag handles. Custom events are fired at the start and end of drag and resize operations.

- Created an initial image region manager that sets up a TemplatedRubberBandRegion and listens for area selected events, then creates a TemplatedResizeOverlay. Multiple regions can be selected with one focused item at a time.

Server side

- Block created for addition to item view page - No database structure created yet - No server endpoint for AJAX communication created yet

Design decisions/considerations


Need to make sure it's possible for regions to be non rectangular in the future. Try and make the code pluggable, or at least extensible.

Do the image regions apply to all versions of the image, or just the one that was marked up? It depends on use, but possibly annotations that aren't linked to a specific region will not be wanted on larger versions of the same image.

As there are a few different but related purposes for imagenotes, it will probably make sense to have a few different database tables.

For tagging regions of an image, there will certainly be an 'image region' that identifies what it is that's being tagged.

For image annotations, there are two possible styles. One style where a region is marking something up and the annotation is attached to that (so potentially an event is fired when the region is selected, unhiding the associated image annotation), essentially so you can pass comment on something in the image without obscuring it.

The other style is where the annotations aren't specifically related to any particular image region, but laid over the top. E.g. placing speech bubbles at a specific location on the image that don't need a trigger region to display.

It is also possible that different image regions may want to be linked into groups, for a couple of possible reasons. A group of regions may define one object. As the images are generally photos, they represent 3d space. A person in an image may have their arm around someone else, giving two regions showing one person within the same image. If we tag that person, we only want to associate one tag with the multiple regions.

Another possible use of grouping regions is for creating multiple sets of annotations. The user will be allowed to select the set of annotations they want to display.

Database structure

- Image region needs a unique ID, probably built from a key on the image it's attached to and it's own unique ID for the particular image. Maybe image region ID should have a single unique key to simplify cross referencing from other tables. Image region needs layer information to ensure the desired z-ordering is applied on rendering.

Hacks, or areas otherwise needing improvement

- TemplatedResizeOverlay doesn't take into account CSS border sizes or padding when determining position and constraints. To make sure the content area is always highlighted independent of template used, this may need to be reworked a little.

- The method for attaching to the image for markup is theme specific so will break easily until other methods are developed. The safest way to attach would be to create a specific view for image region markup and viewing, but it's nicer to see the markup on the regular item view page.

- The TemplatedResizeOverlay makes use of private functions, which apparently are created for every instance of the overlay. This means unnecessary resource consumption, probably without gaining anything from it. The resize functions can probably be pulled out into the util namespace.

Related feature requests

Imagemap notes


Labelling areas of images

Related forum/codex topics

Facebook like image tagging

Image Notes

Because image tagging is one of the goals, general tag discussions are also of interest:


TagsSearch For putting tags into categories

Because within an image, not only do you have a viewing location, you can see various places: