Gallery 2 Area Tagging (like facebook)

netbear

Joined: 2007-09-12
Posts: 19
Posted: Tue, 2008-04-08 11:04

Hi

I have developed a module to support tagging of areas like persons or objects in your gallery2 images and thought I should share it with the world. It is written for a quite specific purpose, to tag persons with name and class/year to allow a migration to gallery2 from an old gallery with this function. Right now it's just tested with a modified version of the matrix theme. Se README file for more information. I'm quite new to the gallery2 api so there are probably quite some improvements that can be made. So far there are no administration pages.

The module can be fetched with svn, you need to copy the directory trunk to your gallery2 module directory and rename it to "imagetags"

$ svn co http://svn.netbear.se/imagetags/

And a trac site.
http://trac.netbear.se/trac.cgi/imagetags/

A small demo site
http://netbear.se/imagetags_demo/

Hope someone finds this useful.
/Björn Samvik

 
valiant

Joined: 2003-01-04
Posts: 32509
Posted: Tue, 2008-04-08 14:08

That's pretty cool!
And with some adjustments this can be made more general than tags for persons only. :)

Suggestion: To make this module available to a wider audience you could offer a .zip download.

 
netbear

Joined: 2007-09-12
Posts: 19
Posted: Tue, 2008-04-08 16:36

As requested http://files.netbear.se/imagetags-1.1.1-dev.zip

Make sure to read the README file. There are a few things that need to be done for this module to work.

 
chasix

Joined: 2005-10-06
Posts: 41
Posted: Tue, 2008-04-08 20:57

Very impressive.

I did have trouble loading the specific image page with the imagetags in Internet Explorer 7. The main gallery page and the thumbnails loaded fine.

I then tried Windows Safari and the page with the imagetags loaded fine and worked fine. The error I received in IE7 was:
Internet Explorer can not open the internet site http://netbear.se/imagetags_demo/main.php?g2_itemId=21
Operation aborted.

However what I experienced in Safari was awesome. Thanks for sharing. Keep up the great work on this module.

 
netbear

Joined: 2007-09-12
Posts: 19
Posted: Wed, 2008-04-09 09:52

I haven't had the opportunity to test it in IE doesn't have a Windows computer
around but it sounds like a javascript bug in IE (like always). I will look in
to it. I have tested it successfully in Firefox 2 and 3 and in Konqueror 3.5.

Thanks for the feedback.
/Björn

Edit: I have found the problem. The demosite is updated with a quick fix. Will write a better fix tonight. The svn does not have this fix yet.

 
tsfftf

Joined: 2007-02-02
Posts: 73
Posted: Wed, 2008-04-09 11:29

pld... how can this mod be changed so that you can tag objects/people with user names instead of adding titles into the extra db tables?

 
netbear

Joined: 2007-09-12
Posts: 19
Posted: Wed, 2008-04-09 12:08

That's certainly a nice feature, and not that hard to implement. I have added it to my todo list. Basically what's needed is a flag (in the ImageTagItemMap table) to remember if it's a user id or tag id that is stored in the database or possibly another table, to completely separate the data.

 
tsfftf

Joined: 2007-02-02
Posts: 73
Posted: Wed, 2008-04-09 12:25

ok... i've just got this module running... a few comments to add. one is quite important, the others less so.

1. the tags don't seem to be lining up on my photos like they do on your demo site - i don't know whats causing this but i can see it seems to work great on the demo.

2. in the readme, perhaps tell people to rename the folder to imagetags (without version number in, or reupload it without that) as gallery gives an error on the plugins page.

3. if you only leave a tag name without the year, it puts a space after the name... perhaps alter the code to put a space before the year instead?

great progress though, thanks for this mate... keep up the development if you've got the time... ultimate would be to have this integrated into the Tags-proper module which gallery has.

p.s. custom tags i.e not usernames, would still be good to have though.

fantastic!

 
tsfftf

Joined: 2007-02-02
Posts: 73
Posted: Wed, 2008-04-09 12:26

forgot to add this to point 1:

its the descriptor that pops up in the wrong place... the actual tag area seems to be correct, just the box doesn't overlay in the right place! hopefully that info should help!

 
netbear

Joined: 2007-09-12
Posts: 19
Posted: Wed, 2008-04-09 12:31

What browser and version are you using?

 
tsfftf

Joined: 2007-02-02
Posts: 73
Posted: Wed, 2008-04-09 12:33

firefox 3 beta 5:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9b5) Gecko/2008032620 Firefox/3.0b5

 
netbear

Joined: 2007-09-12
Posts: 19
Posted: Wed, 2008-04-09 15:31

tsfftf: I can't reproduce your error, what other modules do you use? Are you using the svn version?

The IE bug should be gone now.

 
tsfftf

Joined: 2007-02-02
Posts: 73
Posted: Wed, 2008-04-09 21:09

hmmm...

extra mods are: notification, email upload, tags (word tags), statistics, flashvideo (cant remember if thats extra or not)

i'm not running the most recent version of gallery2. here is my system info:

Gallery version = 2.2.3 core 1.2.0.5
PHP version = 5.2.5 apache2handler
Webserver = Apache/2.2.6 (Unix) DAV/2 mod_ssl/2.2.6 OpenSSL/0.9.8e PHP/5.2.5 mod_apreq2-20051231/2.5.7 mod_perl/2.0.2 Perl/v5.8.7
Database = mysqli 5.0.51, lock.system=flock
Toolkits = ArchiveUpload, Dcraw, Exif, Ffmpeg, Getid3, LinkItemToolkit, NetPBM, Thumbnail, Gd
Acceleration = none, none
Operating system = Linux Knoppix 2.6.19 #7 SMP PREEMPT Sun Dec 17 22:01:07 CET 2006 i686
Default theme = modifiedmatrix
gettext = enabled
Locale = en_US
Browser = Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11
Rows in GalleryAccessMap table = 38
Rows in GalleryAccessSubscriberMap table = 2531
Rows in GalleryUser table = 49
Rows in GalleryItem table = 2496
Rows in GalleryAlbumItem table = 101
Rows in GalleryCacheMap table = 0

 
tsfftf

Joined: 2007-02-02
Posts: 73
Posted: Wed, 2008-04-09 21:15

i've just tried this in my internet explorer too... interesting, the descriptor box shows up in a slightly different place (although i didn't encounter the javascript error like another user in this thread) but when I added another tag through IE7, it appeared in a different place again. I will try reverting to the standard matrix template... maybe this is just a css issue as the actual tagged area seems to be correct in all these case (the bit you hover over)?

 
tsfftf

Joined: 2007-02-02
Posts: 73
Posted: Wed, 2008-04-09 21:28

Update: i've been running gallery embedded into a drupal installation. the descriptor loads up in the right position in the standalone gallery

i have a modified garland theme.

i suspect this is a css issue, although i don't know what yet.

any ideas?

 
tsfftf

Joined: 2007-02-02
Posts: 73
Posted: Wed, 2008-04-09 22:15

added zip containing two files with changes on them.

one is the "Top 100" page, nothing will work on that, but perhaps you can see my suggestions.

and the other is the template block. the only thing i changed there was a cancel spelling mistake "cancle" to "cancel", and "Persons:" to "In this photo:"

only small changes but hopefully constructive.

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Thu, 2008-04-10 01:59

I have created the START of a codex page:
http://codex.gallery2.org/Gallery2:Modules:imagetags
Users please feel free to contribute back to the project and update as necessary, so that the developer can concentrate on what he does best and is not distracted by documentation.

netbear, thanks for the contribution and wish continues success.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
netbear

Joined: 2007-09-12
Posts: 19
Posted: Thu, 2008-04-10 11:10

floridave: Thanks.

tsfftf: I don't know if I understand all your suggestions in Top100, please add them to the Feature Request section at http://codex.gallery2.org/Gallery2:Modules:imagetags with a description.

Did you solve the drupal/gallery2 bug. I suspect that it could be a naming conflict. I will add a suffix of some sort to all id's in this module to minimize the risk.

 
tsfftf

Joined: 2007-02-02
Posts: 73
Posted: Thu, 2008-04-10 16:58

yeh... not exactly dead clear were they. i'll get on that wiki thing.

nah not spent much time on it, but at least we know what it is... worth fixing like you say with a suffix as the drupal/gallery2 combo is popular. i'll take a look with webdev ff toolbar later

 
tsfftf

Joined: 2007-02-02
Posts: 73
Posted: Thu, 2008-04-10 17:22

i get this with the element info from the web developer toolbar:

div #img_frame

Attributes

onmouseout = hideFrame()

style = border: 2px solid black; visibility: visible; position: absolute; top: 310px; left: 263px; width: 217px; height: 199px;

id = img_frame

Position
Left: 421px Top: 419px
Width: 217px Height: 199px

Other
Font Family: Times New Roman,Arial,Helvetica,sans-serif
Font Size: 16px

Ancestors

html .js

body .sidebars

div #wrapper

div #container .clear-block

div #center

div #squeeze

div .right-corner

div .left-corner

div #gallery .gecko

table

tbody

tr

td

div #gsContent

Children

div #msg_frame

 
phinze

Joined: 2008-03-30
Posts: 40
Posted: Tue, 2008-04-15 19:57

Hello netbear, tsfftf, floridave, and all.

I'm a fouth year Computer Science student applying to work for gallery through the Google Summer of Code Program. My application, which was submitted the day before netbear released the imagetags module, is entitled "Facebook / Flickr Style Image Region Based Tagging" (PDF link to full application).

As you can imagine, I was quite surprised when one day after I submitted my application, a module was released with many of the features I was proposing!

I would still very much like to work for Gallery through Summer of Code this summer, and so this afternoon I am revising my application to take into account the existence of this new module. I believe that this summer I can do many things to improve upon this idea:

  • I can integrate the features offered by the imagetags module with the existing tags module
  • Other Gallery community members have been discussing this for awhile and have come up with many well thought-out ideas that have been collected on a Codex page called imagenotes. I can work to select which of the features they mention would be valuable for Gallery and implement those that are.
  • I see that this thread has involved some initial debugging of the module. Working full time this summer will give me time to ensure that all code is compliant with Gallery's coding standards, solidly tested across many browsers, and degrades gracefully on older browsers.

So, as I said in the other thread where discussion of an image tagging feature was occurring: would you all be interested in having a full time developer improving upon your work this summer? :)

I will be updating my official application this afternoon, and I'd appreciate any feedback you'd have for me.

 
chasix

Joined: 2005-10-06
Posts: 41
Posted: Wed, 2008-04-16 06:29
Quote:
The ability to tag objects in pictures, and especially people, is a powerful tool for making the photos as they are stored in Gallery a richer experience.

I just read over your proposal and I wish you luck. The proposal was very well written and I hope it is implemented.

 
tsfftf

Joined: 2007-02-02
Posts: 73
Posted: Wed, 2008-04-16 14:10

phinze: unlucky from GSOC point of view but i'm glad some code is out and there's plenty more that can be done to improve on it...

my 2cents is:

1. make it work so you can tag either tag users from a drop down or do a custom name like this does
2. the Top 100 page in the current module should be changed to make it look more like facebook (pictures you have tagged, pictures others tagged of you)
3. ability to select pictures with you and someone else (mutual pictures)
4... finally work with the tags proper module.

don't know about anyone else who is interested in this module but they are at the top of my 'wishlist' for this mod.

 
netbear

Joined: 2007-09-12
Posts: 19
Posted: Wed, 2008-04-16 17:20

phinze: Grate, as I wrote somewhere here I implemented this module quite quick to be able to migrate an old home developed gallery which had this function. So I had not the time to fully understand all aspects of gallery2 and since I have a lot of other projects ongoing mostly school related I have not that much time to spend on this project so some help is definitely appreciated.

All: I have written some code to support "user tagging" and a start for an admin page not committed to svn yet thou I haven't had the time to complete the implementation.

 
enderandrew

Joined: 2006-06-01
Posts: 42
Posted: Thu, 2008-04-17 03:58

I just tried the demo in Firefox 3 and I can't click and drag within a picture at all. Firefox assumes I want to drag the whole picture somewhere.

 
tsfftf

Joined: 2007-02-02
Posts: 73
Posted: Thu, 2008-04-17 09:19

enderandrew: javascript turned on? failing that maybe check you have removed the <a> tags </a> or commented them out correctly. use the braces {* at the start AND end *} of the <a> lines as numbered in the readme. i found that /* wouldn't work */

 
netbear

Joined: 2007-09-12
Posts: 19
Posted: Thu, 2008-04-17 11:00

Theres a Tag mode button under the image. You must click that one first.

If it doesn't work check the README ones more. I have no problem in Firefox 3.

 
enderandrew

Joined: 2006-06-01
Posts: 42
Posted: Thu, 2008-04-17 13:58

I was using the demo site, and yes I have javascript turned on. I didn't see the button for tag mode however.

 
enderandrew

Joined: 2006-06-01
Posts: 42
Posted: Thu, 2008-04-17 14:06

Sure enough, that was it. It seems to work now. I'm just an idiot.

I did notice however that "cancel" was spelled misspelled.

 
tsfftf

Joined: 2007-02-02
Posts: 73
Posted: Thu, 2008-04-17 16:32

worth asking before anything else i suppose. spelled misspelled, nice.

 
chasix

Joined: 2005-10-06
Posts: 41
Posted: Mon, 2008-04-21 00:48

I am having some issues with getting the module to work properly. It is probably my photo.tpl file and the way I made the required changes to the specific lines (62,68,69,82). Perhaps someone can post the specific lines (copy and paste) of the photo.tpl file to show what it should look like with this module activated.
Thanks for any help on this matter.

 
enderandrew

Joined: 2006-06-01
Posts: 42
Posted: Mon, 2008-04-21 01:17

From the readme, it seems that you must delete the a href tags around the img src tags.

Depending on what theme you use, those changes will be at different places. Also the readme states:

"Discovered that if you doesn't have the imageframe module enabled you need to add id="IFid1" to the image tag in the photo.tpl file (line 79). This could probably be avoided with some changes to the javascritps."

Do you have the imageframe module loaded and activated?

 
kiffw

Joined: 2008-04-21
Posts: 10
Posted: Mon, 2008-04-21 15:03

The Demo looks very nice and works fine!

But i get this error on my installation:

tagging.js (line 130) wrote:
el("area") has no properties
el('area').style.visibility = 'visible';

Has anyone an idea?

 
enderandrew

Joined: 2006-06-01
Posts: 42
Posted: Mon, 2008-04-21 17:39

Will this work with the other tags module? I'd like to be able to add tags within an image, and have them work in the tag cloud.

 
phinze

Joined: 2008-03-30
Posts: 40
Posted: Mon, 2008-04-21 20:23
enderandrew wrote:
Will this work with the other tags module? I'd like to be able to add tags within an image, and have them work in the tag cloud.

My Google Summer of Code 2008 project has just been accepted!

One of my goals is integration with the existing tags module. I will be documenting my development over the summer in one form or another, and I'll post links to this thread once I have them.

 
chasix

Joined: 2005-10-06
Posts: 41
Posted: Mon, 2008-04-21 22:47
Quote:
My Google Summer of Code 2008 project has just been accepted!

Congrats on the assignment. http://code.google.com/soc/2008/gallery/appinfo.html?csaid=7CEB07E23144C994 I am very happy that you were picked.

I see there is a 2nd person working on a Gallery2 project as well. http://code.google.com/soc/2008/gallery/appinfo.html?csaid=2199A61E5D682A74

 
kiffw

Joined: 2008-04-21
Posts: 10
Posted: Tue, 2008-04-22 07:30
kiffw wrote:
The Demo looks very nice and works fine!

But i get this error on my installation:

tagging.js (line 130) wrote:
el("area") has no properties
el('area').style.visibility = 'visible';

Has anyone an idea?

No interest to bugfix this script? Is it still in development or already "on ice"?

 
netbear

Joined: 2007-09-12
Posts: 19
Posted: Tue, 2008-04-22 10:30

kiffw: Sorry for the delay, have quite a lot in school right now, are you using the latest svn version? The provided .zip file contains old code and due to a "bug" in IE it doesn't work. It's the latest svn version that is used in the demo site.

 
kiffw

Joined: 2008-04-21
Posts: 10
Posted: Tue, 2008-04-29 10:21
netbear wrote:
kiffw: Sorry for the delay, have quite a lot in school right now, are you using the latest svn version? The provided .zip file contains old code and due to a "bug" in IE it doesn't work. It's the latest svn version that is used in the demo site.

Yes I do... got revision 25 but tried the others too. Here ist the Link to my gallery if needed. It's in german language - could this be the problem? ^^

 
netbear

Joined: 2007-09-12
Posts: 19
Posted: Tue, 2008-04-22 15:23

kiffw: I have tested you site both in firefox 3.0 and IE 6.0 and it works very well. No problem at all. I now that I had some problem with IE when I upgraded, the solution was to make sure the cache was cleared a reload is not enough. If it still not works I need to know what version of IE you are using.

 
kiffw

Joined: 2008-04-21
Posts: 10
Posted: Tue, 2008-04-22 17:12

netbear: I've tried it with IE7 and Firefox 2.0.0.14! I cleaned the cache and restarted my browser and it worked. but after I added some albums the problem came back :( can you try it again now - maybe in another album?

 
netbear

Joined: 2007-09-12
Posts: 19
Posted: Tue, 2008-04-22 20:45

kiffw: Strange, it works in one album but not in the others. Are you sure you are using the same theme in all albums? Any non-standard modules loaded that can affect some albums but not all?

 
kiffw

Joined: 2008-04-21
Posts: 10
Posted: Wed, 2008-04-23 07:28

netbear: No there's the same configuration/theme for all albums. I deactivated all unoffical plugins but with no success. Also the page sourcecode seem to be identical (merged with winmerge ^^)... Did you ever have more than one album in your testpage?

Unfortunatly there's an second little (display) problem with the tag popup (see attachment).

 
kiffw

Joined: 2008-04-21
Posts: 10
Posted: Mon, 2008-04-28 11:13

something new about the problem?

 
netbear

Joined: 2007-09-12
Posts: 19
Posted: Mon, 2008-04-28 17:00

Hi, I'm running the code in the svn in a gallery2 installation with over
40000 images and no I haven't counted the albums but more than one for sure
, it works perfectly.

It seems like the javascripts are not loaded in some of the albums. I have been trying
to reproduce your error but with no luck.

Can you try to install a fresh copy of gallery2 and get this module to work before you
do anything else? And the do one thing at a time until it breaks. It could be some
naming conflict somewhere.

"Unfortunatly there's an second little (display) problem with the tag popup (see attachment)."
Whats wrong looks correct to me except the spelling error as a few people have pointed
out already.

Sorry if it takes some time between my responses.

/Björn

 
kiffw

Joined: 2008-04-21
Posts: 10
Posted: Tue, 2008-04-29 09:11
netbear wrote:
Can you try to install a fresh copy of gallery2 and get this module to work before you
do anything else? And the do one thing at a time until it breaks. It could be some
naming conflict somewhere.

Ok I will try this...
EDIT: yeah - I got it => I deleted the albums and recreate them and now it works! Seem to be a problem with albums created with a older version of gallery2...

EDIT2: is it normal that I can't tag if I'm logged in as user (correct rights are given)? It works just on guest mode.

netbear wrote:
"Unfortunatly there's an second little (display) problem with the tag popup (see attachment)."
Whats wrong looks correct to me except the spelling error as a few people have pointed
out already.

Oh you're right - I deactivated the field "Add a year/class field for custom tags" ;) sorry.

 
netbear

Joined: 2007-09-12
Posts: 19
Posted: Tue, 2008-04-29 11:14

Strange, will have to figure out why it's not working on older albums.

No it's not normal if the correct permissions is set.There are two types
of permissions one for tagging and one for editing. Make sure the right
groups have those set correctly for the albums in question.

There may be a problem here if you have upgraded the module from a previous
version I haven't figured out exactly how gallery2 performs upgrades.

/Björn

 
kiffw

Joined: 2008-04-21
Posts: 10
Posted: Tue, 2008-04-29 13:02

Wait I found something new: The recreated albums had one feature deactivated for guests: Add Comments! If I enable it the problem occurs again. It seems to be incompatible with the Comment-Plugin...

EDIT:
Admin/Users already have the permission to add comments - so it's explained why it don't works after login.

Quote:
el('area').style.visibility = 'visible';

Maybe there's a conflict with the textarea used by the Comment-Plugin?

 
kiffw

Joined: 2008-04-21
Posts: 10
Posted: Mon, 2008-05-05 14:29

can anyone confirm this problem?

 
tsfftf

Joined: 2007-02-02
Posts: 73
Posted: Tue, 2008-05-06 11:51

don't allow guest commenting on my site so sorry can't... looks as though this module is gonna be properly released after the summer of code project though... no development taking place on the svn site is there

 
netbear

Joined: 2007-09-12
Posts: 19
Posted: Thu, 2008-05-08 11:21

As I have said before right now I have other things on my mind sorry. If someone has the time to do some development I can create svn accounts for you, email me <p04bs AT student DOT lth DOT se>.

There may be some conflicts, try to postfix the ids with "imagetags_" or something like that search and replace will probably do the work quite fast.

/Björn