forum.coppermine-gallery.net

Support => cpg1.4 plugins => cpg1.4.x Support => Older/other versions => cpg1.4 plugin contributions => Topic started by: Nibbler on March 01, 2007, 04:11:03 am

Title: Flikr style image annotations
Post by: Nibbler on March 01, 2007, 04:11:03 am
Add text annotations to your images like on Flikr. Pretty cool.

Updated 2008-10-23

Version 1.1:
UTF-8 support
Apostrophe fix
Transparency fix


[Edit GauGau 2010-03-03]
This plugin has been added to the subversion repository: http://coppermine.svn.sourceforge.net/viewvc/coppermine/branches/cpg1.4.x/plugins/annotate

It has been updated as well to reflect the version checking routines in the plugin manager that are meant to make sure that galleries don't break because of plugins installed that aren't meant for that particular version of the gallery.

Download: https://sourceforge.net/projects/coppermine/files/Plugins/1.4.x/cpg1.4.x_plugin_annotate_v1.2.zip/download
[/Edit]
Title: Re: Flikr style image annotations
Post by: Joachim Müller on March 01, 2007, 09:09:15 am
Wow, fantastic plugin - I really love it.
Title: Re: Flikr style image annotations
Post by: Davide Renda on March 01, 2007, 09:19:38 am
absolutely grand!
Is there a way to give permissions to use annotate feature only to some user group? I have made a few tests on my gallery and noticed every registered user can annotate any pic, but I would rather prefere giving this privilege only to some groups.

PS. ah, forgot to mention: Thanks!!!
Title: Re: Flikr style image annotations
Post by: Pascal YAP on March 01, 2007, 02:59:27 pm
In my config, install through CPG PluginsManager do not work,
i need to create SQL table by hand !
like that :
Code: [Select]
CREATE TABLE IF NOT EXISTS `cpg143_notes` (
  `nid` smallint(5) unsigned NOT NULL auto_increment,
  `pid` mediumint(8) unsigned NOT NULL,
  `posx` smallint(5) unsigned NOT NULL,
  `posy` smallint(5) unsigned NOT NULL,
  `width` smallint(5) unsigned NOT NULL,
  `height` smallint(5) unsigned NOT NULL,
  `note` text NOT NULL,
  `user_id` smallint(5) unsigned NOT NULL,
  PRIMARY KEY  (`nid`),
  KEY `pid` (`pid`)
) TYPE=MyISAM ;
Where cpg143_ is my SQL config. Change with your personal SQL setup.

After this mySQL manual install, i need to remove at the end CODEBASE.PHP this function :
Code: [Select]
function annotate_install() {
    global $thisplugin, $CONFIG;

$sql = "DROP TABLE IF EXISTS `{$CONFIG['TABLE_PREFIX']}notes`";
cpg_db_query($sql);

$sql = <<< EOT

CREATE TABLE IF NOT EXISTS `{$CONFIG['TABLE_PREFIX']}notes` (
  `nid` smallint(5) unsigned NOT NULL auto_increment,
  `pid` mediumint(8) unsigned NOT NULL,
  `posx` smallint(5) unsigned NOT NULL,
  `posy` smallint(5) unsigned NOT NULL,
  `width` smallint(5) unsigned NOT NULL,
  `height` smallint(5) unsigned NOT NULL,
  `note` text NOT NULL,
  `user_id` smallint(5) unsigned NOT NULL,
  PRIMARY KEY  (`nid`),
  KEY `pid` (`pid`)
) TYPE=MyISAM ;

EOT;

return cpg_db_query($sql);
 }

Plus some cosmetics adjustments in /lib/Photonotes.css

And this plugin work very well. Very usefull.
PREVIEW in my personnal Gallery (http://www.pays-dignois.com/galerie/displayimage.php?pos=-1515))

.. Some issues with accentuated characters("à", "é", "ç" and " ' " ), not an UTF-8 compatible !

PYAP
Title: Re: Flikr style image annotations
Post by: skidpics on March 01, 2007, 03:12:17 pm
By the preview, the plugin is wonderful!  But where are the docs for this plugin?  I installed just fine, and under my intermediate image is an 'annotate' button, but once clicked, it does not but refresh the screen?

-- Skidpics
Title: Re: Flikr style image annotations
Post by: Farnsi on March 06, 2007, 12:33:57 am
awesome, thanks!
one question: Is it possible to put the button down to where the others are located (crop and rotate..)?
Title: Re: Flikr style image annotations
Post by: bitcloud on April 24, 2007, 08:05:33 pm
jesus christ... really??

nibbler you're some kind of rainman coder... this is awesome.. poetry infact!
Title: Re: Flikr style image annotations
Post by: bitcloud on April 24, 2007, 08:07:13 pm
yeah i'd like to see what farnsi suggested too... it's a bit out of the way where it is (it'd be good if you could maybe point us in the direction to customise it's location)
Title: Re: Flikr style image annotations
Post by: bitcloud on April 24, 2007, 08:15:36 pm
sorry for the triple posting.. i was just excited.. i've been looking for a way to do this for a while and all i could find was a crummy open source flash implementation...

The single and double quote bug is pretty significant. Both " and ' display as URL encoded codes... they're both pretty commonly used so it's a pretty big speedbump... other punctuation seems to be fine (given limited testing) is there any workaround you can think of for the single and double quotes?

also, the fontsizes seem to be different in firefox and in internet explorer... This is a bigger issue than it might seem at first because the width of the orange overlay bar looks to be determined based on the fontsize, not based on the text itself... (i.e the text runs off the edge of the orange bar in firefox because the font is too large to fit on the orange bar) can you possibly point me in the right direction to resolve that?

cheers
Lachlan

Title: Re: Flikr style image annotations
Post by: n0fear2 on June 17, 2007, 06:34:02 pm
Add text annotations to your images like on Flikr. Pretty cool.

Mhhhh i am pretty bad in php but have 2 things i would love to get working. 1) instead of text users can put a sign on a area showing the user who sigend that. So registered users can mark themself on the pictures. Any idea? 2) i would like to have a show/hide butto for that, so people can look the pictures without those user-marks
Title: Re: Flikr style image annotations
Post by: n0fear2 on June 22, 2007, 12:31:46 am
noone that got an idea how to put the user names on instead of a custom text?
Title: Re: Flikr style image annotations
Post by: bitcloud on June 23, 2007, 02:41:47 am
I've had no luck resolving the text display issues... i'm sure these are simple to resolve, but they're out of my league i'm afraid...

any clues?
Title: Re: Flikr style image annotations
Post by: risinghh on June 24, 2007, 09:04:48 pm
Please can any1 share the demo link here,
Title: Re: Flikr style image annotations
Post by: bitcloud on July 04, 2007, 04:58:30 pm
not sure what's happened to this thread... it seems that nibbler has died somewhere...

Anyway, the problem I was experiencing was "resolved" by removing the "max-width: 200px;" from the .fn-note entry in the css...
It seems that this, along with the moz-border-radius for the two entries below it aren't supported in ie. consequently long entrys were working "fine" in ie but wrong in firefox... I expect that it should go to a new line when it exceeds 200px, but for some reason it wasn't... that *sortof* fixed it...

there's still a pretty major problem in the way it handles characters like " or '

if anyone could point me in the right direction on this it would be great..
cheers
Title: Re: Flikr style image annotations
Post by: Nibbler on July 04, 2007, 05:39:05 pm
I'm not interested in supporting this mod; I made it for my own interest and I don't use it myself.
Title: Re: Flikr style image annotations
Post by: bitcloud on July 05, 2007, 02:12:16 pm
too easy... i'll take a look at it and post what i can figure out...

you should be pretty chuffed with this mod btw nibbler.. its a definite winner...
Title: Re: Flikr style image annotations
Post by: Rallemann on July 18, 2007, 04:16:51 pm
It's a very useful addition.
Is it possible to add an selection where you can choose
registered user to mark them on the photos? Just like the feature on the facebook?
It would be a little sensation and I think a lot of people would prefer like it.
Title: Re: Flikr style image annotations
Post by: Nibbler on July 18, 2007, 04:22:48 pm
I have that, but it's too involved to post as a mod.
Title: Re: Flikr style image annotations
Post by: Rallemann on July 18, 2007, 04:30:12 pm
What a pitty.
But possibly you can add something to involve the notations in the search engine.
So it would be an alternative to my request...?

You wrote that it is to complex for an mod...do you mean plugin or mod?
Perhaps you can write a description how to modificate?

Thank you for this excellent support.
Title: Re: Flikr style image annotations
Post by: Rallemann on July 28, 2007, 01:26:49 pm
no idea?
Title: Re: Flikr style image annotations
Post by: Nibbler on July 28, 2007, 02:00:13 pm
See my previous reply - http://forum.coppermine-gallery.net/index.php?topic=41715.msg213937#msg213937
Title: Re: Flikr style image annotations
Post by: websnail on September 23, 2007, 03:20:51 am
I'm not interested in supporting this mod; I made it for my own interest and I don't use it myself.

Hi Nibbler,

Do you have any additional code you've developed for this mod that you could forward on?

I ask as I'm looking at Coppermine to replace gallery2 and a facebook mod with additional functionality a'la facebook would be a (excuse the pun) goldmine. I do the snailsource mods for phpbb2 so raw code would be fine and no support necessary.
Title: Re: Flikr style image annotations
Post by: technozeus on October 27, 2007, 03:03:42 pm
By the preview, the plugin is wonderful!  But where are the docs for this plugin?  I installed just fine, and under my intermediate image is an 'annotate' button, but once clicked, it does not but refresh the screen?

-- Skidpics

I have the same problem: when I click the button "annotate" I have the refresh of the page but nothing else...
I try to self create the table cpg143 but nothing...
What's wrong?
Title: Re: Flikr style image annotations
Post by: lemm85 on December 11, 2007, 01:13:38 pm
Hi@  :),
i know that the developer wouldnt support this plugin but maybe some other have noticed the same problem and could give a litle advice to fix it.

if u annotate the picture in IE7 and look at it in firefox 2.x the positions of the marks are differently! annotate in firefox 2.x and show it in IE7 same problem.

firefox 2.x move annotated marks in IE7 ~1 inch to the left... for me this problem means the death of this plugin because moved marks are very bad in some ways  :-\

some ideas or same experiences?

greetz,
Jörg
Title: Re: Flikr style image annotations
Post by: vonmax on January 22, 2008, 05:50:01 pm
I
with Safari and Opera (osX) there are some problems like in the attach
any idea?
massi
Title: Re: Flikr style image annotations
Post by: Nibbler on January 22, 2008, 05:51:31 pm
Find out how to do transparency using CSS on your platform and add it to the code.
Title: Re: Flikr style image annotations
Post by: vonmax on January 22, 2008, 05:53:16 pm
Find out how to do transparency using CSS on your platform and add it to the code.

tk u very much :)
Title: Re: Flikr style image annotations
Post by: vonmax on February 01, 2008, 10:20:54 am
I modified the photonote.css adding this 2 line

.fn-area-inner
{
   border: 1px solid #000000;
   background-color:#FFF;
   filter:alpha(opacity=0);
   opacity:0;
   -moz-opacity:0;
   -khtml-opacity:0;
   cursor: pointer;
}

now it work with Safari and Opera  :)

Title: Re: Flikr style image annotations
Post by: vonmax on February 01, 2008, 10:22:30 am
I have another problem with the Apostrophe as in the attach
any idea?
tkx
massimo
Title: Re: Flikr style image annotations
Post by: vonmax on February 01, 2008, 03:50:37 pm
ok, if i write in the DB l\'ombra instead of l'ombra it works fine
How can I resolve this bug?
Title: Re: Flikr style image annotations
Post by: Nibbler on February 01, 2008, 03:53:25 pm
I will update the plugin soon with your css change and I'll try to fix the apostrophe and utf-8 issues too.
Title: Re: Flikr style image annotations
Post by: vonmax on February 01, 2008, 03:56:49 pm
I will update the plugin soon with your css change and I'll try to fix the apostrophe and utf-8 issues too.

tk u very much
I'll stay tuned ;)
Title: Re: Flikr style image annotations
Post by: freeedy on February 08, 2008, 09:43:57 pm
Hi guys, I have a question, really really dumb one. I just installed the plugin but nothing happen. What is suppose to happen? a new button or what?

By the way maybe I have to change my theme, I am currently using chaoticsoul, or maybe another plugin is interfering with this one, i am currently using add thumbnails to lightbox, avatar maker, FSslideS v0.5 and HTML Embed v0.2.

Please help ;D
Title: Re: Flikr style image annotations
Post by: Joachim Müller on February 09, 2008, 10:24:53 am
Why don't you post a link to your gallery for a start?
Title: Re: Flikr style image annotations
Post by: vonmax on February 21, 2008, 09:21:04 pm
I will update the plugin soon with your css change and I'll try to fix the apostrophe and utf-8 issues too.

no news?
tkx
massi
Title: Re: Flikr style image annotations
Post by: tfischer on April 02, 2008, 05:49:15 pm
Hi all,

Just curious about the status of this. I'm trying to learn how to code plugins (I'm a professional C++ developer but new to PHP/MySQL) and thought fixing some of these issues might be a good way to get my feet wet. 

But I'm not seeing some of the things that are reported above (tested on Camino (Firefox) for Mac and IE for Win):

If anyone has specific steps/browser info I can take a look again.

I do have a fix that puts the "Annotate" button on the same buttonbar as the other picture edit buttons (rotate/crop/etc).  And I'm working on a fix that only gives the Annotate button to users that have picture-editing capability (e.g. they see the rotate/crop/etc buttons).  It shouldn't be too hard to extend this to specific groups once I figure out how to add a configuration UI to the plugin.

-Tim
Title: Re: Flikr style image annotations
Post by: Hot Rides on April 15, 2008, 09:03:09 pm
Hi all,

Just curious about the status of this. I'm trying to learn how to code plugins (I'm a professional C++ developer but new to PHP/MySQL) and thought fixing some of these issues might be a good way to get my feet wet. 

But I'm not seeing some of the things that are reported above (tested on Camino (Firefox) for Mac and IE for Win):
  • Single and Double quotes work fine for me.
  • I'm not seeing the "frame gets offset between IE and others" bug mentioned above

If anyone has specific steps/browser info I can take a look again.

I do have a fix that puts the "Annotate" button on the same buttonbar as the other picture edit buttons (rotate/crop/etc).  And I'm working on a fix that only gives the Annotate button to users that have picture-editing capability (e.g. they see the rotate/crop/etc buttons).  It shouldn't be too hard to extend this to specific groups once I figure out how to add a configuration UI to the plugin.

-Tim
I like where you are heading with this, please keep me updated with how you are coming along
Title: Re: Flikr style image annotations
Post by: ksawery on April 22, 2008, 04:51:34 pm
Great plugin!
I like it! ;D

Is there a way to give permissions to use annotate feature only to some user group? I have made a few tests on my gallery and noticed every registered user can annotate any pic, but I would rather prefere giving this privilege only to some groups.

It's posible? anybody knows how to do it?
Title: Re: Flikr style image annotations
Post by: ksawery on April 24, 2008, 09:48:50 pm
I have a problem! ???

This plugin works ok with Opera (with the lines of vonmax), but when I use my old explorer 6 it doesn't work. It shows a yellow exclamation saying something like: "constant of string without finishing" (I used a translator... :-\ sorry).

Any idea?
Title: Re: Flikr style image annotations
Post by: JohnMatches on April 25, 2008, 08:04:32 am
Hello,

Merci beaucoup, Thank you very much.
Title: Re: Flikr style image annotations
Post by: Pascal YAP on April 25, 2008, 10:09:56 am
Quote
Merci beaucoup, Thank you very much.
De Nada  ;D

Vous pouvez aussi répondre ici où moi-même je vous ai répondu :
http://forum.coppermine-gallery.net/index.php/topic,52180.0.html

PYAP said : "De nada. You can also make your answer in our French Topic, where i'd posted something for you".
Title: Re: Flikr style image annotations
Post by: Αndré on May 13, 2008, 10:14:41 am
if you want to remove annotations when removing a picture, you have to change the function "delete_picture()" from delete.php

find:
Code: [Select]
    $query = "DELETE FROM {$CONFIG['TABLE_EXIF']} WHERE filename='".addslashes($dir.$file)."' LIMIT 1";
    $result = cpg_db_query($query);

add below:
Code: [Select]
        $query = "DELETE FROM {$CONFIG['TABLE_PREFIX']}notes WHERE pid='$pid'";
    $result = cpg_db_query($query);


-
muu
Title: Re: Flikr style image annotations
Post by: platta on May 30, 2008, 10:43:38 pm
Hello,

I have 2 problems with my gallery. I hope someone can help me please

1. I cannot move the annotation box to the right side
2. It's possible to move the annotate button to the pic menu at the bottom

My gallery is www.feirafotos.com

Thanx in advance

Platta
Title: Re: Flikr style image annotations
Post by: Rockas on May 30, 2008, 10:59:09 pm
ok... stupid question but... how is it supposed to work?
i installed it... got a button in the pic view page... i click it... nothing happens.
Sorry i don't know and never visited flickr :-(
Title: Re: Flikr style image annotations
Post by: platta on May 30, 2008, 11:05:23 pm
Have you activated javascript?
Title: Re: Flikr style image annotations
Post by: Rockas on May 30, 2008, 11:07:43 pm
actvate javascript?
what do you mean?
there are no install instructions i just uploaded and installed it

thank you for your reply
Title: Re: Flikr style image annotations
Post by: platta on May 30, 2008, 11:29:16 pm
The script uses javascript, so you must be sure that javascript is activated in your browser
Title: Re: Flikr style image annotations
Post by: Rockas on May 30, 2008, 11:44:32 pm
Yes i have... i usually use Firefox... just noticed that in IE7 the button doesn't even appear  :(
Title: Re: Flikr style image annotations
Post by: platta on May 30, 2008, 11:45:37 pm
can you post the link to your gallery?
Title: Re: Flikr style image annotations
Post by: Rockas on May 30, 2008, 11:47:16 pm
sure: http://www.rockas.info/photograph/index.php

thank you for your help
Title: Re: Flikr style image annotations
Post by: platta on May 30, 2008, 11:56:09 pm
you have the wrong javascript files. there's a redirection to http://987mb.com

reupload the following files

http://rockas.info/photograph/plugins/annotate/lib/httpreq.js
http://rockas.info/photograph/plugins/annotate/lib/photonotes.js
Title: Re: Flikr style image annotations
Post by: Rockas on May 31, 2008, 12:09:51 am
Just re-uploaded all using ftp and fixed for firefox.

IE7 gave me some more problems... had to add my site to "secure" sites?!?!?

thank you for your help
Title: Re: Flikr style image annotations
Post by: platta on June 11, 2008, 04:17:45 pm
Hello,

I have  problems with IE6. The note box is moved to the right. I think it's a CSS problem. Does anyone know the solution?

Regards

platta
Title: Re: Flikr style image annotations
Post by: stefaanvandamme on July 20, 2008, 09:03:49 pm
ok... stupid question but... how is it supposed to work?
i installed it... got a button in the pic view page... i click it... nothing happens.
Sorry i don't know and never visited flickr :-(

i had the same problem, but i noticed the folder 'lib' was uploaded during install, so i installed the folder with an ftp program and now everything works perfect
Title: Re: Flikr style image annotations
Post by: Gephri on July 22, 2008, 09:00:35 pm
Here's a way to move the annotation button into the area that has the admin buttons (below picture).

open:
annotate/codebase.php

Find
      $html =& $CURRENT_PIC_DATA['html'];

Add
      $html1 =& $CURRENT_PIC_DATA['menu'];


Find
      $html .= <<< EOT
      
      <div align="center" style="clear: both; padding-top: 20px">

Change to
      $html1 .= <<< EOT
      
      <div align="center" style="clear: both; padding-top: 20px">



Title: Re: Flikr style image annotations
Post by: Gephri on July 22, 2008, 09:36:55 pm
Can anyone tell how to add the dirty word filter from the language file ($lang_bad_words) to this plug-in?

Title: Re: Flikr style image annotations
Post by: LnQ on July 25, 2008, 01:30:42 pm
absolutely grand!
Is there a way to give permissions to use annotate feature only to some user group? I have made a few tests on my gallery and noticed every registered user can annotate any pic, but I would rather prefere giving this privilege only to some groups.

PS. ah, forgot to mention: Thanks!!!

Hi do anyone know how to mod it so guest can make a annontions?
Title: Re: Flikr style image annotations
Post by: Αndré on July 25, 2008, 01:37:09 pm
Hi do anyone know how to mod it so guest can make a annontions?

Open 'codebase.php' and comment out
Code: [Select]
if (USER_ID)and
Code: [Select]
if (!$admin && note.user_id != $user_id) note.editable = false;
This should work.
Title: Re: Flikr style image annotations
Post by: LnQ on July 25, 2008, 02:43:09 pm
Open 'codebase.php' and comment out
Code: [Select]
if (USER_ID)and
Code: [Select]
if (!$admin && note.user_id != $user_id) note.editable = false;
This should work.

Line 97 /*   if (!$admin && note.user_id != $user_id) note.editable = false; */
and
Line 56 to 66
/*
      if (USER_ID){
         
      $html .= <<< EOT
      
      <div style="clear: both; padding-top: 20px">
         <form action="" method="post">
            <input type="submit" class="button" name="addname" value="Annotate" onclick="return addnote()" />
         </form>
      </div>
*/   

or how...

thanks for the fast reply
Title: Re: Flikr style image annotations
Post by: LnQ on July 25, 2008, 02:49:31 pm
don't think it worked as it should

here is what i out commented

Code: [Select]
<?php
/*************************
  Coppermine Photo Gallery
  ************************
  Copyright (c) 2003-2007 Coppermine Dev Team
  v1.1 originally written by Gregory DEMAR

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.
**********************************************/

if (!defined('IN_COPPERMINE')) die('Not in Coppermine...');

if (
defined('DISPLAYIMAGE_PHP')) {
$thisplugin->add_filter('page_meta','annotate_meta');
$thisplugin->add_filter('file_data','annotate_file_data');
}

$thisplugin->add_action('plugin_install','annotate_install');
$thisplugin->add_action('plugin_uninstall','annotate_uninstall');
$thisplugin->add_action('plugin_cleanup','annotate_cleanup');

function 
annotate_meta(){

$meta  "\n" '<script src="plugins/annotate/lib/httpreq.js" type="text/javascript"></script>';
$meta .= "\n" '<script src="plugins/annotate/lib/photonotes.js" type="text/javascript"></script>';
$meta .= "\n" '<link rel="stylesheet" href="plugins/annotate/lib/photonotes.css" type="text/css" />';
$meta .= "\n";

return $meta;
}

function 
annotate_file_data($CURRENT_PIC_DATA){

global $CONFIG;

if (is_image($CURRENT_PIC_DATA['filename'])){

$sql "SELECT * FROM {$CONFIG['TABLE_PREFIX']}notes WHERE pid = {$CURRENT_PIC_DATA['pid']}";
$result cpg_db_query($sql);

$notes = array();

while ($row mysql_fetch_assoc($result)) $notes[] = $row;

mysql_free_result($result);

$jsarray arrayToJS4($notes'annotations');

$html =& $CURRENT_PIC_DATA['html'];

$html '<div class="Photo fn-container" id="PhotoContainer">' $html '</div>';
/*
if (USER_ID){

$html .= <<< EOT

<div style="clear: both; padding-top: 20px">
<form action="" method="post">
<input type="submit" class="button" name="addname" value="Annotate" onclick="return addnote()" />
</form>
</div>

EOT;

}
*/

$user_id  USER_ID;
$admin GALLERY_ADMIN_MODE 'true' 'false';

$html .= <<< EOT

<script type="text/javascript">

var 
$jsarray

/* create the Photo Note Container */
var container = document.getElementById('PhotoContainer');

var notes = new PhotoNoteContainer(container);

for (var n = 0; n < annotations.length; n++){

/* create a note */
var size = new PhotoNoteRect(annotations[n].posx, annotations[n].posy, annotations[n].width, annotations[n].height);
var note = new PhotoNote(annotations[n].note,'note' + n, size);

/* implement the save/delete functions */
note.onsave = function (note) { return ajax_save(note); };
note.ondelete = function (note) { return ajax_delete(note); };

/* assign the note id number */
note.nid = annotations[n].nid;

/* if (!
$admin && note.user_id != $user_id) note.editable = false; */

/* add it to the container */
notes.AddNote(note);
}

notes.HideAllNotes();

addEvent(container, 'mouseover', function() {
         notes.ShowAllNotes();
    });
    
 addEvent(container, 'mouseout', function() {
         notes.HideAllNotes();
    });

function addnote(){

var newNote = new PhotoNote('','note' + n,new PhotoNoteRect(10,10,50,50));
newNote.onsave = function (note) { return ajax_save(note); };
newNote.ondelete = function (note) { return ajax_delete(note); };
notes.AddNote(newNote);
newNote.Select();
newNote.nid = 0;

return false;
}

function ajax_save(note){

var data = 'add=' + 
{$CURRENT_PIC_DATA['pid']} + '&nid=' + note.nid + '&posx=' + note.rect.left + '&posy=' + note.rect.top + '&width=' + note.rect.width + '&height=' + note.rect.height + '&note=' + escape(note.text);

annotate_request(data, note);

return true;
}

function ajax_delete(note){

var data = 'remove=' + note.nid;

annotate_request(data, note);

return true;
}

</script>


EOT;

}

return $CURRENT_PIC_DATA;
}

// Based on code by Rob Williams
//Convert a PHP array to a JavaScript one (rev. 4)
function arrayToJS4($array$baseName) {

$return '';

   
//Write out the initial array definition
   
$return .= ($baseName " = new Array(); \r\n ");    

   
//Reset the array loop pointer
   
reset ($array);

   
//Use list() and each() to loop over each key/value
   //pair of the array
   
while (list($key$value) = each($array)) {
      if (
is_numeric($key)) {
         
//A numeric key, so output as usual
         
$outKey "[" $key "]";
      } else {
         
//A string key, so output as a string
         
$outKey "['" $key "']";
      }
      
      if (
is_array($value)) {
         
//The value is another array, so simply call
         //another instance of this function to handle it
         
$return .= arrayToJS4($value$baseName $outKey);
      } else {

         
//Output the key declaration
         
$return .= ($baseName $outKey " = ");      

         
//Now output the value
         
if (is_numeric($value)){
         
$return .= ($value "; \r\n ");
         } else if (
is_string($value)) {
            
//Output as a string, as we did before       
            
$return .= ("'" $value "'; \r\n ");
         } else if (
$value === false) {
            
//Explicitly output false
            
$return .= ("false; \r\n ");
         } else if (
$value === NULL) {
            
//Explicitly output null
            
$return .= ("null; \r\n ");
         } else if (
$value === true) {
            
//Explicitly output true
            
$return .= ("true; \r\n ");
         } else {
            
//Output the value directly otherwise
            
$return .= ($value "; \r\n ");
         }
      }
   }
   
   return 
$return;
}


function 
annotate_install() {
    global 
$thisplugin$CONFIG;

$sql "DROP TABLE IF EXISTS `{$CONFIG['TABLE_PREFIX']}notes`";
cpg_db_query($sql);

$sql = <<< EOT

CREATE TABLE IF NOT EXISTS `
{$CONFIG['TABLE_PREFIX']}notes` (
  `nid` smallint(5) unsigned NOT NULL auto_increment,
  `pid` mediumint(8) unsigned NOT NULL,
  `posx` smallint(5) unsigned NOT NULL,
  `posy` smallint(5) unsigned NOT NULL,
  `width` smallint(5) unsigned NOT NULL,
  `height` smallint(5) unsigned NOT NULL,
  `note` text NOT NULL,
  `user_id` smallint(5) unsigned NOT NULL,
  PRIMARY KEY  (`nid`),
  KEY `pid` (`pid`)
) TYPE=MyISAM ;

EOT;

return cpg_db_query($sql);
 }
Title: Re: Flikr style image annotations
Post by: Αndré on July 25, 2008, 05:54:05 pm
You have to comment out just the line 'if (USER_ID){' and the appropriate '}'

I changed your posted code to my idea. Try:
Code: [Select]
<?php
/*************************
  Coppermine Photo Gallery
  ************************
  Copyright (c) 2003-2007 Coppermine Dev Team
  v1.1 originally written by Gregory DEMAR

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.
**********************************************/

if (!defined('IN_COPPERMINE')) die('Not in Coppermine...');

if (
defined('DISPLAYIMAGE_PHP')) {
$thisplugin->add_filter('page_meta','annotate_meta');
$thisplugin->add_filter('file_data','annotate_file_data');
}

$thisplugin->add_action('plugin_install','annotate_install');
$thisplugin->add_action('plugin_uninstall','annotate_uninstall');
$thisplugin->add_action('plugin_cleanup','annotate_cleanup');

function 
annotate_meta(){

$meta  "\n" '<script src="plugins/annotate/lib/httpreq.js" type="text/javascript"></script>';
$meta .= "\n" '<script src="plugins/annotate/lib/photonotes.js" type="text/javascript"></script>';
$meta .= "\n" '<link rel="stylesheet" href="plugins/annotate/lib/photonotes.css" type="text/css" />';
$meta .= "\n";

return $meta;
}

function 
annotate_file_data($CURRENT_PIC_DATA){

global $CONFIG;

if (is_image($CURRENT_PIC_DATA['filename'])){

$sql "SELECT * FROM {$CONFIG['TABLE_PREFIX']}notes WHERE pid = {$CURRENT_PIC_DATA['pid']}";
$result cpg_db_query($sql);

$notes = array();

while ($row mysql_fetch_assoc($result)) $notes[] = $row;

mysql_free_result($result);

$jsarray arrayToJS4($notes'annotations');

$html =& $CURRENT_PIC_DATA['html'];

$html '<div class="Photo fn-container" id="PhotoContainer">' $html '</div>';

// if (USER_ID){

$html .= <<< EOT

<div style="clear: both; padding-top: 20px">
<form action="" method="post">
<input type="submit" class="button" name="addname" value="Annotate" onclick="return addnote()" />
</form>
</div>

EOT;

// }


$user_id  USER_ID;
$admin GALLERY_ADMIN_MODE 'true' 'false';

$html .= <<< EOT

<script type="text/javascript">

var 
$jsarray

/* create the Photo Note Container */
var container = document.getElementById('PhotoContainer');

var notes = new PhotoNoteContainer(container);

for (var n = 0; n < annotations.length; n++){

/* create a note */
var size = new PhotoNoteRect(annotations[n].posx, annotations[n].posy, annotations[n].width, annotations[n].height);
var note = new PhotoNote(annotations[n].note,'note' + n, size);

/* implement the save/delete functions */
note.onsave = function (note) { return ajax_save(note); };
note.ondelete = function (note) { return ajax_delete(note); };

/* assign the note id number */
note.nid = annotations[n].nid;

/* if (!
$admin && note.user_id != $user_id) note.editable = false; */

/* add it to the container */
notes.AddNote(note);
}

notes.HideAllNotes();

addEvent(container, 'mouseover', function() {
         notes.ShowAllNotes();
    });
    
 addEvent(container, 'mouseout', function() {
         notes.HideAllNotes();
    });

function addnote(){

var newNote = new PhotoNote('','note' + n,new PhotoNoteRect(10,10,50,50));
newNote.onsave = function (note) { return ajax_save(note); };
newNote.ondelete = function (note) { return ajax_delete(note); };
notes.AddNote(newNote);
newNote.Select();
newNote.nid = 0;

return false;
}

function ajax_save(note){

var data = 'add=' + 
{$CURRENT_PIC_DATA['pid']} + '&nid=' + note.nid + '&posx=' + note.rect.left + '&posy=' + note.rect.top + '&width=' + note.rect.width + '&height=' + note.rect.height + '&note=' + escape(note.text);

annotate_request(data, note);

return true;
}

function ajax_delete(note){

var data = 'remove=' + note.nid;

annotate_request(data, note);

return true;
}

</script>


EOT;

}

return $CURRENT_PIC_DATA;
}

// Based on code by Rob Williams
//Convert a PHP array to a JavaScript one (rev. 4)
function arrayToJS4($array$baseName) {

$return '';

   
//Write out the initial array definition
   
$return .= ($baseName " = new Array(); \r\n ");    

   
//Reset the array loop pointer
   
reset ($array);

   
//Use list() and each() to loop over each key/value
   //pair of the array
   
while (list($key$value) = each($array)) {
      if (
is_numeric($key)) {
         
//A numeric key, so output as usual
         
$outKey "[" $key "]";
      } else {
         
//A string key, so output as a string
         
$outKey "['" $key "']";
      }
      
      if (
is_array($value)) {
         
//The value is another array, so simply call
         //another instance of this function to handle it
         
$return .= arrayToJS4($value$baseName $outKey);
      } else {

         
//Output the key declaration
         
$return .= ($baseName $outKey " = ");      

         
//Now output the value
         
if (is_numeric($value)){
         
$return .= ($value "; \r\n ");
         } else if (
is_string($value)) {
            
//Output as a string, as we did before       
            
$return .= ("'" $value "'; \r\n ");
         } else if (
$value === false) {
            
//Explicitly output false
            
$return .= ("false; \r\n ");
         } else if (
$value === NULL) {
            
//Explicitly output null
            
$return .= ("null; \r\n ");
         } else if (
$value === true) {
            
//Explicitly output true
            
$return .= ("true; \r\n ");
         } else {
            
//Output the value directly otherwise
            
$return .= ($value "; \r\n ");
         }
      }
   }
   
   return 
$return;
}


function 
annotate_install() {
    global 
$thisplugin$CONFIG;

$sql "DROP TABLE IF EXISTS `{$CONFIG['TABLE_PREFIX']}notes`";
cpg_db_query($sql);

$sql = <<< EOT

CREATE TABLE IF NOT EXISTS `
{$CONFIG['TABLE_PREFIX']}notes` (
  `nid` smallint(5) unsigned NOT NULL auto_increment,
  `pid` mediumint(8) unsigned NOT NULL,
  `posx` smallint(5) unsigned NOT NULL,
  `posy` smallint(5) unsigned NOT NULL,
  `width` smallint(5) unsigned NOT NULL,
  `height` smallint(5) unsigned NOT NULL,
  `note` text NOT NULL,
  `user_id` smallint(5) unsigned NOT NULL,
  PRIMARY KEY  (`nid`),
  KEY `pid` (`pid`)
) TYPE=MyISAM ;

EOT;

return cpg_db_query($sql);
 }
Title: Re: Flikr style image annotations
Post by: LnQ on July 25, 2008, 11:42:12 pm
Thanks it works...

Now I just need some security....could it be posible to add some admin info for abuse...
when people tag theirs ip adresse get logged... or some capture code to be verified before someone can tag...

abuse from bots and stuff if they exits...

but thanks for the plugin too it awsome
Title: Re: Flikr style image annotations
Post by: Αndré on July 26, 2008, 08:27:31 am
when people tag theirs ip adresse get logged
Just make an 'ALTER TABLE foo ADD bar' in your database and change the sql query, where the annotations are added to the database.

some capture code to be verified before someone can tag
You could customize the captcha plugin for this purpose.
Title: Re: Flikr style image annotations
Post by: Gephri on July 26, 2008, 04:53:31 pm
eenemeenemuu:

I see that you are offering help to prevent an abuse using this mod.  Can you help me with the following request?

Quote
how to add the dirty word filter from the language file ($lang_bad_words) to this plug-in?
Title: Re: Flikr style image annotations
Post by: Αndré on July 26, 2008, 10:03:26 pm
I don't know how $lang_bad_words is constructed, but i suppose it's an array.

You have to insert somewhere something like
Code: [Select]
if (in_array($lang_bad_words))
  cpg_die(ERROR, 'Don't use bad words.', __FILE__, __LINE__);
or check it via javascript.


I'll think about that soon ;)
Title: Re: Flikr style image annotations
Post by: Gephri on July 27, 2008, 01:22:29 am
Thanks
Here's 2 places where dirty word functions are in place in cpg:
db_input.php
Code: [Select]
function check_comment(&$str)
{
    global $CONFIG, $lang_bad_words, $queries;

    if ($CONFIG['filter_bad_words']) {
        $ercp = array();
        foreach($lang_bad_words as $word) {
            $ercp[] = '/' . ($word[0] == '*' ? '': '\b') . str_replace('*', '', $word) . ($word[(strlen($word)-1)] == '*' ? '': '\b') . '/i';
        }
        $str = preg_replace($ercp, '(...)', $str);
    }

    $com_words=explode(' ',strip_tags(bb_decode($str)));
    $replacements=array();
    foreach($com_words as $key => $word) {
       if (utf_strlen($word) > $CONFIG['max_com_wlength'] ) {
          $replacements[] = $word;
       }
    }
    $str=str_replace($replacements,'(...)',$str);
}

and
include/functions.inc
Code: [Select]
/**
 * filter_content()
 *
 * Replace strings that match badwords with tokens indicating it has been filtered.
 *
 * @param string or array $str
 * @return string or array
 **/
function filter_content($str)
{
    global $lang_bad_words, $CONFIG, $ercp;
    if ($CONFIG['filter_bad_words']) {
        static $ercp=array();
        if (!count($ercp)) foreach($lang_bad_words as $word) {
            $ercp[] = '/' . ($word[0] == '*' ? '': '\b') . str_replace('*', '', $word) . ($word[(strlen($word)-1)] == '*' ? '': '\b') . '/i';
        }
        if (is_array($str)) {
            $new_str=array();
            foreach ($str as $key=>$element) {
                $new_str[$key]=filter_content($element);
            }
            $str=$new_str;
        } else {
        $stripped_str = strip_tags($str);
        $str = preg_replace($ercp, '(...)', $stripped_str);
        }
    }
return $str;
}

Beyond that - I'm not sure what to do...
Title: Re: Flikr style image annotations
Post by: lemm85 on September 04, 2008, 09:22:19 pm
hi anyone,

nobody an idea why firefox and IE7 set different marks like this:

marked with firefox3.0.1:
[Edit GauGau] Replaced hotlinked images with attachment [/Edit]

viewed in IE7:
[Edit GauGau] Replaced hotlinked images with attachment [/Edit]

could any other approve this problem?

thx
Title: Re: Flikr style image annotations
Post by: Αndré on September 04, 2008, 09:33:30 pm
could any other approve this problem?

No. In my gallery the annotations are at the same place in IE 7 and FF 3.
Title: Re: Flikr style image annotations
Post by: Joachim Müller on September 05, 2008, 07:44:26 pm
Posting a link instead of just a screenshot might help... ::)
Title: Re: Flikr style image annotations
Post by: Fabricio Ferrero on September 13, 2008, 09:31:27 pm
Hi,

Some user of spanish sub forum is using this plugin but he can't put the 'ñ'. He is right. Maybe some of you have modified the code to work under UTF-8 and could share an updated version of the plugin.
Title: Re: Flikr style image annotations
Post by: davieb on September 22, 2008, 10:01:19 pm
My users used to like this feature when we ran a flickr gallery so I reckon it would be a good addition to our coppermine one, however I have the same problem that others had early on, and that is the annotate button appears but when it's clicked the screen just refreshes but nothing appears to add a note anywhere. Can someone explain what I've done wrong or what I need to do to resolve this problem please.
Title: Re: Flikr style image annotations
Post by: chrislam101 on October 01, 2008, 04:11:15 pm
I have one problem on using that, Can it support UT8 or chinese BIG5 ? many thanks !
Title: Re: Flikr style image annotations
Post by: Joachim Müller on October 01, 2008, 05:31:27 pm
Nibbler already said that he would be updating the plugin with utf-8 support if he got the time:
I will update the plugin soon with your css change and I'll try to fix the apostrophe and utf-8 issues too.
So far, he hasn't updated it. You're welcome to look into this if you're ready.
Title: Re: Flikr style image annotations
Post by: chrislam101 on October 02, 2008, 12:35:43 pm
Oh thanks ! and waiting for new update  ;D
Title: Re: Flikr style image annotations
Post by: jManuel on October 07, 2008, 09:43:45 pm
hi,

I have one problem on using that, Can it support UT8 or chinese BIG5 ? many thanks !
Try this,

view this topic in spanish sub-board:

http://forum.coppermine-gallery.net/index.php/topic,55068.0.html (http://forum.coppermine-gallery.net/index.php/topic,55068.0.html)

waiting for update.

Title: Re: Flikr style image annotations
Post by: jharvie on October 19, 2008, 03:01:51 pm
absolutely grand!
Is there a way to give permissions to use annotate feature only to some user group? I have made a few tests on my gallery and noticed every registered user can annotate any pic, but I would rather prefere giving this privilege only to some groups.

PS. ah, forgot to mention: Thanks!!!

Yeah, Is there any way to make it so that only certain groups can use the annotate feature or even so that only admin can use it? I don't really want any registered user to be able to annotate my pictures.
Title: Re: Flikr style image annotations
Post by: Αndré on October 19, 2008, 06:48:17 pm
Yeah, Is there any way to make it so that only certain groups can use the annotate feature or even so that only admin can use it? I don't really want any registered user to be able to annotate my pictures.

In codebase.php, change the line
Code: [Select]
if (USER_ID){to your needs.
Title: Re: Flikr style image annotations
Post by: jharvie on October 19, 2008, 09:05:44 pm
In codebase.php, change the line
Code: [Select]
if (USER_ID){to your needs.

So if I want to allow the "administrators" group or the username "Admin", what would I change this to?
Title: Re: Flikr style image annotations
Post by: Αndré on October 20, 2008, 06:56:07 pm
So if I want to allow the "administrators" group or the username "Admin", what would I change this to?

Simple way to give only the user "Admin" (with user id "1") access, replace it with:
Code: [Select]
if (USER_ID == "1"){

To give groups access, replace it with:
Code: [Select]
$group = mysql_result(cpg_db_query("
  SELECT g.group_name FROM {$CONFIG['TABLE_USERS']} u
  INNER JOIN {$CONFIG['TABLE_USERGROUPS']} g
  ON u.user_group = g.group_id
  WHERE u.user_id = ".USER_ID
),0);
if ($group == "Administrators" || $group == "other groups"){
Title: Re: Flikr style image annotations
Post by: ksawery on October 23, 2008, 01:17:53 pm
Is in progress a new version with updates?
Title: Re: Flikr style image annotations
Post by: Nibbler on October 23, 2008, 03:39:33 pm
Updated to 1.1. See first post.
Title: Re: Flikr style image annotations
Post by: ksawery on October 27, 2008, 09:11:01 pm
Great. Thanks!
Title: Re: Flikr style image annotations
Post by: gtgillis on November 11, 2008, 11:13:56 pm
Updated to 1.1. See first post.

Is there any chance that you will be adding annotation search capabilities?
Title: Re: Flikr style image annotations
Post by: Αndré on November 12, 2008, 08:20:09 am
Is there any chance that you will be adding annotation search capabilities?
I've written an extra search for my purposes. It consists of an extra file (for the search form) and a new meta album (for the search results). It's NOT integrated in the standard search of cpg. If you are interested, I can give you the code as it is. The search form is hard-coded in german.
Title: Re: Flikr style image annotations
Post by: Pascal YAP on November 12, 2008, 09:29:57 am
eenemeenemuu,
 It would be nice to see your work  ;D
Title: Re: Flikr style image annotations
Post by: Αndré on November 12, 2008, 10:04:28 am
This is for the search form. Create a new file and copy this into it:
Code: [Select]
<?php

define
('IN_COPPERMINE'true);
require(
'include/init.inc.php');

pageheader("Suche");

function 
div_start($tag)
{
  echo 
"<div id=\"$tag\" style=\"display:none;\">";
  
starttable("100%"$tag2);
}

function 
div_end()
{
  
endtable();
  echo 
"</div>";
}

starttable("100%""Auswahl",2);
echo 
"
  <tr>
    <td class=\"tableb\" width=\"200\">
      Ich suche nach:
    </td>
    <td class=\"tableb\">
      <input type=\"radio\" name=\"albfile\" onclick=\"document.getElementById('Bildersuche').style.display = 'none'; document.getElementById('Albensuche').style.display = 'block'; document.getElementById('album').focus();\" /> Alben
      <input type=\"radio\" name=\"albfile\" onclick=\"document.getElementById('Bildersuche').style.display = 'block'; document.getElementById('Albensuche').style.display = 'none';\" /> Dateien (Bilder, Videos)
    </td>
  </tr>
"
;
endtable();

div_start("Albensuche");
echo 
"
  <script type=\"text/javascript\">
    var alertTimerId = 0;

    function doSearch ( )
    {
      clearTimeout ( alertTimerId );
      document.getElementById('album').style.color = '#FF0000';
      alertTimerId = setTimeout ( 'DoShowResult()', 500 );
    }

    function DoShowResult ( )
    {
      document.getElementById('album').style.color = '#000000';
      clearTimeout ( alertTimerId );
      showResult(document.getElementById('album').value);
    }
  </script>

  <tr>
    <td class=\"tableb\">
      <form method=\"get\" action=\"thumbnails.php\">
        <input type=\"text\" id=\"album\" name=\"alb_title\" class=\"textinput\" size=\"50\" onkeyup=\"doSearch()\" />
        <input type=\"hidden\" name=\"album\" value=\"search_alb\" />
        <input type=\"submit\" name=\"Submit\" value=\"Suchen\" class=\"button\" />
        <div align=\"left\" id=\"livesearch\" style=\"position:absolute;background-color: #ffffff;\" />
      </form>
    </td>
  </tr>
"
;
div_end();

div_start("Bildersuche");
echo 
"</table><form method=\"get\" action=\"thumbnails.php\"><input type=\"hidden\" name=\"album\" value=\"search_pic\" />";

starttable("100%""Kriterien",2);
//$disabled = isfriend() ? "" : "disabled=\"disabled\"";
echo "
  <!--
  <tr>
    <td class=\"tableb\" width=\"200\">
      Alles <br />
    </td>
    <td class=\"tableb\">
      <input type=\"radio\" name=\"all\" value=\"on\" onclick=\" 
        document.getElementById('cat_on').click();
        document.getElementById('alb_on').click();
        document.getElementById('file_on').click();
        document.getElementById('com_on').click();
        document.getElementById('pers_on').click();
      \" /> Anzeigen
      <input type=\"radio\" name=\"all\" value=\"off\" onclick=\" 
        document.getElementById('cat_off').click();
        document.getElementById('alb_off').click();
        document.getElementById('file_off').click();
        document.getElementById('com_off').click();
        document.getElementById('pers_off').click();
      \" /> Nicht anzeigen
    </td>
  </tr>
  -->

  <tr>
    <td class=\"tableb\" width=\"200\">
      <b>Kategorie</b> -> Monat / Jahr <br />
    </td>
    <td class=\"tableb\">
      <input type=\"radio\" name=\"cat\" id=\"cat_on\" value=\"on\" onclick=\"document.getElementById('Kategorie').style.display = 'block'; document.getElementById('cat_month').focus();\" /> Anzeigen
      <input type=\"radio\" name=\"cat\" id=\"cat_off\" value=\"off\" onclick=\"document.getElementById('Kategorie').style.display = 'none';\" checked=\"checked\" /> Nicht anzeigen
    </td>
  </tr>

  <tr>
    <td class=\"tableb\" width=\"200\">
      <b>Album</b> -> Titel / Beschreibung
    </td>
    <td class=\"tableb\">
      <input type=\"radio\" name=\"alb\" id=\"alb_on\" value=\"on\" onclick=\"document.getElementById('Album').style.display = 'block'; document.getElementById('alb_title').focus();\" /> Anzeigen
      <input type=\"radio\" name=\"alb\" id=\"alb_off\" value=\"off\" onclick=\"document.getElementById('Album').style.display = 'none';\" checked=\"checked\" /> Nicht anzeigen
    </td>
  </tr>

  <tr>
    <td class=\"tableb\" width=\"200\">
      <b>Datei</b> -> Name / Endung
    </td>
    <td class=\"tableb\">
      <input type=\"radio\" name=\"file\" id=\"file_on\" value=\"on\" onclick=\"document.getElementById('Datei').style.display = 'block'; document.getElementById('file_name').focus();\" /> Anzeigen
      <input type=\"radio\" name=\"file\" id=\"file_off\" value=\"off\" onclick=\"document.getElementById('Datei').style.display = 'none';\" checked=\"checked\" /> Nicht anzeigen
    </td>
  </tr>

  <tr>
    <td class=\"tableb\" width=\"200\">
      <b>Kommentar</b> -> Autor / Text
    </td>
    <td class=\"tableb\">
      <input type=\"radio\" name=\"com\" id=\"com_on\" value=\"on\" onclick=\"document.getElementById('Kommentar').style.display = 'block'; document.getElementById('com_aut').focus();\" /> Anzeigen
      <input type=\"radio\" name=\"com\" id=\"com_off\" value=\"off\" onclick=\"document.getElementById('Kommentar').style.display = 'none';\" checked=\"checked\" /> Nicht anzeigen
    </td>
  </tr>

  <tr>
    <td class=\"tableb\" width=\"200\">
      <b>Person</b> -> Name
    </td>
    <td class=\"tableb\">
      <input type=\"radio\" name=\"pers\" id=\"pers_on\" value=\"on\" 
$disabled onclick=\"document.getElementById('Person').style.display = 'block'; document.getElementById('pers_name').focus();\" /> Anzeigen
      <input type=\"radio\" name=\"pers\" id=\"pers_off\" value=\"off\" onclick=\"document.getElementById('Person').style.display = 'none';\" checked=\"checked\" /> Nicht anzeigen
    </td>
  </tr>
"
;
endtable();

div_start("Kategorie");
$first_year mysql_result(cpg_db_query("SELECT MIN(name) FROM {$CONFIG['TABLE_CATEGORIES']}"),0);
$years "";
for (
$i=$first_year$i<=date("Y"); $i++)
  
$years .= "<option>$i</option>";
echo 
"
  <tr>
    <td class=\"tableb\" width=\"200\">
      Monat:
    </td>
    <td class=\"tableb\">
      <select id=\"cat_month\" name=\"cat_month\" class=\"button\" size=\"1\" style=\"width:300px;\">
        <option selected=\"selected\"></option>
        <option>Januar</option>
        <option>Februar</option>
        <option>M&auml;rz</option>
        <option>April</option>
        <option>Mai</option>
        <option>Juni</option>
        <option>Juli</option>
        <option>August</option>
        <option>September</option>
        <option>Oktober</option>
        <option>November</option>
        <option>Dezember</option>
      </select><br />
    </td>
  </tr>

  <tr>
    <td class=\"tableb\" width=\"200\">
      Jahr:
    </td>
    <td class=\"tableb\">
      <select name=\"cat_year\" class=\"button\" size=\"1\" style=\"width:300px;\">
        <option selected=\"selected\"></option> 
$years
      </selected>
    </td>
  </tr>
"
;
div_end();

div_start("Album");
echo 
"
  <tr>
    <td class=\"tableb\" width=\"200\">
      Titel:
    </td>
    <td class=\"tableb\">
      <input type=\"input\" id=\"alb_title\" name=\"alb_title\" class=\"textinput\" style=\"width:300px;\" />
    </td>
  </tr>

  <tr>
    <td class=\"tableb\" width=\"200\">
      Beschreibung:
    </td>
    <td class=\"tableb\">
      <input type=\"input\" name=\"alb_desc\" class=\"textinput\" style=\"width:300px;\" />
    </td>
  </tr>
"
;
div_end();

div_start("Datei");
echo 
"
  <tr>
    <td class=\"tableb\" width=\"200\">
      Name:
    </td>
    <td class=\"tableb\">
      <input type=\"input\" id=\"file_name\" name=\"file_name\" class=\"textinput\" style=\"width:300px;\" />
    </td>
  </tr>

  <tr>
    <td class=\"tableb\" width=\"200\">
      Endung:
    </td>
    <td class=\"tableb\">
      <input type=\"input\" name=\"file_ext\" class=\"textinput\" style=\"width:300px;\" /> (z.B. \"flv\" f&uuml;r alle Videos)
    </td>
  </tr>
"
;
div_end();

div_start("Kommentar");
echo 
"
  <tr>
    <td class=\"tableb\" width=\"200\">
      Autor:
    </td>
    <td class=\"tableb\">
      <input type=\"input\" id=\"com_aut\" name=\"com_aut\" class=\"textinput\" style=\"width:300px;\" />
    </td>
  </tr>

  <tr>
    <td class=\"tableb\" width=\"200\">
      Text:
    </td>
    <td class=\"tableb\">
      <input type=\"input\" name=\"com_text\" class=\"textinput\" style=\"width:300px;\" />
    </td>
  </tr>
"
;
div_end();

//if (isfriend())
//{
  
div_start("Person");
  echo 
"
    <tr>
      <td class=\"tableb\" width=\"200\">
        Name:
      </td>
      <td class=\"tableb\">
        <input type=\"input\" id=\"pers_name\" name=\"pers_name\" id=\"pers_name\" class=\"textinput\" style=\"width:300px;\" />
      </td>
    </tr>
  "
;
  
$result cpg_db_query("SELECT note FROM {$CONFIG['TABLE_PREFIX']}notes GROUP BY note ORDER BY note ASC");
  if (
mysql_num_rows($result))
  {
    echo 
"<tr><td class=\"tableb\" colspan=\"2\">";
    while (
$row mysql_fetch_array($resultMYSQL_NUM))
      echo 
"<span class=\"button\" style=\"cursor: pointer;\" onclick=\"document.getElementById('pers_name').value += ' '+'{$row[0]}'+' ';document.getElementById('search').focus();return false;\">&nbsp;{$row[0]}&nbsp;</span> ";
    echo 
"</td></tr>" ;
    echo 
"<tr><td class=\"tableb\" colspan=\"2\" align=\"center\">";
    echo 
"Obenstehende Liste enth&auml;lt alle bisher verlinkten Personen und k&ouml;nnen per Klick zur Suche hinzugef&uuml;gt werden.";
    echo 
"</td></tr>";
  }
  
div_end();
//}

starttable("100%""<input type=\"submit\" value=\"Suchen\" class=\"button\" />");
endtable();
echo 
"</form></div>";

pagefooter();

?>

FYI:
1. The field "Person" is for the annotations. I modified the plugin a little bit. In my gallery you mark persons that are on the picture, that's why it's called "Person".
2. The function isfriend() checks, if someone has the rights to access the person search (= search for annotations). I have disabled the check in this example, because it's only relevant in my gallery.
3. I have an AJAX script for pre searching the albums. If you get an error or something at the album search, the needed files are missing.


Here is the code for the meta albums. It has to copied into include/functions.inc.php:
Code: [Select]
        case 'search_pic': // Search pictures
                if ($META_ALBUM_SET && $CURRENT_CAT_NAME) {
                        $album_name = "Suchergebnisse - $CURRENT_CAT_NAME";
                } else {
                        $album_name = "Suchergebnisse";
                }

                $META_ALBUM_SET = str_replace("AND aid NOT IN","AND a.aid NOT IN",$META_ALBUM_SET);

                $get_array = array("file", "file_name", "file_ext", "com", "com_aut", "com_text", "alb", "alb_title", "alb_desc", "pers", "pers_name", "cat", "cat_month", "cat_year");
                foreach($get_array as $key)
                {
                  $_GET[$key] = isset($_GET[$key]) ? trim(preg_replace("[\s+]"," ",$_GET[$key])) : $_COOKIE[$key];
                  setcookie($key, $_GET[$key]);
                }

                $columns = "";
                $tables = "{$CONFIG['TABLE_PICTURES']} p INNER JOIN {$CONFIG['TABLE_ALBUMS']} a ON p.aid = a.aid";
                $where = "";
                $suffix = "";
                $order = "p.pid";

                if ($_GET['file'] == "on")
                {
                  $where .= "AND (";
                  if ($_GET['file_name'] != "")
                  {
                    $file_name_parts = explode(" ", $_GET['file_name']);
                    foreach ($file_name_parts as $value)
                      $where .= "p.filename LIKE '%$value%' AND ";
                  }
                  if (trim($_GET['file_ext']) != "")
                    $where .= "p.filename LIKE '%.".trim($_GET['file_ext'])."' AND ";
                  $where .= "1) ";
                }

                if ($_GET['com'] == "on")
                {
                  $tables .= " INNER JOIN {$CONFIG['TABLE_COMMENTS']} c ON c.pid = p.pid";
                  $where .= "AND (";
                  $order = "c.msg_id";
                  if ($_GET['com_text'] != "")
                  {
                    $com_text_parts = explode(" ", $_GET['com_text']);
                    foreach ($com_text_parts as $value)
                      $where .= "c.msg_body LIKE '%$value%' AND ";
                  }
                  if ($_GET['com_aut'] != "")
                    $where .= "c.msg_author LIKE '%{$_GET['com_aut']}%' AND ";
                  $where .= "1) ";
                }

                if ($_GET['alb'] == "on")
                {
                  $where .= "AND (";
                  if ($_GET['alb_title'] != "")
                  {
                    $alb_title_parts = explode(" ", $_GET['alb_title']);
                    foreach ($alb_title_parts as $value)
                      $where .= "a.title LIKE '%$value%' AND ";
                  }
                  if ($_GET['alb_desc'] != "")
                  {
                    $alb_desc_parts = explode(" ", $_GET['alb_desc']);
                    foreach ($alb_desc_parts as $value)
                      $where .= "a.description LIKE '%$value%' AND ";
                  }
                  $where .= "1) ";
                }

                if ($_GET['pers'] == "on")
                {
                  if ($_GET['pers_name'] != "")
                  {
                    $columns .= ", COUNT(DISTINCT note) AS anzahl";
                    $tables .= " INNER JOIN {$CONFIG['TABLE_PREFIX']}notes n ON p.pid = n.pid";
                    $where .= "AND (";
                    $pers_name_parts = explode(" ", $_GET['pers_name']);
                    $pcount = count($pers_name_parts);
                    for ($i=0;$i<$pcount-1;$i++)
                      $where .= "n.note = '{$pers_name_parts[$i]}' OR ";
                    $where .= "n.note = '{$pers_name_parts[$i]}' AND ";
                    $where .= "1) ";
                    $suffix = "GROUP BY p.pid HAVING anzahl = $pcount";
                  }
                }

                if ($_GET['cat'] == "on")
                {
                  $tables .= " INNER JOIN {$CONFIG['TABLE_CATEGORIES']} cm ON cm.cid = a.category";
                  $where .= "AND (";
                  if ($_GET['cat_month'] != "")
                    $where .= "cm.name LIKE '{$_GET['cat_month']}' AND ";
                  if ($_GET['cat_year'] != "")
                  {
                    $tables .= " INNER JOIN {$CONFIG['TABLE_CATEGORIES']} cy ON cm.parent = cy.cid";
                    $where .= "cy.name LIKE '{$_GET['cat_year']}' AND ";
                  }
                  $where .= "1) ";
                }

                $query = "SELECT DISTINCT(p.pid) $columns FROM $tables WHERE approved = 'YES' $where $META_ALBUM_SET $suffix";
                $result = cpg_db_query($query);
                $count = mysql_num_rows($result);
                mysql_free_result($result);

                $select_columns = 'DISTINCT p.*, a.title';
                $query = "SELECT $select_columns $columns FROM $tables WHERE approved = 'YES' $where $META_ALBUM_SET $suffix ORDER BY $order DESC $limit";
                $result = cpg_db_query($query);

                $rowset = array();
                while($row = mysql_fetch_array($result)){
                        $rowset[-$row['pid']] = $row;
                }
                mysql_free_result($result);

                if ($set_caption) build_caption($rowset);

                $rowset = CPGPluginAPI::filter('thumb_caption_search_pic',$rowset);

                return $rowset;
                break;

        case 'search_alb': // Search albums
                if ($META_ALBUM_SET && $CURRENT_CAT_NAME) {
                        $album_name = "Suchergebnisse - $CURRENT_CAT_NAME";
                } else {
                        $album_name = "Suchergebnisse";
                }

                if (isset($_GET['alb_title']))
                  $alb_title = trim(preg_replace("[\s+]"," ",$_GET['alb_title']));
                else
                  $alb_title = $_COOKIE['alb_title'];

                setcookie('alb_title', $alb_title);

                $where = "";
                $alb_title_parts = explode(" ", $alb_title);
                foreach ($alb_title_parts as $key => $value)
                  $where .= "{$CONFIG['TABLE_ALBUMS']}.title LIKE '%$value%' AND ";

                $META_ALBUM_SET = str_replace("aid", $CONFIG['TABLE_PICTURES'].".aid", $META_ALBUM_SET);

                $query = "SELECT count({$CONFIG['TABLE_ALBUMS']}.aid) FROM {$CONFIG['TABLE_PICTURES']},{$CONFIG['TABLE_ALBUMS']} WHERE $where {$CONFIG['TABLE_PICTURES']}.aid = {$CONFIG['TABLE_ALBUMS']}.aid AND approved = 'YES' $META_ALBUM_SET GROUP BY {$CONFIG['TABLE_PICTURES']}.aid";

                $result = cpg_db_query($query);
                $count = mysql_num_rows($result);
                mysql_free_result($result);

                //$query = "SELECT *,{$CONFIG['TABLE_ALBUMS']}.title AS title,{$CONFIG['TABLE_ALBUMS']}.aid AS aid FROM {$CONFIG['TABLE_PICTURES']},{$CONFIG['TABLE_ALBUMS']} WHERE {$CONFIG['TABLE_PICTURES']}.aid = {$CONFIG['TABLE_ALBUMS']}.aid AND approved = 'YES' $META_ALBUM_SET GROUP BY {$CONFIG['TABLE_PICTURES']}.aid ORDER BY {$CONFIG['TABLE_PICTURES']}.ctime DESC $limit";
                //display album thumbnail // by muu
                $query = "SELECT *,{$CONFIG['TABLE_ALBUMS']}.title AS title,{$CONFIG['TABLE_ALBUMS']}.aid AS aid FROM {$CONFIG['TABLE_PICTURES']},{$CONFIG['TABLE_ALBUMS']} WHERE $where {$CONFIG['TABLE_PICTURES']}.aid = {$CONFIG['TABLE_ALBUMS']}.aid AND approved = 'YES' AND {$CONFIG['TABLE_PICTURES']}.pid = {$CONFIG['TABLE_ALBUMS']}.thumb $META_ALBUM_SET ORDER BY {$CONFIG['TABLE_PICTURES']}.ctime DESC $limit"; // by muu
                $result = cpg_db_query($query);
                $rowset = cpg_db_fetch_rowset($result);
                mysql_free_result($result);

                if ($set_caption) build_caption($rowset,array('ctime'));

                $rowset = CPGPluginAPI::filter('thumb_caption_lastalb',$rowset);

                return $rowset;
                break;

For HTML titles you have to add the 2 meta albums in your language file ($lang_meta_album_names[])


I suppose that's all you have to know :D
Title: Re: Flikr style image annotations
Post by: paquets on December 08, 2008, 02:24:47 pm
This plugin is really cool and a search function would make it even greater...

Would it be possible to have a search function that gives the search results in the same output as the traditional coppermine search? Do you think it would be possible to use the plugin "Seach Albums" and tweak it accordingly?
Title: Re: Flikr style image annotations
Post by: Αndré on December 08, 2008, 02:34:45 pm
Would it be possible to have a search function that gives the search results in the same output as the traditional coppermine search?
Read the post above ::) This will generate a new search and can't be used with the standard search form from cpg. You just have to delete the functions you don't need (it's a search form, not just for searching annotations).
Title: Re: Flikr style image annotations
Post by: paquets on December 08, 2008, 02:41:01 pm
I see,

I guess the fact that I don't speak or read German doesn't help. I'll try and figure it out. Thanks!
Title: Re: Flikr style image annotations
Post by: Αndré on December 08, 2008, 02:49:29 pm
I've written this search form for my personal gallery and posted my code, because Pascal asked for it.

All you have to know (for testing it) is:
1. at "Ich suche nach:", select "Dateien (Bilder, Videos)"
2. at "Kriterien", "Person -> Name", select "Anzeigen"
-> the search form for the annotations appears
Title: Re: Flikr style image annotations
Post by: pukas on January 10, 2009, 01:23:09 pm
I've a problem...I've installed the plugin but the search feature doesn't work...the search say to me: no images...
what's the problem?
can you say to me where I've to insert case_image pics in config.inc file?
Title: Re: Flikr style image annotations
Post by: Αndré on January 10, 2009, 01:51:22 pm
I've a problem...I've installed the plugin but the search feature doesn't work...the search say to me: no images...
what's the problem?
can you say to me where I've to insert case_image pics in config.inc file?
You want to insert what in which file ??? Which search feature do you mean? The plugin doesn't come with a search feature.
Maybe it would be helpful to give us a link to your annotations search page.
Title: Re: Flikr style image annotations
Post by: pukas on January 10, 2009, 02:22:11 pm
This is for the search form. Create a new file and copy this into it:
Code: [Select]
<?php

define
('IN_COPPERMINE'true);
require(
'include/init.inc.php');

pageheader("Suche");

function 
div_start($tag)
{
  echo 
"<div id=\"$tag\" style=\"display:none;\">";
  
starttable("100%"$tag2);
}

function 
div_end()
{
  
endtable();
  echo 
"</div>";
}

starttable("100%""Auswahl",2);
echo 
"
  <tr>
    <td class=\"tableb\" width=\"200\">
      Ich suche nach:
    </td>
    <td class=\"tableb\">
      <input type=\"radio\" name=\"albfile\" onclick=\"document.getElementById('Bildersuche').style.display = 'none'; document.getElementById('Albensuche').style.display = 'block'; document.getElementById('album').focus();\" /> Alben
      <input type=\"radio\" name=\"albfile\" onclick=\"document.getElementById('Bildersuche').style.display = 'block'; document.getElementById('Albensuche').style.display = 'none';\" /> Dateien (Bilder, Videos)
    </td>
  </tr>
"
;
endtable();

div_start("Albensuche");
echo 
"
  <script type=\"text/javascript\">
    var alertTimerId = 0;

    function doSearch ( )
    {
      clearTimeout ( alertTimerId );
      document.getElementById('album').style.color = '#FF0000';
      alertTimerId = setTimeout ( 'DoShowResult()', 500 );
    }

    function DoShowResult ( )
    {
      document.getElementById('album').style.color = '#000000';
      clearTimeout ( alertTimerId );
      showResult(document.getElementById('album').value);
    }
  </script>

  <tr>
    <td class=\"tableb\">
      <form method=\"get\" action=\"thumbnails.php\">
        <input type=\"text\" id=\"album\" name=\"alb_title\" class=\"textinput\" size=\"50\" onkeyup=\"doSearch()\" />
        <input type=\"hidden\" name=\"album\" value=\"search_alb\" />
        <input type=\"submit\" name=\"Submit\" value=\"Suchen\" class=\"button\" />
        <div align=\"left\" id=\"livesearch\" style=\"position:absolute;background-color: #ffffff;\" />
      </form>
    </td>
  </tr>
"
;
div_end();

div_start("Bildersuche");
echo 
"</table><form method=\"get\" action=\"thumbnails.php\"><input type=\"hidden\" name=\"album\" value=\"search_pic\" />";

starttable("100%""Kriterien",2);
//$disabled = isfriend() ? "" : "disabled=\"disabled\"";
echo "
  <!--
  <tr>
    <td class=\"tableb\" width=\"200\">
      Alles <br />
    </td>
    <td class=\"tableb\">
      <input type=\"radio\" name=\"all\" value=\"on\" onclick=\" 
        document.getElementById('cat_on').click();
        document.getElementById('alb_on').click();
        document.getElementById('file_on').click();
        document.getElementById('com_on').click();
        document.getElementById('pers_on').click();
      \" /> Anzeigen
      <input type=\"radio\" name=\"all\" value=\"off\" onclick=\" 
        document.getElementById('cat_off').click();
        document.getElementById('alb_off').click();
        document.getElementById('file_off').click();
        document.getElementById('com_off').click();
        document.getElementById('pers_off').click();
      \" /> Nicht anzeigen
    </td>
  </tr>
  -->

  <tr>
    <td class=\"tableb\" width=\"200\">
      <b>Kategorie</b> -> Monat / Jahr <br />
    </td>
    <td class=\"tableb\">
      <input type=\"radio\" name=\"cat\" id=\"cat_on\" value=\"on\" onclick=\"document.getElementById('Kategorie').style.display = 'block'; document.getElementById('cat_month').focus();\" /> Anzeigen
      <input type=\"radio\" name=\"cat\" id=\"cat_off\" value=\"off\" onclick=\"document.getElementById('Kategorie').style.display = 'none';\" checked=\"checked\" /> Nicht anzeigen
    </td>
  </tr>

  <tr>
    <td class=\"tableb\" width=\"200\">
      <b>Album</b> -> Titel / Beschreibung
    </td>
    <td class=\"tableb\">
      <input type=\"radio\" name=\"alb\" id=\"alb_on\" value=\"on\" onclick=\"document.getElementById('Album').style.display = 'block'; document.getElementById('alb_title').focus();\" /> Anzeigen
      <input type=\"radio\" name=\"alb\" id=\"alb_off\" value=\"off\" onclick=\"document.getElementById('Album').style.display = 'none';\" checked=\"checked\" /> Nicht anzeigen
    </td>
  </tr>

  <tr>
    <td class=\"tableb\" width=\"200\">
      <b>Datei</b> -> Name / Endung
    </td>
    <td class=\"tableb\">
      <input type=\"radio\" name=\"file\" id=\"file_on\" value=\"on\" onclick=\"document.getElementById('Datei').style.display = 'block'; document.getElementById('file_name').focus();\" /> Anzeigen
      <input type=\"radio\" name=\"file\" id=\"file_off\" value=\"off\" onclick=\"document.getElementById('Datei').style.display = 'none';\" checked=\"checked\" /> Nicht anzeigen
    </td>
  </tr>

  <tr>
    <td class=\"tableb\" width=\"200\">
      <b>Kommentar</b> -> Autor / Text
    </td>
    <td class=\"tableb\">
      <input type=\"radio\" name=\"com\" id=\"com_on\" value=\"on\" onclick=\"document.getElementById('Kommentar').style.display = 'block'; document.getElementById('com_aut').focus();\" /> Anzeigen
      <input type=\"radio\" name=\"com\" id=\"com_off\" value=\"off\" onclick=\"document.getElementById('Kommentar').style.display = 'none';\" checked=\"checked\" /> Nicht anzeigen
    </td>
  </tr>

  <tr>
    <td class=\"tableb\" width=\"200\">
      <b>Person</b> -> Name
    </td>
    <td class=\"tableb\">
      <input type=\"radio\" name=\"pers\" id=\"pers_on\" value=\"on\" 
$disabled onclick=\"document.getElementById('Person').style.display = 'block'; document.getElementById('pers_name').focus();\" /> Anzeigen
      <input type=\"radio\" name=\"pers\" id=\"pers_off\" value=\"off\" onclick=\"document.getElementById('Person').style.display = 'none';\" checked=\"checked\" /> Nicht anzeigen
    </td>
  </tr>
"
;
endtable();

div_start("Kategorie");
$first_year mysql_result(cpg_db_query("SELECT MIN(name) FROM {$CONFIG['TABLE_CATEGORIES']}"),0);
$years "";
for (
$i=$first_year$i<=date("Y"); $i++)
  
$years .= "<option>$i</option>";
echo 
"
  <tr>
    <td class=\"tableb\" width=\"200\">
      Monat:
    </td>
    <td class=\"tableb\">
      <select id=\"cat_month\" name=\"cat_month\" class=\"button\" size=\"1\" style=\"width:300px;\">
        <option selected=\"selected\"></option>
        <option>Januar</option>
        <option>Februar</option>
        <option>M&auml;rz</option>
        <option>April</option>
        <option>Mai</option>
        <option>Juni</option>
        <option>Juli</option>
        <option>August</option>
        <option>September</option>
        <option>Oktober</option>
        <option>November</option>
        <option>Dezember</option>
      </select><br />
    </td>
  </tr>

  <tr>
    <td class=\"tableb\" width=\"200\">
      Jahr:
    </td>
    <td class=\"tableb\">
      <select name=\"cat_year\" class=\"button\" size=\"1\" style=\"width:300px;\">
        <option selected=\"selected\"></option> 
$years
      </selected>
    </td>
  </tr>
"
;
div_end();

div_start("Album");
echo 
"
  <tr>
    <td class=\"tableb\" width=\"200\">
      Titel:
    </td>
    <td class=\"tableb\">
      <input type=\"input\" id=\"alb_title\" name=\"alb_title\" class=\"textinput\" style=\"width:300px;\" />
    </td>
  </tr>

  <tr>
    <td class=\"tableb\" width=\"200\">
      Beschreibung:
    </td>
    <td class=\"tableb\">
      <input type=\"input\" name=\"alb_desc\" class=\"textinput\" style=\"width:300px;\" />
    </td>
  </tr>
"
;
div_end();

div_start("Datei");
echo 
"
  <tr>
    <td class=\"tableb\" width=\"200\">
      Name:
    </td>
    <td class=\"tableb\">
      <input type=\"input\" id=\"file_name\" name=\"file_name\" class=\"textinput\" style=\"width:300px;\" />
    </td>
  </tr>

  <tr>
    <td class=\"tableb\" width=\"200\">
      Endung:
    </td>
    <td class=\"tableb\">
      <input type=\"input\" name=\"file_ext\" class=\"textinput\" style=\"width:300px;\" /> (z.B. \"flv\" f&uuml;r alle Videos)
    </td>
  </tr>
"
;
div_end();

div_start("Kommentar");
echo 
"
  <tr>
    <td class=\"tableb\" width=\"200\">
      Autor:
    </td>
    <td class=\"tableb\">
      <input type=\"input\" id=\"com_aut\" name=\"com_aut\" class=\"textinput\" style=\"width:300px;\" />
    </td>
  </tr>

  <tr>
    <td class=\"tableb\" width=\"200\">
      Text:
    </td>
    <td class=\"tableb\">
      <input type=\"input\" name=\"com_text\" class=\"textinput\" style=\"width:300px;\" />
    </td>
  </tr>
"
;
div_end();

//if (isfriend())
//{
  
div_start("Person");
  echo 
"
    <tr>
      <td class=\"tableb\" width=\"200\">
        Name:
      </td>
      <td class=\"tableb\">
        <input type=\"input\" id=\"pers_name\" name=\"pers_name\" id=\"pers_name\" class=\"textinput\" style=\"width:300px;\" />
      </td>
    </tr>
  "
;
  
$result cpg_db_query("SELECT note FROM {$CONFIG['TABLE_PREFIX']}notes GROUP BY note ORDER BY note ASC");
  if (
mysql_num_rows($result))
  {
    echo 
"<tr><td class=\"tableb\" colspan=\"2\">";
    while (
$row mysql_fetch_array($resultMYSQL_NUM))
      echo 
"<span class=\"button\" style=\"cursor: pointer;\" onclick=\"document.getElementById('pers_name').value += ' '+'{$row[0]}'+' ';document.getElementById('search').focus();return false;\">&nbsp;{$row[0]}&nbsp;</span> ";
    echo 
"</td></tr>" ;
    echo 
"<tr><td class=\"tableb\" colspan=\"2\" align=\"center\">";
    echo 
"Obenstehende Liste enth&auml;lt alle bisher verlinkten Personen und k&ouml;nnen per Klick zur Suche hinzugef&uuml;gt werden.";
    echo 
"</td></tr>";
  }
  
div_end();
//}

starttable("100%""<input type=\"submit\" value=\"Suchen\" class=\"button\" />");
endtable();
echo 
"</form></div>";

pagefooter();

?>

FYI:
1. The field "Person" is for the annotations. I modified the plugin a little bit. In my gallery you mark persons that are on the picture, that's why it's called "Person".
2. The function isfriend() checks, if someone has the rights to access the person search (= search for annotations). I have disabled the check in this example, because it's only relevant in my gallery.
3. I have an AJAX script for pre searching the albums. If you get an error or something at the album search, the needed files are missing.


Here is the code for the meta albums. It has to copied into include/functions.inc.php:
Code: [Select]
        case 'search_pic': // Search pictures
                if ($META_ALBUM_SET && $CURRENT_CAT_NAME) {
                        $album_name = "Suchergebnisse - $CURRENT_CAT_NAME";
                } else {
                        $album_name = "Suchergebnisse";
                }

                $META_ALBUM_SET = str_replace("AND aid NOT IN","AND a.aid NOT IN",$META_ALBUM_SET);

                $get_array = array("file", "file_name", "file_ext", "com", "com_aut", "com_text", "alb", "alb_title", "alb_desc", "pers", "pers_name", "cat", "cat_month", "cat_year");
                foreach($get_array as $key)
                {
                  $_GET[$key] = isset($_GET[$key]) ? trim(preg_replace("[\s+]"," ",$_GET[$key])) : $_COOKIE[$key];
                  setcookie($key, $_GET[$key]);
                }

                $columns = "";
                $tables = "{$CONFIG['TABLE_PICTURES']} p INNER JOIN {$CONFIG['TABLE_ALBUMS']} a ON p.aid = a.aid";
                $where = "";
                $suffix = "";
                $order = "p.pid";

                if ($_GET['file'] == "on")
                {
                  $where .= "AND (";
                  if ($_GET['file_name'] != "")
                  {
                    $file_name_parts = explode(" ", $_GET['file_name']);
                    foreach ($file_name_parts as $value)
                      $where .= "p.filename LIKE '%$value%' AND ";
                  }
                  if (trim($_GET['file_ext']) != "")
                    $where .= "p.filename LIKE '%.".trim($_GET['file_ext'])."' AND ";
                  $where .= "1) ";
                }

                if ($_GET['com'] == "on")
                {
                  $tables .= " INNER JOIN {$CONFIG['TABLE_COMMENTS']} c ON c.pid = p.pid";
                  $where .= "AND (";
                  $order = "c.msg_id";
                  if ($_GET['com_text'] != "")
                  {
                    $com_text_parts = explode(" ", $_GET['com_text']);
                    foreach ($com_text_parts as $value)
                      $where .= "c.msg_body LIKE '%$value%' AND ";
                  }
                  if ($_GET['com_aut'] != "")
                    $where .= "c.msg_author LIKE '%{$_GET['com_aut']}%' AND ";
                  $where .= "1) ";
                }

                if ($_GET['alb'] == "on")
                {
                  $where .= "AND (";
                  if ($_GET['alb_title'] != "")
                  {
                    $alb_title_parts = explode(" ", $_GET['alb_title']);
                    foreach ($alb_title_parts as $value)
                      $where .= "a.title LIKE '%$value%' AND ";
                  }
                  if ($_GET['alb_desc'] != "")
                  {
                    $alb_desc_parts = explode(" ", $_GET['alb_desc']);
                    foreach ($alb_desc_parts as $value)
                      $where .= "a.description LIKE '%$value%' AND ";
                  }
                  $where .= "1) ";
                }

                if ($_GET['pers'] == "on")
                {
                  if ($_GET['pers_name'] != "")
                  {
                    $columns .= ", COUNT(DISTINCT note) AS anzahl";
                    $tables .= " INNER JOIN {$CONFIG['TABLE_PREFIX']}notes n ON p.pid = n.pid";
                    $where .= "AND (";
                    $pers_name_parts = explode(" ", $_GET['pers_name']);
                    $pcount = count($pers_name_parts);
                    for ($i=0;$i<$pcount-1;$i++)
                      $where .= "n.note = '{$pers_name_parts[$i]}' OR ";
                    $where .= "n.note = '{$pers_name_parts[$i]}' AND ";
                    $where .= "1) ";
                    $suffix = "GROUP BY p.pid HAVING anzahl = $pcount";
                  }
                }

                if ($_GET['cat'] == "on")
                {
                  $tables .= " INNER JOIN {$CONFIG['TABLE_CATEGORIES']} cm ON cm.cid = a.category";
                  $where .= "AND (";
                  if ($_GET['cat_month'] != "")
                    $where .= "cm.name LIKE '{$_GET['cat_month']}' AND ";
                  if ($_GET['cat_year'] != "")
                  {
                    $tables .= " INNER JOIN {$CONFIG['TABLE_CATEGORIES']} cy ON cm.parent = cy.cid";
                    $where .= "cy.name LIKE '{$_GET['cat_year']}' AND ";
                  }
                  $where .= "1) ";
                }

                $query = "SELECT DISTINCT(p.pid) $columns FROM $tables WHERE approved = 'YES' $where $META_ALBUM_SET $suffix";
                $result = cpg_db_query($query);
                $count = mysql_num_rows($result);
                mysql_free_result($result);

                $select_columns = 'DISTINCT p.*, a.title';
                $query = "SELECT $select_columns $columns FROM $tables WHERE approved = 'YES' $where $META_ALBUM_SET $suffix ORDER BY $order DESC $limit";
                $result = cpg_db_query($query);

                $rowset = array();
                while($row = mysql_fetch_array($result)){
                        $rowset[-$row['pid']] = $row;
                }
                mysql_free_result($result);

                if ($set_caption) build_caption($rowset);

                $rowset = CPGPluginAPI::filter('thumb_caption_search_pic',$rowset);

                return $rowset;
                break;

        case 'search_alb': // Search albums
                if ($META_ALBUM_SET && $CURRENT_CAT_NAME) {
                        $album_name = "Suchergebnisse - $CURRENT_CAT_NAME";
                } else {
                        $album_name = "Suchergebnisse";
                }

                if (isset($_GET['alb_title']))
                  $alb_title = trim(preg_replace("[\s+]"," ",$_GET['alb_title']));
                else
                  $alb_title = $_COOKIE['alb_title'];

                setcookie('alb_title', $alb_title);

                $where = "";
                $alb_title_parts = explode(" ", $alb_title);
                foreach ($alb_title_parts as $key => $value)
                  $where .= "{$CONFIG['TABLE_ALBUMS']}.title LIKE '%$value%' AND ";

                $META_ALBUM_SET = str_replace("aid", $CONFIG['TABLE_PICTURES'].".aid", $META_ALBUM_SET);

                $query = "SELECT count({$CONFIG['TABLE_ALBUMS']}.aid) FROM {$CONFIG['TABLE_PICTURES']},{$CONFIG['TABLE_ALBUMS']} WHERE $where {$CONFIG['TABLE_PICTURES']}.aid = {$CONFIG['TABLE_ALBUMS']}.aid AND approved = 'YES' $META_ALBUM_SET GROUP BY {$CONFIG['TABLE_PICTURES']}.aid";

                $result = cpg_db_query($query);
                $count = mysql_num_rows($result);
                mysql_free_result($result);

                //$query = "SELECT *,{$CONFIG['TABLE_ALBUMS']}.title AS title,{$CONFIG['TABLE_ALBUMS']}.aid AS aid FROM {$CONFIG['TABLE_PICTURES']},{$CONFIG['TABLE_ALBUMS']} WHERE {$CONFIG['TABLE_PICTURES']}.aid = {$CONFIG['TABLE_ALBUMS']}.aid AND approved = 'YES' $META_ALBUM_SET GROUP BY {$CONFIG['TABLE_PICTURES']}.aid ORDER BY {$CONFIG['TABLE_PICTURES']}.ctime DESC $limit";
                //display album thumbnail // by muu
                $query = "SELECT *,{$CONFIG['TABLE_ALBUMS']}.title AS title,{$CONFIG['TABLE_ALBUMS']}.aid AS aid FROM {$CONFIG['TABLE_PICTURES']},{$CONFIG['TABLE_ALBUMS']} WHERE $where {$CONFIG['TABLE_PICTURES']}.aid = {$CONFIG['TABLE_ALBUMS']}.aid AND approved = 'YES' AND {$CONFIG['TABLE_PICTURES']}.pid = {$CONFIG['TABLE_ALBUMS']}.thumb $META_ALBUM_SET ORDER BY {$CONFIG['TABLE_PICTURES']}.ctime DESC $limit"; // by muu
                $result = cpg_db_query($query);
                $rowset = cpg_db_fetch_rowset($result);
                mysql_free_result($result);

                if ($set_caption) build_caption($rowset,array('ctime'));

                $rowset = CPGPluginAPI::filter('thumb_caption_lastalb',$rowset);

                return $rowset;
                break;

For HTML titles you have to add the 2 meta albums in your language file ($lang_meta_album_names[])


I suppose that's all you have to know :D

I'm asking about it
Title: Re: Flikr style image annotations
Post by: Αndré on January 10, 2009, 02:32:24 pm
Please give a link to your annotations search form.
Title: Re: Flikr style image annotations
Post by: ff on January 16, 2009, 09:23:11 pm
I tried installing this plugin and got this message.

"There was an error while processing a database query"

Something I can try?
Title: Re: Flikr style image annotations
Post by: Nibbler on January 16, 2009, 09:32:11 pm
Enable debug mode in config, try again, post error message if it doesn't mean anything to you.
Title: Re: Flikr style image annotations
Post by: ff on January 16, 2009, 10:03:29 pm
The error message is:
Quote
While executing query "   
CREATE TABLE IF NOT EXISTS `cpg_notes` (
  `nid` smallint(5) unsigned NOT NULL auto_increment,
  `pid` mediumint(8) unsigned NOT NULL,
  `posx` smallint(5) unsigned NOT NULL,
  `posy` smallint(5) unsigned NOT NULL,
  `width` smallint(5) unsigned NOT NULL,
  `height` smallint(5) unsigned NOT NULL,
  `note` text NOT NULL,
  `user_id` smallint(5) unsigned NOT NULL,
  PRIMARY KEY  (`nid`),
  KEY `pid` (`pid`)
) TYPE=MyISAM ;
" on 0

mySQL error: You have an error in your SQL syntax near ';
' at line 13
File: /var/virtual/fotoalbum/include/functions.inc.php - Line: 250


TYPE=MyISAM is the error?
Title: Re: Flikr style image annotations
Post by: Nibbler on January 16, 2009, 11:00:26 pm
Shouldn't be. Try creating the table manually using phpMyAdmin if you know how.
Title: Re: Flikr style image annotations
Post by: ff on January 17, 2009, 10:29:02 pm
Shouldn't be. Try creating the table manually using phpMyAdmin if you know how.

I pasted the same 'query' into de SQL-tab and it worked perfectly.
I don't get why the script couldn't insert the table.
Removed the part from codebase.php and the installation worked also.

Nice plugin ;)

Title: Re: Flikr style image annotations
Post by: evildeepblue on January 19, 2009, 07:40:12 am
It's really cool !!  :P

Has any language translate idea ?  ;D
Title: Re: Flikr style image annotations
Post by: ff on February 09, 2009, 01:41:33 pm
Hi,

Posted this question at (http://forum.coppermine-gallery.net/index.php/topic,53290.280.html) EnlargeIt!, but am not sure where to ask this.

Annotations did work perfectly but with EnlargeIt! I can't see them.
Admin has EnlargeIt! disabled, and Annotations work great (if you put them as last plugin in the list).

Is it possible to have both plugins to work next to eachother (or with eachother)?
If yes, is this something a plugin novice like me can do, or is it very difficult?

ps. In which thread do you have to ask this kind of questions?
In the thread of the latest added plugin or the first added one?
Title: Re: Flikr style image annotations
Post by: Fabricio Ferrero on February 09, 2009, 03:44:43 pm
ps. In which thread do you have to ask this kind of questions?
In the thread of the latest added plugin or the first added one?
None of them, I would suggest creating a new one (for the next time..) in plugins board, that's the pourpouse of it ;) : http://forum.coppermine-gallery.net/index.php/board,53.0.html (http://forum.coppermine-gallery.net/index.php/board,53.0.html)
Title: Re: Flikr style image annotations
Post by: ff on February 09, 2009, 03:55:43 pm
None of them, I would suggest creating a new one (for the next time..) in plugins board, that's the pourpouse of it ;) : http://forum.coppermine-gallery.net/index.php/board,53.0.html (http://forum.coppermine-gallery.net/index.php/board,53.0.html)

Whoops...sorry

Feel free to move the two questions and remove them from the wrong threads (or can I remove them myself?)
Title: Re: Flikr style image annotations
Post by: Αndré on February 09, 2009, 06:14:18 pm
Feel free to move the two questions and remove them from the wrong threads (or can I remove them myself?)
You can't move & merge them yourself. This can only be done by a moderator of that board.

Is it possible to have both plugins to work next to eachother (or with eachother)?
You have to integrate and adapt the html output from the annotations plugin into the enlargeit plugin.

You'll find the necessary code in the function annotate_file_data:
Code: (annotate/codebase.php) [Select]
function annotate_file_data($CURRENT_PIC_DATA){

[..]

    return $CURRENT_PIC_DATA;
}

If yes, is this something a plugin novice like me can do, or is it very difficult?
Some basic php and html skills should be enough. I can't say exactly what you have to change, because I'm not familiar with the enlargeit plugin code.
Title: Re: Flikr style image annotations
Post by: ff on February 09, 2009, 06:31:44 pm

You have to integrate and adapt the html output from the annotations plugin into the enlargeit plugin.

You'll find the necessary code in the function annotate_file_data:
Code: (annotate/codebase.php) [Select]
function annotate_file_data($CURRENT_PIC_DATA){

[..]

    return $CURRENT_PIC_DATA;
}
Some basic php and html skills should be enough. I can't say exactly what you have to change, because I'm not familiar with the enlargeit plugin code.

Pfff me neither :D

I couldn't even get the caption underneath the image :/

I'll just fiddle around.

Thank you.
Title: Re: Flikr style image annotations
Post by: bb3 on March 26, 2009, 02:01:22 am
awesome, thanks!
one question: Is it possible to put the button down to where the others are located (crop and rotate..)?

same question here.

http://gallery.redlens.org

username: test
pword: user
Title: Re: Flikr style image annotations
Post by: Joachim Müller on March 26, 2009, 07:58:53 am
Works for me, see http://gallery.redlens.org/displayimage.php?album=random&cat=16&pos=-723
Title: Re: Flikr style image annotations
Post by: bb3 on March 26, 2009, 10:48:09 am
Works for me, see http://gallery.redlens.org/displayimage.php?album=random&cat=16&pos=-723

hi joachim,

sorry but i was asking if it is possible to change the location of the "annotate" button. I want it to place beside the "edit", "Crop"
If it is possible, how can i make it.

thanks
Title: Re: Flikr style image annotations
Post by: Αndré on March 26, 2009, 11:18:34 am
i was asking if it is possible to change the location of the "annotate" button. I want it to place beside the "edit", "Crop"
Use the attached codebase.php file.
Title: Re: Flikr style image annotations
Post by: bb3 on March 26, 2009, 01:48:34 pm
Use the attached codebase.php file.

oh great!!

thank you sir for the big help
Title: Re: Flikr style image annotations
Post by: pftq on June 08, 2009, 04:09:18 pm
I moved the button towards the top of the image (outside the borders) - you can also style it as well using #annotate.

Also, it now shows who pute the note: "Comment... - Author"

Minor fix - users also cannot drag all the other notes now when they've deleted one of their own notes (the dragresize was left on true after delete).

Sample: http://www.pftq.com/gallery/displayimage.php?pos=-3044

I can't figure out how to make it work with bridges though (like with SMF).  I've added the code for SMF but it's rather rough - the user has to go into the codebase file and toggle bridging on or off with the boolean variable, as well as set the databases again.  If possible, it'd be nice to just tie it into the coppermine's actual bridge code.


**updated - fixed the single quotes being decoded correctly.  Not sure if that was my doing but just redownload if it's an issue.
Also fixed the flickering when your mouse hovers over boxes you can edit.  It only flickers during the actual editing after you've clicked on the box now.
Title: Re: Flikr style image annotations
Post by: pftq on June 09, 2009, 06:54:31 am
Also managed to add timestamps to the annotations so they can be viewed back like comments (last annotations) - such as:
http://www.pftq.com/gallery/thumbnails.php?album=lastanno

But that was done via direct modding of the theme and function files.  Not quite sure how it'd be done for a plugin though.
Title: Re: Flikr style image annotations
Post by: Αndré on June 09, 2009, 08:01:18 am
Also managed to add timestamps to the annotations so they can be viewed back like comments (last annotations) - such as:
http://www.pftq.com/gallery/thumbnails.php?album=lastanno

But that was done via direct modding of the theme and function files.  Not quite sure how it'd be done for a plugin though.
It's not possible in cpg1.4.x. In the next major release cpg1.5.x will be a plugin hook to add custom meta albums.


PS: I made similar modifications (and some more) to get a dynamical drop down list of person names which my users can add to the pictures, created the meta albums as well and created a search for the anntotations (in my case: to search for persons on pictures).
Because this is a very specialized version of this plugin, I want to create a new plugin since a while. Maybe I'll create one for cpg1.5.x if it's possible to integrate all features without file modifications.
Title: Re: Flikr style image annotations
Post by: pftq on June 10, 2009, 04:12:14 am
Ah ok.  Well here's a version of the plugin with timestamp anyways.  Also included a few fixes:

- Cancel button actually deletes the note when first creating a new one. (original code has .nid=0 instead of .id=0).
- Removes tooltip so it doesn't overlap with the notes.


You won't be able to see the date but at least it's saved.  If you want to have the meta-albums, you'd have to mod the files though.

Note, if you already have a previous version installed - you'll have to add the column 'ctime' (int) to your mysql table. (usually cpg_notes or whatever prefix your gallery has)
Title: Re: Flikr style image annotations
Post by: CFR on June 20, 2009, 11:24:25 pm
Cool plugin but when is instaled another plugin is disabled: LightBox Slideshow Plugin http://forum.coppermine-gallery.net/index.php/topic,59013.msg290739.html#msg290739 (http://forum.coppermine-gallery.net/index.php/topic,59013.msg290739.html#msg290739).
Maybe someone know solution :)


THX
Title: Re: Flikr style image annotations
Post by: boomsai on July 22, 2009, 09:55:19 pm
Hello
Concratulations! A super script! Very easy to install in coppermine!
I am searching for a script who can members: mark himself on every picture, also when they not uploaded by themselves with a link to the member profile.
Unfortunatly i do not have the know how to modified the script.
I recognize some other people are interested in.
Who can help me?
Thanx and greets
marcel
Title: Re: Flikr style image annotations
Post by: Αndré on July 22, 2009, 10:04:18 pm
I am searching for a script who can members: mark himself on every picture, also when they not uploaded by themselves with a link to the member profile.
Shall your members can only mark themselves? If yes, it's easy to modify the script to store the user id inestead of an individual note. I'm not sure if it's possible to display the link, but it should be easy to display the link above/below the image.
Title: Re: Flikr style image annotations
Post by: boomsai on July 22, 2009, 11:00:03 pm
Shall your members can only mark themselves? If yes, it's easy to modify the script to store the user id inestead of an individual note. I'm not sure if it's possible to display the link, but it should be easy to display the link above/below the image.

Thanx a lot for your help!
Yes only the registered user should have the right to set his username on the picture his on it.
You mean this is easy?

 
Title: Re: Flikr style image annotations
Post by: Αndré on July 23, 2009, 08:13:30 am
In lib/photonotes.js, delete
Code: [Select]
editArea.appendChild(editAreaText);

In codebase.php, find
Code: [Select]
$sql = "SELECT * FROM {$CONFIG['TABLE_PREFIX']}notes WHERE pid = {$CURRENT_PIC_DATA['pid']}";and replace with
Code: [Select]
$sql = "SELECT *, u.user_name AS note FROM {$CONFIG['TABLE_PREFIX']}notes n INNER JOIN {$CONFIG['TABLE_USERS']} u ON n.user_id = u.user_id WHERE n.pid = {$CURRENT_PIC_DATA['pid']}";

In codebase.php, find
Code: [Select]
$html = '<div class="Photo fn-container" id="PhotoContainer">' . $html . '</div>';and replace with
Code: [Select]
       $html = '<div class="Photo fn-container" id="PhotoContainer">' . $html . '</div>';

        $sql = "SELECT u.user_name, u.user_id FROM {$CONFIG['TABLE_PREFIX']}notes n INNER JOIN {$CONFIG['TABLE_USERS']} u ON n.user_id = u.user_id WHERE n.pid = {$CURRENT_PIC_DATA['pid']}  ORDER BY posx, posy";
        $result = cpg_db_query($sql);
        $profile_links = "";
        while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
            $profile_links .= "<a href=\"profile.php?uid={$row['user_id']}\">{$row['user_name']}</a> ";
        }
        if ($profile_links != "") {
     $html .= "
         <div style=\"clear: both; padding-top: 10px;\">
                    $profile_links
         </div>
            ";
        }
Title: Re: Flikr style image annotations
Post by: bitcloud on July 31, 2009, 05:20:00 pm
Cheers for this plugin mate,

All's well except for 2 things:
I can't seem to drag the square all the way to the right side, or the lower side of the image (it stops about 20px or so from the right or the bottom sides)
Is this a known issue? The $html part contains only the image code, so it's not that... is there anywhere I can manually adjust this to beat it into submission? :)

The other thing is more of a request. I wanted to add searching to the main search. Thanks for the custom search, but I really want to integrate it with the main search so "annotations" is maybe another entry, and the results simply come up inline with the others... Anyone have any clues on how I might do this? (SQL joins or something?)

Cheers
BC
Title: Re: Flikr style image annotations
Post by: Αndré on August 03, 2009, 05:50:48 pm
I can't seem to drag the square all the way to the right side, or the lower side of the image (it stops about 20px or so from the right or the bottom sides)

In lib/photonotes.js, find
Code: [Select]
                this.maxRight = currentNote.container.element.offsetWidth - 30;
                this.maxBottom = currentNote.container.element.offsetHeight - 19;
and replace with
Code: [Select]
                this.maxRight = currentNote.container.element.offsetWidth - 2;
                this.maxBottom = currentNote.container.element.offsetHeight - 2;
Title: Re: Flikr style image annotations
Post by: bitcloud on August 04, 2009, 05:14:37 am
cheers for the help,

unfortunately, that value doesn't seem to affect the outcome (even if I set it outrageously high, or as a positive integer, i have the same result...)
is there somewhere else i could be looking?

is there some CSS perhaps?
Title: Re: Flikr style image annotations
Post by: Αndré on August 04, 2009, 10:40:14 am
The change does exactly what you asked for. Maybe you have to clean your browser cache.
Title: Re: Flikr style image annotations
Post by: asas on August 04, 2009, 04:56:13 pm
In lib/photonotes.js, delete
Code: [Select]
editArea.appendChild(editAreaText);

In codebase.php, find
Code: [Select]
$sql = "SELECT * FROM {$CONFIG['TABLE_PREFIX']}notes WHERE pid = {$CURRENT_PIC_DATA['pid']}";and replace with
Code: [Select]
$sql = "SELECT *, u.user_name AS note FROM {$CONFIG['TABLE_PREFIX']}notes n INNER JOIN {$CONFIG['TABLE_USERS']} u ON n.user_id = u.user_id WHERE n.pid = {$CURRENT_PIC_DATA['pid']}";

In codebase.php, find
Code: [Select]
$html = '<div class="Photo fn-container" id="PhotoContainer">' . $html . '</div>';and replace with
Code: [Select]
       $html = '<div class="Photo fn-container" id="PhotoContainer">' . $html . '</div>';

        $sql = "SELECT u.user_name, u.user_id FROM {$CONFIG['TABLE_PREFIX']}notes n INNER JOIN {$CONFIG['TABLE_USERS']} u ON n.user_id = u.user_id WHERE n.pid = {$CURRENT_PIC_DATA['pid']}  ORDER BY posx, posy";
        $result = cpg_db_query($sql);
        $profile_links = "";
        while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
            $profile_links .= "<a href=\"profile.php?uid={$row['user_id']}\">{$row['user_name']}</a> ";
        }
        if ($profile_links != "") {
     $html .= "
         <div style=\"clear: both; padding-top: 10px;\">
                    $profile_links
         </div>
            ";
        }


Just curious what this is supposed to do? I applied it and nothing happens. Is it supposed to link the person being tagged to their profile? and as a note, my gallery is bridged to SMF.

Thanks a lot
Title: Re: Flikr style image annotations
Post by: Αndré on August 04, 2009, 05:47:49 pm
Just curious what this is supposed to do? I applied it and nothing happens. Is it supposed to link the person being tagged to their profile? and as a note, my gallery is bridged to SMF.
That are the code changes for this request (http://forum.coppermine-gallery.net/index.php/topic,41715.msg300998.html#msg300998).

I haven't tested it in a bridged gallery. I think it doesn't work for you because of this query:
Quote
SELECT *, u.user_name AS note FROM {$CONFIG['TABLE_PREFIX']}notes n INNER JOIN {$CONFIG['TABLE_USERS']} u ON n.user_id = u.user_id WHERE n.pid = {$CURRENT_PIC_DATA['pid']}
Title: Re: Flikr style image annotations
Post by: asas on August 04, 2009, 06:07:21 pm
That are the code changes for this request (http://forum.coppermine-gallery.net/index.php/topic,41715.msg300998.html#msg300998).

I haven't tested it in a bridged gallery. I think it doesn't work for you because of this query:

Perfect, thanks a lot.

So I replace the bolded parts with the right table names and prefixes (SMF bridge), do you think it will work? or is there more to it? I know you haven't tested it, but I just want to see what you think.

Thanks a lot,
Title: Re: Flikr style image annotations
Post by: Αndré on August 04, 2009, 06:13:58 pm
So I replace the bolded parts with the right table names and prefixes (SMF bridge)
Make sure the plugin works without my modifications. If it does, you just have to change the mentioned SQL query.
Title: Re: Flikr style image annotations
Post by: sjthespian on August 04, 2009, 07:58:15 pm
Make sure the plugin works without my modifications. If it does, you just have to change the mentioned SQL query.

I was able to get it working with Joomla with the following changes:
Change the first select statement to read:
Code: [Select]
                $sql = "SELECT *, u.name AS note FROM {$CONFIG['TABLE_PREFIX']}notes n INNER JOIN jos_users u ON n.user_id = u.id WHERE n.pid = {$CURRENT_PIC_DATA['pid']}";

And I also had to add "$row['params'] = ''; before the line $notes[] = $row, as I had some newline separated data in the annoations that was causing errors in the javascript.

The second SELECT statment should then read:
Code: [Select]
                $sql = "SELECT u.name AS user_name, u.id AS user_id FROM {$CONFIG['TABLE_PREFIX']}notes n INNER JOIN jos_users u ON n.user_id = u.id WHERE n.pid = {$CURRENT_PIC_DATA['pid']}  ORDER BY posx, posy";
The above will tag the image with the user's real name, use "u.username" in both SELECT statements if you prefer having the username.

The next thing I want to do if I can figure out a decent way to do it is to provide a list of users instead of a free-form text box, so people aren't restricted to just tagging themselves in pictures.
Title: Re: Flikr style image annotations
Post by: bitcloud on August 05, 2009, 02:44:50 am
Cheers eenemeenemuu... still getting that problem though.

 I'll put it online in the next few days and give you a look...
Title: Re: Flikr style image annotations
Post by: heartsy on September 03, 2009, 08:22:44 am
Is there a way to make the yellow box (the area you selected for mouseover) to not show up? I want it there when you edit or add your annotations, so you can see to drag it to appropiate size, but after that I would like it to disappear. Like photo tags on myspace or facebook, when you mouseover the area selected, just the little info note pops up, without the yellow frame around your selected area.
Title: Re: Flikr style image annotations
Post by: Αndré on September 03, 2009, 08:27:05 am
Like photo tags on myspace or facebook, when you mouseover the area selected, just the little info note pops up, without the yellow frame around your selected area.
Please attach a screenshot, as I don't know how it looks in myspace/facebook.
Title: Re: Flikr style image annotations
Post by: heartsy on September 03, 2009, 09:00:12 am
Sure... on the attached photo you can see my mouse is on the image.. and you see the little note with the person's name on it.. but you don't see the selected area's frame.
Title: Re: Flikr style image annotations
Post by: heartsy on September 03, 2009, 09:03:00 am
actually I guess you can't see my mouse..or cursor rather.. but it was on there, not sure why it didn't show up in the printscreen.
Title: Re: Flikr style image annotations
Post by: Αndré on September 03, 2009, 09:36:15 am
It's not as trivial as I thought. When I disable the box you cannot add new notes. You have to try some changes in photonotes.js. Have a look at the functions hide(all)note(texts), show(all)note(texts), createelements.
Title: Re: Flikr style image annotations
Post by: heartsy on September 03, 2009, 06:57:11 pm
ok I'll try that.. cuz yeah when I made that first .fn-area transparent... the resize square disappeared to. Apparently it was still there kind of, I had the cursor show the things to resize, but no actual corners or squares so you could see where to drag and resize. Kept the edit box no problem, I mean you could still add your tag, and that was visible, just made it almost impossible to select the area you wanted.
Title: Re: Flikr style image annotations
Post by: heartsy on September 03, 2009, 07:29:25 pm
I found it... in the photonotes.js file just as you said... there's a part that says...

Code: [Select]
PhotoNote.prototype.ShowNoteText = function()
{
    if(!this.container.editing)
    {
        this.container.HideAllNoteTexts();
        this.container.DisableAllNotes();
        this.EnableNote();

        this.gui.ElementRect.style.border='0px solid #D4D82D'; // <---this line originally had 1px for border.
        this.gui.ElementRect.style.margin='0';
        this.gui.ElementNote.style.display='block';

that change removed the yellow box all together.. and you still have the lil square corners to drag and move as you wish to select your area, just no line connecting them. If that makes any sense.

Just figured I'd post my findings in case someone else wanted to remove the selection border.

[Edit GauGau] Added bbcode tag "code" to the posting to make it better readable and easier for others to copy and paste. Please use bbcode where applicable [/Edit]
Title: Re: Flikr style image annotations
Post by: Djtale on December 09, 2009, 02:44:29 pm
Hello.

instead of writing a note, is it possible to show a dropdown list (for example, a list of members) and select what we want as a note in this list ?

Thank you.
Title: Re: Flikr style image annotations
Post by: Αndré on December 09, 2009, 03:20:29 pm
That's of course possible and will be in the cpg1.5.x version of this plugin. But it's easy to code this yourself. Just display a select instead of the button.
Title: Re: Flikr style image annotations
Post by: Djtale on December 09, 2009, 03:51:25 pm
That's of course possible and will be in the cpg1.5.x version of this plugin. But it's easy to code this yourself. Just display a select instead of the button.

Hi andré.
I see that you've already doen a similar modification. Do I have to edit the css or the php file to replace the rectangle in which i write the note by a select box ?
Title: Re: Flikr style image annotations
Post by: Αndré on December 09, 2009, 06:38:02 pm
My modification creates a select box that passes the selected value to the edit box. If you want to have that select box next to the note, you have to edit the photonotes.js file.
Title: Re: Flikr style image annotations
Post by: Djtale on December 09, 2009, 07:58:20 pm
Thank you André.

I've added a select box near the Annotate button and modified the addNote method to get the value of the select box.
Title: Re: Flikr style image annotations
Post by: makk on January 26, 2010, 10:53:19 pm
This is one of the nicest plugins I have seen for Coppermine actually!

I had an issue about it though, since I also use plugin "LightBox"! I have already written about this in the thread for that one (LightBox Slideshow Plugin) and got an answer from Mr Müller that these to interfere with eachother (very sadly). The annotations plugin works as intended, but the Light-Box plugin get effected, sadly!

Quote
Link to my post in that thread and Mr Müllers reply just beneth
http://forum.coppermine-gallery.net/index.php/topic,59013.msg315168.html#msg315168 (http://forum.coppermine-gallery.net/index.php/topic,59013.msg315168.html#msg315168)

As I understand by Mr Müller a fix for this (if even possible) wasn't an easy one, but I thought I also would mention this in this thread, since I don't know which plugin would be the one to actually make compatible with the other one (if even possible)!

I am sorry if this counts as "double posting" or similar since its the same issue. I just thought it would be good to actually mention it in the actual plugin threads that was effected!

Thanks for listening and keeping my fingers crossed for a possible solution to be able to use both LightBox + annotate (on intermediate pics) at the same time in the future!