This blog post is a sort of instruction manual for how to tweak Drupal's Image Annotate module so that you can use it on your library website as a virtual bookshelf.  There's a good-lookin' demo over here. I've not written many of these instructional posts and I'm pretty new to Drupal, so I invite your comments.  I also fear may miss a step or something here since I'm writing the post *after* I set tbhis up on my own site, not at the *same time* as I should have.  So if you try this and it doesn't work for you, let me know.  I also want to give props to @TheLib who showed me the Flickr page from Westmont Public Library and then @anneheathen who attended a UX talk by @azaaza that gave me the kick I needed to think about this.  While it's great that 3rd party sites like Flickr offer this functionality, it is even better to bring users to your own website for these kinds of activities.  Anyways...

I used Drupal 6.19.  You'll need the following modules on your Drupal installation:

CCK

Filefield

Imagefield

Image Annotate

First, you have to apply a patch to Image Annotate, available here.  If you need instructons on how to apply patches, read about it here.

After you install Image Annotate, don't forget to configure permissions.  This always drives me crazy with Drupal- if you don't create access for users it just won't work.

Next, create a custom content type.  Go to 'manage fields', add a new field named whatever you want, select field type 'file', select image 'widget'.

Then go to your display fields tab and select 'image with annotations'.  This is the bit that the patch fixes- if your patch didn't work then you won't see this option here.

Note that it is important that you have commenting turned on for your content type.  This module generates comments for each note that you add to the image.  I found this annoying since I don't really want comments at the bottom of my node corresponding to the notes on the images.  I solved this problem by adding to my page.tpl.php file:

if ($node->type == 'nameofyourcontenttype') {
print '<div class="whatever">';
}

and then adding to the stylesheet:

.whatever #comments{
display:none;
}

So... try this out and let me know if it works for you. Again, I don't doubt that I've missed a step or two here so if you have issues let me know.  One glicth with the module that is worth mentioning: you cannot add multiple images within a single field.  For whatever reason, it breaks and nothing will work.  To make the demo that I have on my site, I made three separate image fields.