Announcement

  •  » Engine
  •  » Improving the "add tags to photo" form

#1 2009-07-28 01:16:51

plg
Piwigo Team
Nantes, France, Europe
2002-04-05
13541

Improving the "add tags to photo" form

Hello Piwigo Community,

Currently (Piwigo 2.0) we have an "old style" form to add/set tags on a photo. I mean we have a long list of checkboxes with existing tags. Tags have to be created on the Administration>Pictures>Tags screen.

http://piwigo.org/forum/showimage.php?pid=108424&filename=add_tags-piwigo20.png

I think we can do much better. Now that we've started to integrate jQuery widgets in Piwigo administration, I've searched for what could save us this time :-) I think I've found 2 interesting projects:

1. FCBKcomplete for presentation, the demo is here. Focus your attention on the "Second Control" input field. I find it just impressive. You can all manage with mouse and/or keyboard. You don't have to wonder about delimiter character.

http://piwigo.org/forum/showimage.php?pid=108424&filename=add_tags-fcbkcomplete.png

2. jQuery Tag Suggestion (inspired from Delicious), with a demo. I also find it nice, but I step behind FCBKcomplete.

http://piwigo.org/forum/showimage.php?pid=108424&filename=add_tags-jquery_tag_suggestion.png

What's your opinion about this? Do you have other suggestions to improve ergonomy on "add tags to photo" feature?

Offline

 

#2 2009-07-28 01:37:53

grum
Former Piwigo Team
Pantin
2007-09-10
1371

Re: Improving the "add tags to photo" form

Good idea, and visually I prefer the FCBKcomplete method :
- gives an easy method to delete a tag from the list
- the input is auto-resized, allowing to see the entire tag selection

But if it's possible to display the entire tag list without any filter (shift key, right-click, or other method) it will be a good thing too, because if I can see all the tags I can tell  "Hey, I didn't think about this one".


My pictures with Piwigo, of course !
[ www.grum.fr ]

Offline

 

#3 2009-07-28 07:46:26

VDigital
Former Piwigo Team
Paris (FR)
2005-05-04
17680

Re: Improving the "add tags to photo" form

grum wrote:

Good idea, and visually I prefer the FCBKcomplete method :
- gives an easy method to delete a tag from the list
- the input is auto-resized, allowing to see the entire tag selection

But if it's possible to display the entire tag list without any filter (shift key, right-click, or other method) it will be a good thing too, because if I can see all the tags I can tell  "Hey, I didn't think about this one".

the entire tag list without any filter (shift key, right-click...
+1

FCBKcomplete
:-?
"Focus your attention on the "Second Control" input field."
How many click you have to do to keep one tag?
:-/

jQuery
Enter your tags (Ajax based)
Combined with a "Checkboxes list hide/display" in jQuery we can do. Maybe?
+1


Piwigo.com: Start and run your own photo gallery. Signup and get 30 days to try for free, no commitment.
8-)

Offline

 

#4 2009-07-28 09:38:26

rvelices
Piwigo Team
2005-12-29
1960

Re: Improving the "add tags to photo" form

- UI : FCBK is nicer
- FCBK allows to work with tag ids in adition to captions (jQuery Tag Suggestion does not)
- FCBK allows new tag creation, the other not

--> I'm for FCBK.

Offline

 

#5 2009-07-28 09:39:36

rub
Piwigo Team
Lille
2005-08-26
5019

Re: Improving the "add tags to photo" form

grum wrote:

Good idea, and visually I prefer the FCBKcomplete method :

+1

Offline

 

#6 2009-07-29 00:39:12

plg
Piwigo Team
Nantes, France, Europe
2002-04-05
13541

Re: Improving the "add tags to photo" form

VDigital wrote:

FCBKcomplete
:-?
"Focus your attention on the "Second Control" input field."
How many click you have to do to keep one tag?
:-/

What do you mean?

If you mean "how to remove tag #2 and tag #3", the answer is : either you type backspace in the field, or you click on the cross in each tag you don't want.

Offline

 

#7 2009-07-29 01:27:13

mistic100
Former Piwigo Team
Lyon (FR)
2008-09-27
3277

Re: Improving the "add tags to photo" form

I think we can use a combinaison of the two systems
- FCBK to display the tags of a picture (or a group of pictures) and give the possibility to delete some
- jQuery Tag Suggestion to display existent tags when we want to assign one to a picture

Here is my vision of the tag system :
- during the upload we can assign some tags to all the pictures uploaded (using jQuery Tag Suggestion)
- for a picture we use FCBK and jQuery Tag Suggestion as described above
- for a group of pictures (in the Caddie or in a Category or the Recent Pictures section) we can add tags to all the pictures and the system also display all the tags assigned to this group (in grey for those who are not assigned to all the pictures, are you following me ? :p ) and delete some
- in the tag section we can clic onto a tag, adding all correspondents pictures in the caddie ; and delete a tag for all the pictures

(sorry for my bad syntax)

Offline

 

#8 2009-07-29 13:50:29

flop25
Piwigo Team
2006-07-06
7037

Re: Improving the "add tags to photo" form

rvelices wrote:

- UI : FCBK is nicer
- FCBK allows to work with tag ids in adition to captions (jQuery Tag Suggestion does not)
- FCBK allows new tag creation, the other not

--> I'm for FCBK.

+1

+ a list to show all tags


To get a better help : Politeness like Hello-A link-Your past actions precisely described
Check my extensions : more than 30 available
who I am and what I do : http://fr.gravatar.com/flop25
My gallery : an illustration of how to integrate Piwigo in your website

Offline

 

#9 2009-07-29 15:56:25

rvelices
Piwigo Team
2005-12-29
1960

Re: Improving the "add tags to photo" form

By looking more closely, it seems that none is ready to be used by us in an "optimized manner".
Unfortunately
- we cannot give FCBK directly a javascript object with all the available tags. I'm thinking to the caddie admin page in unit mode where we have N pictures and we have to pick from the same list
- we cannot tell FCBK not to create a new tag (by typing any text and pressing enter). I'm thinking at the search page on the public side
- I tried to play with it locally on an html page and some display bugs appeared when I changed the available tag list...

Offline

 

#10 2009-07-31 23:51:07

plg
Piwigo Team
Nantes, France, Europe
2002-04-05
13541

Re: Improving the "add tags to photo" form

rvelices wrote:

- we cannot give FCBK directly a javascript object with all the available tags. I'm thinking to the caddie admin page in unit mode where we have N pictures and we have to pick from the same list

Do you mean that we can't use a single js object many times in the same page? or do you mean we just can't have several fckb js object on the same page?

rvelices wrote:

- we cannot tell FCBK not to create a new tag (by typing any text and pressing enter). I'm thinking at the search page on the public side

That's a minor issue in my opinion (compared to the potential improvement)

rvelices wrote:

- I tried to play with it locally on an html page and some display bugs appeared when I changed the available tag list...

That's a problem. Can you give more details about the changes you made in the list? Did you add tags with accented characters?

Offline

 

#11 2009-08-04 18:22:22

Eric
Piwigo Team
VALENCE (FR)
2005-03-25
1768

Re: Improving the "add tags to photo" form

Hi all !

I'm for FCBK too. Much intuitive to use. But that's for search page. Could we use the same in administrator's tag management ?

Offline

 

#12 2009-08-04 20:34:04

grum
Former Piwigo Team
Pantin
2007-09-10
1371

Re: Improving the "add tags to photo" form

For me, the screenshot seems to be in the admin part (to affect properties to one picture)
If the tag system is modified, it have to be modified everywhere.


My pictures with Piwigo, of course !
[ www.grum.fr ]

Offline

 

#13 2010-02-22 23:47:12

plg
Piwigo Team
Nantes, France, Europe
2002-04-05
13541

Re: Improving the "add tags to photo" form

While searching for jQuery plugins, I've found this one : AutoSuggest by Drew Wilson

It works nice, even with 2 fields on the same page using the same tag list.
No problem with UTF-8.

I haven't checked yet for creating a new tag on the fly.

Offline

 

#14 2010-02-23 13:30:32

plg
Piwigo Team
Nantes, France, Europe
2002-04-05
13541

Re: Improving the "add tags to photo" form

I've tested the FCBK plugin (version 2.6.1) and I must say it's better than autoSuggest I tested yesterday.

1) I can add several new tags
2) I can click on the Tab keystroke and it goes to the next form field

Offline

 

#15 2010-02-23 14:05:32

plg
Piwigo Team
Nantes, France, Europe
2002-04-05
13541

Re: Improving the "add tags to photo" form

I've tested how WordPress 2.9.2 was managing the "add tags to your post", and I must say: that's impressive. Let's describe.

http://piwigo.org/forum/showimage.php?pid=112013&filename=wordpress_add_tags-step01.png

Here we start. Nothing yet. Let's enter "first tag":

http://piwigo.org/forum/showimage.php?pid=112013&filename=wordpress_add_tags-step02.png

Then I press Enter.

http://piwigo.org/forum/showimage.php?pid=112013&filename=wordpress_add_tags-step03.png

The "first tag" is added (but not saved) and the textfield is emptied. Then I enter "er" in the textfield.

http://piwigo.org/forum/showimage.php?pid=112013&filename=wordpress_add_tags-step04.png

WordPress suggests me a list of tags. With the down arrow on my keyboard, I choose "Erwann" and press Enter.

http://piwigo.org/forum/showimage.php?pid=112013&filename=wordpress_add_tags-step05.png

"Erwann" was added next to "first tag" (nothing saved for the moment). Then I decide to remove "first tag". I click on the (x) on the left of the tag name.

http://piwigo.org/forum/showimage.php?pid=112013&filename=wordpress_add_tags-step06.png

"first tag" was removed.

Then I click on the "Choose from the most used tags..."

http://piwigo.org/forum/showimage.php?pid=112013&filename=wordpress_add_tags-step07.png

and I click on "Loïc".

http://piwigo.org/forum/showimage.php?pid=112013&filename=wordpress_add_tags-step08.png

"Loïc" was added (nothing saved in the database yet).

Now, I decide to add several tags at once. I enter "other tag, another one"...

http://piwigo.org/forum/showimage.php?pid=112013&filename=wordpress_add_tags-step09.png

... and click on the "Add" button.

http://piwigo.org/forum/showimage.php?pid=112013&filename=wordpress_add_tags-step10.png

The 2 new tags were added.

To save, I have to click on the "Update post" button. If you forget to "Update", you lost your tags (additions are removals).

We have discussed with nicolas to compare with Dotclear behavior. In Dotclear there are several noticeable differences:

http://fr.piwigo.org/forum/showimage.php?pid=131989&filename=image_tags.png

1) each time you click on the "Ok" button, the tags are added and saved
2) when you click on a tag in the list of existing tags, it is added in the textfield, not in the "added tags" box (that means you have to perform another click to add the tag)
3) when you click on the (x) button, the tag is removed at database level (no need to "update" the post)
4) no suggest


I prefer WordPress but I think that it may be very confusing to lost your changes if you forget to click on the "Update" button. nicolas says that we can implement WordPress behavior + an obvious message below tags to say "Warning, your changes are not saved yet".

Offline

 
  •  » Engine
  •  » Improving the "add tags to photo" form

Board footer

Powered by FluxBB

github twitter newsletter Donate Piwigo.org © 2002-2022 · Contact