Autocomplete Tags in Image Field

[ajben]

hey guys

is there a way to have an autocomplete tag input in the image field? I've already activated the «use tags» checkbox, but it's only a simple text field. my idea is smth like this: http://modules.processwire.com/modules/inputfield-chosen-select/

the client has a lot of images which he should tag on its own.

attached what I have so far.

thanks

[Peter Knight]

Would this help?

http://modules.processwire.com/modules/image-extra/

[LostKobrakai]

There's no autocomplete functionality, as there's also no full directory of tags anywhere. Tags are stored as part of their corresponding image and therefore do not know anything about other tags.

[Macrura]

Here's a simple way to add autocomplete and 'tags' to your tags field, using admin custom files;

you would first need to have admin custom files running and enabled for page edit.

this example uses Tag-it! because it stores the tags in a way that seems to work with PW's field (note this is still proof of concept and being tested, but works so far);

http://aehlke.github.io/tag-it/

1.) add the tag-it.min.js to your admin custom files or paste it directly into your ProcessPageEdit.js file.

2.) paste in the CSS into your ProcessPageEdit.css file

3.) Initialize the tags after the plugin, in your ProcessPageEdit.js

$(function(){
	$(".Inputfield_images input[name^='tags_images_']").each(function() {
		$(this).tagit({
		    availableTags: ["kenburns", "test"],
                    singleFieldDelimiter: ' '
		});
	});
});

you can set it up so that you initialize the field based on it's name and then set your tags with the availableTags option.

the CSS needs to be adjusted to be compatible with the jqueryui settings used by PW admin;

this is my current CSS, but needs some work still (though it works):

ul.tagit {
   /*  padding: 1px 5px; */
    padding: 7px 5px;
    overflow: auto;
    margin-left: inherit; /* usually we don't want the regular ul margins. */
    margin-right: inherit;
    border-top: 1px #ccc solid;
}
ul.tagit li {
    display: block;
    float: left;
    margin: 2px 5px 2px 0;
}
ul.tagit li.tagit-choice {    
    position: relative;
    line-height: inherit;
    background: #BBCEF1 !important;
}
ul.tagit li span {
	color: black !important;
	
}
a.tagit-close {
	/* background: #eee; */
}

input.tagit-hidden-field {
    display: none;
}
ul.tagit li.tagit-choice-read-only { 
    padding: .2em .5em .2em .5em; 
} 

ul.tagit li.tagit-choice-editable { 
    padding: .2em 18px .2em .5em; 
} 

ul.tagit li.tagit-new {
    /* padding: .25em 4px .25em 0; */
    padding: 0;
}

ul.tagit li.tagit-choice a.tagit-label {
    cursor: pointer;
    text-decoration: none;
}
ul.tagit li.tagit-choice .tagit-close {
    cursor: pointer;
    position: absolute;
    right: .1em;
    top: 50%;
    margin-top: -8px;
    line-height: 17px;
}

/* used for some custom themes that don't need image icons */
ul.tagit li.tagit-choice .tagit-close .text-icon {
    display: none;
}

ul.tagit li.tagit-choice input {
    display: block;
    float: left;
    margin: 2px 5px 2px 0;
}
ul.tagit input[type="text"] {
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    box-sizing:         border-box;

    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;

    border: none;
    margin: 0;
    padding: 0;
    width: inherit;
    background-color: inherit;
    outline: none;
}

there are a few other good tagging plugins for jquery and i've been gradually testing them and trying them out; but for simple needs, this example may be pretty workable.

One other caveat - since the plugin initializes on the field and modifies the way it looks, it will trigger the changed field, and consequently ask you if you want to save the page, on exit, even if you didn't change any fields on the page...

*plugin init edited to change the stored tag delimiter for PW image tags field

[ajben]

Would this help?

http://modules.processwire.com/modules/image-extra/

I've tested this already. Sadly you're just able to extend it by text fields. 

Here's a simple way to add autocomplete and 'tags' to your tags field, using admin custom files;

you would first need to have admin custom files running and enabled for page edit.

Firefox.png

this example uses Tag-it! because it stores the tags in a way that seems to work with PW's field (note this is still proof of concept and being tested, but works so far);

http://aehlke.github.io/tag-it/

1.) add the tag-it.min.js to your admin custom files or paste it directly into your ProcessPageEdit.js file.

2.) paste in the CSS into your ProcessPageEdit.css file

3.) Initialize the tags after the plugin, in your ProcessPageEdit.js

$(function(){
	$(".Inputfield_images input[name^='tags_images_']").each(function() {
		$(this).tagit({
		    availableTags: ["kenburns", "test"]
		});
	});
});

you can set it up so that you initialize the field based on it's name and then set your tags with the availableTags option.

the CSS needs to be adjusted to be compatible with the jqueryui settings used by PW admin;

this is my current CSS, but needs some work still (though it works):

css..

there are a few other good tagging plugins for jquery and i've been gradually testing them and trying them out; but for simple needs, this example may be pretty workable.

One other caveat - since the plugin initializes on the field and modifies the way it looks, it will trigger the changed field, and consequently ask you if you want to save the page, on exit, even if you didn't change any fields on the page...

this is exactly what i was looking for!

thanks macrura!

[Macrura]

@ajben -  let me know how it works;

I'm on the road till next week, but when i get back i'll be testing it more as well as trying to get the default CSS a bit more consistent with PW inputfields;

Main thing to watch out for are js errors, as i haven't done extensive testing, and if there ends up being a js error it could break other functionality on the page edit.

also, i haven't extensively tested it with multiple image fields on 1 page, and multiple tags on each image - i'm not sure how this plugin saves the tags, they may be comma separated which might not work with PW image tags; some changes to the tag-it plugin may be necessary as i'm not seeing an option for the tag delimiter...

edit:

found the plugin setting for the stored delimiter and also tested on multiple image fields, multiple tags and all appears to work so far;

$(".Inputfield_images input[name^='tags_images_']").each(function() {
		$(this).tagit({
		    availableTags: ["kenburns", "mytag2", "mytag3"],
		    singleFieldDelimiter: ' '
		});
	});

(will update example code above as well)

[ajben]

@Macrura

Seems to work perfectly! See attached the input/output.

I made some css changes and now it looks pretty, too (my css file isn't clean, will have to fix it later).

tag-it seems very stable and easy to use. Added extra option showAutocompleteOnFocus and now it's perfect for every client.

Thanks again!

[Macrura]

that's looking good – when you get some stable CSS, post it back here... thanks for the autocomplete suggestion also!

[Martijn Geerts]

Would be cool to make it a Drop in. 

[Macrura]

yes - drop in for sure... maybe a module at some point could be convenient, since i'm predicting i'll need this a lot.

[Macrura]

as an update to this topic, after discovering the awesome power of Selectize.js, i have been able to implement really good tagging on the image fields which works much better than the technique discussed earlier in this topic.

1) place the selectize files somewhere in your templates folder

http://selectize.github.io/selectize.js/

(i have placed them in a 'plugins' folder)

2) make the files load on page edit, from your AdminCustomFiles settings:

ProcessPageEdit plugins/selectize/dist/css/selectize.legacy.css
ProcessPageEdit plugins/selectize/dist/js/standalone/selectize.min.js

3) in your ProcessPageEdit.js file, init the plugin:

/**
 * Selectize
 * ============================================
 * init selectize tagging on field called images
 *
 */
$(function(){

	$(".Inputfield_images input[name^='tags_images_']").each(function() {

		$(this).selectize({
		    delimiter: ' ',
	    	persist: false,
	    	plugins: ['remove_button','drag_drop'],
			options: [
				{value: 'tag1', text: 'tag1 - use this for blah'},
				{value: 'tag2', text: 'tag2 - this will do blah'},
				{value: 'tag3', text: 'tag3 - a super special tag!!'},
			],
	   			create: function(input) {
			        return {
			            value: input,
			            text: input
			        }
	    	}
		});

	});

});

Now you have a really good tagging interface:

Notice how you can also add explanatory info right into the tag, but keep the tag value whatever you want; there are a lot of other options you can implement, check out the selectize docs.

this is really now one feature that i believe should be included in the core or at least made into a module...

first an inputfield/fieldtype single/multi select based on selectize which can improve selections when you have a lot of additional data to show about the individual select options;

second would be to enable selectize.js on any image tag field and be able to define the option value/labels based globally or based on current template...

[Macrura]

as a follow up to this, i have a module for image tags, using selectize.js;

1.) install the shared js lib:

https://github.com/outflux3/JquerySelectize

2.) install the image tags module

https://github.com/outflux3/SelectizeImageTags

i have it working on several sites without issues, but this module should be considered Alpha.

Documentation is also at an early stage.

please report any issues or questions here.

Once these are all stable and have had some testing/documentation, they will be added to the modules directory.

(note these represent the start of a series of modules that utilize selectize.js, including an awesome page select Inputfield)