Image Annotation Public Display

I have been playing around with the ImageAnnotation plugin and I have it working in the admin end of things but, after adding the public code to my show.php file, I get extra images near the end of my record (2-one small, one large thumbnails) but not ability to annotate. Also in the configuration, I cannot select the option to have anyone add an image annotation. Here is an example of one of my item records: http://haystack.colby-sawyer.edu/items/show/50

Thanks.

It looks like your theme isn't set up to allow plugins to add javascripts or CSS files.

If you look at the application/views/scripts/common/header.php file, you should see the use of display_js and display_css functions. ImageAnnotation (and many other plugins) require those functions to be called in your theme to work properly.

I'm looking at the header in my theme and it does has CSS and JS referenced but it was custom written a few years ago. I don't know how to incorporate in the display functions without breaking everything. That section is:

<!-- Stylesheets -->
<link rel="stylesheet" media="screen" href="<?php echo html_escape(css('screen')); ?>" />
<link rel="stylesheet" media="print" href="<?php echo html_escape(css('print')); ?>" />

<!-- Only IE6 and below see the following link -->
<!--[if IE ]>
<link rel="stylesheet" media="screen" href="<?php echo html_escape(css('ie')); ?>" />
<![endif]-->

<!-- JavaScripts -->
<?php echo js('default'); ?>

The "new-school" equivalent of what you have would look like:

<?php plugin_header(); ?>

<!-- Stylesheets -->
<?php
queue_css('screen', 'screen');
queue_css('print', 'print');
queue_css('ie', 'screen', 'IE');

display_css();
?>

<!-- JavaScripts -->
<?php display_js(); ?>

Your header probably already has a plugin_header() call. There should only be one in header.php, and it's important that it comes before the display_css and display_js calls, as shown.

Hmmm. That made the extra thumbnail and file look prettier but it still isn't showing the Add annotation button. Could it be something on my show.php? This is what I have. Thanks for all your help.

<?php head(array('title' => html_escape($item->title),'bodyid'=>'items','bodyclass' => 'show item')); ?>

<div id="primary">

<h1><?php echo item('Dublin Core', 'Title'); ?></h1>

<?php if (item_has_thumbnail()): ?>

<div class="item-image">

<?php echo display_files_for_item(array('imageSize'=>'fullsize')); ?>

</div>

</div>

<?php endif; ?>

<!-- The following function prints all the the metadata associated with an item: Dublin Core, extra element sets, etc. See http://omeka.org/codex or the examples on items/browse for information on how to print only select metadata fields. -->
<?php echo show_item_metadata(); ?>

<!-- If the item belongs to a collection, the following creates a link to that collection. -->
<?php if ( item_belongs_to_collection() ): ?>
<div id="collection" class="element">
<h3>Collection</h3>
<div class="element-text"><p><?php echo link_to_collection_for_item(); ?></p></div>
</div>
<?php endif; ?>

<!-- The following prints a list of all tags associated with the item -->
<?php if(item_has_tags()): ?>
<div id="item-tags" class="element">
<h3>Tags</h3>
<div class="element-text"><?php echo item_tags_as_string(); ?></div>
</div>
<?php endif;?>

<!-- The following prints a citation for this item. -->
<div id="item-citation" class="element">
<h3>Citation</h3>
<div class="element-text"><?php echo item_citation(); ?></div>
</div>

<!--The following add the ability to add annotations-->
<?php echo image_annotation_display_annotated_image_gallery_for_item();?>

<ul class="item-pagination navigation">
<li id="previous-item" class="previous">
<?php echo link_to_previous_item('Previous Item'); ?>

<li id="next-item" class="next">
<?php echo link_to_next_item('Next Item'); ?>

<?php echo plugin_append_to_items_show(); ?>
</div><!-- end primary -->

<?php foot(); ?>

You might need to add one more queue_css call to your header. Try putting the following above the display_css call:

queue_css('jquery-ui');

Nope, that still doesn't do it. I've tried posting my header code a couple of times but it doesn't seem to want to go through. I'm trying again by adding backtick characters.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo settings('site_title'); echo $title ? ' | ' . $title : ''; ?></title>

<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="<?php echo settings('description'); ?>" />

<?php echo auto_discovery_link_tag(); ?> 

<?php plugin_header(); ?>

<!-- Stylesheets -->
<?php
queue_css('screen', 'screen');
queue_css('print', 'print');
queue_css('ie', 'screen', 'IE');
queue_css('jquery-ui');

display_css();
?>

<!-- JavaScripts -->
<?php display_js(); ?>

</head>
<body<?php echo $bodyid ? ' id="'.$bodyid.'"' : ''; ?><?php echo $bodyclass ? ' class="'.$bodyclass.'"' : ''; ?>>

<div id="non-footer">
           <div id="header-container">
		<div id="header">
                <img id="logo" alt="Colby-Sawyer College Logo" src="<?php echo img('c-slogo.png') ?>" />
                <div id="portrait-bg"><img id="portrait-photo" alt="A random photo in a picture-frame" src="<?php
                $frame_photo_images = array('Eugene.jpg',
                                            'JamesC_groups.jpg',
                                            'NancyPumpkins.jpg',
                                            'alarians.jpg',
                                            'greenalbum.jpg',
                                            'mayday.jpg',
                                            'mountainday.jpg',
                                            'sugaringoff.jpg',
                                            'wintercarnival.jpg',
                                            'athleticsarchery.jpg');
                echo img("frame-photos/" . $frame_photo_images[rand(0,9)]);

                ?>" /></div>
                <div id="nav-container">
			<div id="primary-nav">

			<ul class="navigation">

			<?php echo public_nav_main(array('Browse' => uri('items'))); ?>
			</ul>

			</div><!-- end primary-nav -->
			</div><!-- end div-container -->
			<div id="search-container">
				<?php echo simple_search(); ?>
				<?php echo link_to_advanced_search(); ?>
			</div><!-- end search -->

			<div id="site-title"><?php echo link_to_home_page(); ?> <?php if (function_exists ( 'my_omeka_user_status' )){
			echo my_omeka_user_status();} ?>
</div>

		</div><!-- end header -->
	</div><!--end header-container-->

		<div id="content">

If you make annotations on an image from the back end, can you see them on the front?

If so, I'd guess that your header is OK, and this is now an issue of getting the right permissions set in the plugin config.

Okay, I can see the annotations and can add annotations on the public side when I am logged in as an administrator and when I log in through my-Omeka. I would like the public to be able to add and view annotations but when I go to the plugin, I cannot select the checkboxes to allow the public to do anything but view public and private annotations. I have verified that I have the latest version of the plugin and tried reinstalling it.