Categorizing/tagging content

[Pete]

Nothing is usually in a /config/ or /tools/ page (depending on what you want to call yours). Many of us create such a page to put tags and lots of other things under them that don't really need to appear in the site structure itself.

For example, in the Dev Directory on the PW site I put draft profiles under /config/drafts/ out of the way of the rest of the page tree until they have been approved, but you could also do similar with a list of countries, colours... whatever you may need to reference in a Page field that doesn't need to be in your navigation.

[adrianmak]

I have setup free tagging.

However the tag input behaviour different than most I used.

Now, I could input one by one, instead of a

single line separate with commas

[Peter Knight]

I have setup free tagging.

However the tag input behaviour different than most I used.

Now, I could input one by one, instead of a

single line separate with commas

Have a look at Field-Name > Input (Tab) > Input Field Type

There's a few options for handling tags. I found they're not brilliantly documented but worth a fiddle to see what they produce and how they handle text.

[renobird]

...as Peter mentioned, you can chose several options for the field type. I use checkboxes a lot myself.

[adrianmak]

I have tried all the options of  Input (Tab) > Input Field Type. They are not work as I desired. Most of them are provided a list box type.

[Jan Romero]

What Ryan described earlier in this thread sounds like exactly what you want? You get a text input where you can just write whatever (thus “free” tagging). That way you don’t need to create pages, but your tags are of course more prone to typos and you have to use urlSegments or GET parameters to show matching pages.

[renobird]

How would you like the tagging to work? You mentioned earlier a comma list. The issue there is that the user has no way of knowing if the tags already exist, or is spelled differently, etc... So you end up with a bunch of tags that are duplicates, or users simply not tagging things because they aren't presented with the available choices.

You could however create new pages (tags) based on a comma separated list and just have it skip duplicates.

In that case you would need to create a module that took the contents of your comma separated list and created new pages from them on page save. (You don't have to create pages from these, but it seems easier to me to have them for search filtering purposes).

I don't really see the benefit over using one of the already available options. Do you have dozens of tags for each post, or something that makes the current options inefficient?

[renobird]

What Jan posted above works, but in my opinion complete free tagging is a mess. You end up with a ton of tags that are similar. You also get over tagging or no tagging at all. We setup something like this a while ago, and eventually realized it wasn't a useful method. Just my 2 cents.

In the end there is no right way, and ProcessWire will let you build pretty much any solution you want.

[LostKobrakai]

I think adrian does expect tags to look like they do on every other site: 

Combined with autocomplete this wouldn't be that crazy messy, but still typos can be a thing. 

@adrian

You could still make such a thing by yourself. Grab a jquery / js thingy to generate these tabs, create a InputfieldPageTabs module and change up the markup / save process to fit your / the plugins needs. If your not sure how to do this, have a look at the core modules InputfieldPage and the extentions like InputfieldPageListSelect. With extending the base class, you don't have to cover everything the module does, you're just changing what you need to work different.

[kongondo]

This is basically an aesthetics issue? So instead of this listing of selected pages in your page field in page edit mode:

Tag 1

Tag 2

Tag 3

Tag 4

You want...

Tag1, Tag 2, Tag 3, Tag 4.....

Beaten by @LostKobrakai...again! That is exactly what I wanted to suggest...

Edit 2: Using jQuery Autocomplete (that is what is used in some page fields) multiple..., there is no need for typing complete tags by hand; They would be auto-suggested as illustrated here: http://jqueryui.com/autocomplete/#multiple and lined up horizontally...

Edited January 29, 2015 by kongondo

[adrianmak]

How would you like the tagging to work? You mentioned earlier a comma list. The issue there is that the user has no way of knowing if the tags already exist, or is spelled differently, etc... So you end up with a bunch of tags that are duplicates, or users simply not tagging things because they aren't presented with the available choices.

You could however create new pages (tags) based on a comma separated list and just have it skip duplicates.

In that case you would need to create a module that took the contents of your comma separated list and created new pages from them on page save. (You don't have to create pages from these, but it seems easier to me to have them for search filtering purposes).

I don't really see the benefit over using one of the already available options. Do you have dozens of tags for each post, or something that makes the current options inefficient?

my concern is, free tagging with comma separator ux are being used by all web application over the world, where ppl is already familar with

[adrianmak]

I think adrian does expect tags to look like they do on every other site: Screenshot 2015-01-29 09.15.01.png

Combined with autocomplete this wouldn't be that crazy messy, but still typos can be a thing. 

@adrian

You could still make such a thing by yourself. Grab a jquery / js thingy to generate these tabs, create a InputfieldPageTabs module and change up the markup / save process to fit your / the plugins needs. If your not sure how to do this, have a look at the core modules InputfieldPage and the extentions like InputfieldPageListSelect. With extending the base class, you don't have to cover everything the module does, you're just changing what you need to work different.

There is a jq plugin https://github.com/aehlke/tag-it

I'm thinking of how to write a module with this plugin.

ps I'm just learning the front-end development of pw. I have zero knowledge on pw's module development.

[adrianmak]

What Ryan described earlier in this thread sounds like exactly what you want? You get a text input where you can just write whatever (thus “free” tagging). That way you don’t need to create pages, but your tags are of course more prone to typos and you have to use urlSegments or GET parameters to show matching pages.

That's method inspired me

[LostKobrakai]

I just ended up using this: http://harvesthq.github.io/chosen/. It builds on the same inputfields as asmSelect does, so it was just a matter of switching the library. To use this in Pagefield you have to do one additional thing after installing to be able to use it for page fields. You need to add the module in the settings of the InputfieldPage module.

This does currently not allow pages to be created inline, but it works with the second textblock which is used by all the other page inputfields as well. Maybe I'll add inline adding later.

Edit:

The module can now be found here: https://processwire.com/talk/topic/8955-inputfieldchosenselect/

[adrianmak]

A sidetrack with the ux.

Since my local pw test site is configured as a mult-language, I found that those tags created by Page reference field will not make other languages active of tag.

[kongondo]

An alternative would be to base this on the current relevant pagefields, then float-left those asmSelect <li></li> coupled with some CSS styles and you are good to go...

[LostKobrakai]

Since my local pw test site is configured as a mult-language, I found that those tags created by Page reference field will not make other languages active of tag.

I think it would be best to open a github issue for this, as Ryan doesn't always get things here.

@kongondo

Yeah, but this way nobody had to think about autocomplete

[adrianmak]

I submitted multi-language issue on page reference field
https://github.com/ryancramerdesign/ProcessWire/issues/889

[kongondo]

@LostKobrakai,

Your implementation is very nice actually. I have just tried it but its not working for me. I am just seeing an unstyled multilple select field. I'll test further later to find out what's going on...

[adrian]

@LostKobrakai,

I like the look of your InputfieldChosenSelect field type - I can see that being very useful at times - thanks!

Just to throw in another option - Nico also has a fieldtype for tagging:

https://github.com/NicoKnoll/TextboxList

Similar interface to yours, but the tags are stored as a comma-separated list, rather than as pages in a page field.

[LostKobrakai]

Yeah found this as well. It looks very much the same, but it's a textfield, while mine is really only another skin for pages multiselect.

[renobird]

The multi-lanugage issue is a good catch. 

Seems like Nico's module would give you complete "free" tagging with the UI you are looking for.

[kongondo]

@LostKobrakai, I suggest you add this to the modules directory if/when you can? I think it is a useful addition, thanks!

[adrianmak]

I'm wondering Nico's module could be easily to extend to work with Page module

[renobird]

It could, "easily" is relative.

If you did that, it's essentially it's the same thing as autocomplete with a different UI. You could also go back to kongondo's suggestion of making some CSS changes to the asmSelect option to get something pretty similar.