Flickr style image annotations for cpg1.5.x

[Αndré]

not as a registered user (only works on owned pictures)

Just tested. As regular user I can add annotations to pictures from other users (the admin in my case). If you don't want to post a link you're on your own.

[MISHA]

russian

[Makc666]

russian

Here is the full Russian translation of this plugin.
Based on MISHA.
A lot of changes by Makc666.

[Αndré]

Thanks for your contributions. Added Russian language file in r8034.

[pftq]

Upgrading from CPG 1.4.x

This might just be from my experience but I couldn't get the meta album working earlier as it was returning a critical error:

Code Select Expand

While executing query 'SELECT *, user_time AS msg_date
...

It turns out when upgrading from the cpg1.4.x version there was no user_time column so I had to add that manually to the database.  Just pointing this out incase other users have the same trouble.

On a side note, I added a preview of the annotation on the "Last annotations" page so it is similar to last comments.  It might be worthwhile to have this in the mod if you get a chance to implement it.  Example:
http://www.pftq.com/gallery/thumbnails.php?album=lastnotes

Some Suggested Fixes:
These were some changes I had implemented in my copy of the CPG 1.4.x version.
The below fixes the flickering boxes when the mouse moves over the picture.  Edit in lib/photonotes.js

Replace:

Code Select Expand

       this.container.DisableAllNotes();
       this.EnableNote();
with

Code Select Expand

       this.container.DisableAllNotes();
       //this.EnableNote(); **pftq // No need to flicker every hover

Replace:

Code Select Expand

    if(!this.container.editing && this.editable) /* nibbler */
    {
        this.ShowNoteText();
with

Code Select Expand

    if(!this.container.editing && this.editable) /* nibbler */
    {
        this.ShowNoteText();
       this.EnableNote(); /* pftq */ // Place here so only flicker when editing

Replace:

Code Select Expand

editable: true /* nibbler */  
with

Code Select Expand

       highlighted: false,  /* pftq */
       editable: true /* nibbler */  

Replace:

Code Select Expand

this.HideNoteText();
with

Code Select Expand

   this.HideNoteText();
   this.highlighted= false;  /* pftq */

Some other problems I've run into that I haven't been able to resolve:

When annotating, the buttons for "Save", "Cancel", etc all have "null" prepended so that they show up as "nullSave".

You can login as 'test' with password 'test' if you want to check on my gallery:
http://www.pftq.com/gallery/

I'm also unable to give regular members permission to annotate.  I think it might be due to the SMF bridge, and the solution posted by willy2010 on the last page seems to work, except I only added it for registered users as so:

Code Select Expand

if(USER_ID) return 2;

This might be related as well but I'm unable to view annotations from non-admin users (both admin and test account).  I'll update this thread if I figure out why that might be.  All user permissions are RWD, so I don't think that should be the issue.

[pftq]

Yay, I've fixed the notes not showing for non-Admins.  It was indeed a bridging problem.  

For the codebase.php, find:

Code Select Expand

$sql = "SELECT n.*, u.user_name FROM {$CONFIG['TABLE_PREFIX']}plugin_annotate n INNER JOIN {$CONFIG['TABLE_USERS']} u ON n.user_id = u.user_id WHERE n.pid = {$data['pid']}";
       $result = cpg_db_query($sql);

       $notes = array();

       while ($row = mysql_fetch_assoc($result)) {
           //$row['note'] = addslashes($row['note']);
           $notes[] = $row;
       }

and replace with

Code Select Expand

// pftq: Don't include the CPG user table; bridges don't use it
       $sql = "SELECT * FROM {$CONFIG['TABLE_PREFIX']}plugin_annotate WHERE pid = {$data['pid']}";
       $result = cpg_db_query($sql);

       $notes = array();

       while ($row = mysql_fetch_assoc($result)) {
           //$row['note'] = addslashes($row['note']);
           $row['user_name']=get_username($row['user_id']); // pftq: Let CPG find the username, works with bridges
           $notes[] = $row;
       }

Still have to figure out why I'm getting "nullSave", "nullDelete" etc though.

[pftq]

Fixed the "null..." issue.  I had menu icons disabled for my gallery via Config > Themes.

The plugin actually accounts for this but for whatever reason, there's a block of code outside the condition:

Code Select Expand

$annotate_icon_array['announcement'] = cpg_fetch_icon('announcement', 1);
$annotate_icon_array['configure'] = cpg_fetch_icon('config', 1);
$annotate_icon_array['update_database'] = cpg_fetch_icon('update_database', 1);
$annotate_icon_array['import'] = cpg_fetch_icon('download', 1);
$annotate_icon_array['manage'] = cpg_fetch_icon('edit', 1);
$annotate_icon_array['ok'] = cpg_fetch_icon('ok', 2);
$annotate_icon_array['cancel'] = cpg_fetch_icon('cancel', 2);
$annotate_icon_array['delete'] = cpg_fetch_icon('delete', 2);

This should be moved inside the brackets for

Code Select Expand

if ($CONFIG['enable_menu_icons'] == 2) {

and then copy this into the else clause

Code Select Expand

       $annotate_icon_array['announcement'] = '';
$annotate_icon_array['configure'] = '';
$annotate_icon_array['update_database'] = '';
$annotate_icon_array['import'] = '';
$annotate_icon_array['manage'] = '';
$annotate_icon_array['ok'] = '';
$annotate_icon_array['cancel'] = '';
$annotate_icon_array['delete'] = '';


I also managed to get the textbox to wrap beneath the annotations if there isn't enough room going out to the side.  Might be just me, but the annotations too close to the right tended to go off screen.  The changes below solve it.  You can see how it works here:
http://www.pftq.com/gallery/displayimage.php?pid=3044
(the annotation to the far right wraps down instead)

The code is a bit long though:

In lib/photonotes.js
Replace the last couple lines of 'PhotoNote.prototype.PositionNote = function()' with:

Code Select Expand

   // pftq: Wrap to bottom, not extend off-screen
    var noteX = this.rect.left + this.YOffset + this.rect.width;
    var noteY  = this.rect.top - 4;
    if(noteX+3*this.rect.width>this.maxRight) {

if(noteX+2*this.rect.width<this.maxRight) {
//this.gui.ElementNote.style.width=(this.rect.width*2-this.YOffset)+'px';
}

else if(noteX+this.rect.width-this.YOffset<this.maxRight&&
this.maxRight-noteX>30) {
//this.gui.ElementNote.style.width=this.maxRight-noteX-this.YOffset+'px';
}

else {
var noteWidth=this.rect.width*2;
if(noteWidth>this.maxRight/2)
noteWidth=this.rect.width;
if(noteWidth>this.maxRight/2) noteWidth=this.maxRight/2;
while(noteWidth<50) noteWidth=50;
noteX= this.rect.left + this.YOffset*2 + (this.rect.width-noteWidth)/2;
if(noteX+noteWidth>this.maxRight)
noteX = this.maxRight - noteWidth-this.YOffset;
if(noteX<0) noteX=0;
noteY  = this.rect.top + this.rect.height + this.YOffset/2;
//this.gui.ElementNote.style.width=noteWidth+'px';
}
}
   this.gui.ElementNote.style.left  = noteX + 'px';
   this.gui.ElementNote.style.top  = noteY + 'px';

Change 'function PhotoNote(text,id,rect,annotator_name,annotator_id)' to

Code Select Expand

function PhotoNote(text,id,rect,annotator_name,annotator_id, maxRight)

Add above 'editable: true /* nibbler */' :

Code Select Expand

maxRight:maxRight, /* pftq */

Then in codebase.php, just add an extra $container_width argument to the following function calls:

Code Select Expand

var note = new PhotoNote(annotations[n].note, 'note' + n,...

Code Select Expand

var newNote = new PhotoNote(note_text, 'note' + n, new PhotoNoteRe...

Eh - sorry for all the code. I didn't expect to change so much of it, but I hope someone finds it useful.

[hanzon2010]

Text not wrapping is a problem indeed for those with small screens, like on a laptop.  On my 21" or 19" monitor, no problem at all, lots of space for the annotation text to show even if it is at the rightmost of the picture.  It still is better if it can wrap within the image frame and not go past.  Good idea to fix this.

However, I checked your link, http://www.pftq.com/gallery/displayimage.php?pid=3044, and "Waste Ink Tubing" still does not wrap, and just goes past the frame of the image.  This is on my 21" monitor.  Since text is white and your background outside the image frame is also white, then one can't see the remaining text.  It is shown as "Waste Ink Tub".  Is this fix only for small screens ? 

[pftq]

Ah thanks for catching that.  It turns out to be a browser issue rather than the screen resolution.  On IE, it works fine but it seems like the text doesn't wrap in Firefox.

I'm trying things out to see why that might be, but I'm hoping someone who helped code the original plugin might know.

[pftq]

Haven't figured out why the text isn't wrapping for Firefox yet, but in the mean time I updated the code I posted above so that it doesn't change the width of the textbox (so the text doesn't protrude out of it).

It still at least moves the text to the bottom if the note is too close to the right side.

[pftq]

This is one more change to codebase.php that should be made:
Find

Code Select Expand

$data['menu'] = '<div class="buttonlist align_right"><ul>'.$menu_buttons.'</ul></div>';

Replace with:

Code Select Expand

$data['menu'] = '<div class="buttonlist align_right"><ul><li> </li>'.$menu_buttons.'</ul></div>';

Add "<!-- " under "<script type="text/javascript">".
Add "// -->" above "</script>".

Without the empty these changes, it becomes invalid HTML because of the javascript not being interpreted correctly by the W3C validator.

[cmfa]

Hi @ all

attached an error message in Internet Explorer. It will not see a caption.
Also I have is the problem that the label on the blue background also.
The above instructions I have tried to replicate without success.
Who can help me here? all changes were reversed!!

http://fotofreunde-rathenow.adtg.de/Teil5
VG
CMFA

Details zum Fehler auf der Webseite

Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Zeitstempel: Sun, 9 Jan 2011 17:30:34 UTC


Meldung: Das Objekt unterstützt diese Aktion nicht.
Zeile: 424
Zeichen: 5
Code: 0
URI: http://fotofreunde-rathenow.adtg.de/Teil5/plugins/annotate/lib/photonotes.js


Meldung: 'notes.notes.0' ist Null oder kein Objekt
Zeile: 385
Zeichen: 1
Code: 0
URI: http://fotofreunde-rathenow.adtg.de/Teil5/displayimage.php?album=35&pid=212


Meldung: 'notes.notes.0' ist Null oder kein Objekt
Zeile: 385
Zeichen: 1
Code: 0
URI: http://fotofreunde-rathenow.adtg.de/Teil5/displayimage.php?album=35&pid=212

[Αndré]

On a side note, I added a preview of the annotation on the "Last annotations" page so it is similar to last comments.

Please post the needed code changes.

flickering boxes when the mouse moves over the picture.

Please elaborate. I haven't recognized that behavior (I'm using Firefox).

notes not showing for non-Admins

Can you please try if the following fix works as well?
In codebase.php, find

Code Select Expand

       $sql = "SELECT n.*, u.user_name FROM {$CONFIG['TABLE_PREFIX']}plugin_annotate n INNER JOIN {$CONFIG['TABLE_USERS']} u ON n.user_id = u.user_id WHERE n.pid = {$data['pid']}";
       $result = cpg_db_query($sql);

       $notes = array();

       while ($row = mysql_fetch_assoc($result)) {
           //$row['note'] = addslashes($row['note']);
           $notes[] = $row;
       }
and replace with

Code Select Expand

       global $cpg_udb;
       $sql = "SELECT n.*, u.".$cpg_udb->field['username']." AS user_name FROM {$CONFIG['TABLE_PREFIX']}plugin_annotate n INNER JOIN ".$cpg_udb->usertable." u ON n.user_id = u.".$cpg_udb->field['user_id']." WHERE n.pid = {$data['pid']}";
       $result = cpg_db_query($sql);

       $notes = array();

       while ($row = mysql_fetch_assoc($result)) {
           //$row['note'] = addslashes($row['note']);
           $notes[] = $row;
       }
Please report if that works, too.

Fixed the "null..." issue.

I'll commit that fix soon.


Your changes regarding wrapping the text beneath the annotation and the invalid HTML I have to do some more testing.

[pftq]

Thanks Andre - I'm not at my home computer right now but will get back to you about those changes as soon as possible.

The flickering occurs in Internet Explorer (I know, everyone should use FF - but about half my visitors are not very tech-savy and just use IE).  It's mainly when your mouse moves across the white outline of the box (so as if pointing at the box outline is not pointing at the picture).

[pftq]

The fix for non-admin you posted works.  I'd like suggest the following which also includes date/time:

Code Select Expand

global $cpg_udb, $lang_date;
        $sql = "SELECT n.*, u.".$cpg_udb->field['username']." AS user_name FROM {$CONFIG['TABLE_PREFIX']}plugin_annotate n INNER JOIN ".$cpg_udb->usertable." u ON n.user_id = u.".$cpg_udb->field['user_id']." WHERE n.pid = {$data['pid']}";
        $result = cpg_db_query($sql);

        $notes = array();

        while ($row = mysql_fetch_assoc($result)) {
            //$row['note'] = addslashes($row['note']);
           
            $row['date']=localised_date($row['user_time'], $lang_date['lastup']); // pftq: Show date on note
            $notes[] = $row;
        }

You can then do this in the photonotes.js file:

Code Select Expand

function PhotoNote(text,id,rect,annotator_name,annotator_id, date_str, maxRight) /* pftq: added date and maxRight */
{
    var props = {
        text: text,
        id: id,
        rect: rect,
        annotator_name: annotator_name,
        annotator_id: annotator_id,
        selected: false,
        container: null,
        dragresize: null,
        oldRect: null,
        YOffset: 10,
        XOffset: 0,
        onsave: null,
        ondelete: null,
        gui: null,
        highlighted: false,  /* pftq */
        date_str:date_str, /* pftq */
        maxRight:maxRight, /* pftq */
        editable: true /* nibbler */             
       
    };

Under // add annotator name and link to profile, you can use date_str to format the comment time as I've done here:
http://www.pftq.com/gallery/displayimage.php?pid=3044


For the last viewed (annotations), I currently have it implemented as a mod to build_caption which is why I didn't post the code.  I can look into using a plugin hook when I get a chance though.


If you want, I can attach the current version of the plugin I have now to maybe save you some of the work.

[Αndré]

If you want, I can attach the current version of the plugin I have now to maybe save you some of the work.

Thanks, but I've already applied some changes to my local working copy and also committed something to the svn repository. So I'll do the other changes manually, too.

[haferlin]

Hi
I got a problem it doesnt work with joomla bridge yet    version cpg1.5   what  could I do?

[phill104]

You will unfortunately have to work that out for yourself. The bridge is from a third party and something we cannot support as we simply do not know it.

[Αndré]

it doesnt work with joomla bridge yet

If you say what exactly doesn't work, it may be possible to fix that without knowing the Joomla bridge.

[haferlin]

I figure  it is  request db` problem  because doesn't save annotation neither super administrator or administror

on version 1.4 cpg   worked perfect


*excuse me english