ajben Posted August 26, 2015 Share Posted August 26, 2015 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 Link to comment Share on other sites More sharing options...
Peter Knight Posted August 26, 2015 Share Posted August 26, 2015 Would this help? http://modules.processwire.com/modules/image-extra/ Link to comment Share on other sites More sharing options...
LostKobrakai Posted August 26, 2015 Share Posted August 26, 2015 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. Link to comment Share on other sites More sharing options...
Macrura Posted August 26, 2015 Share Posted August 26, 2015 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 6 Link to comment Share on other sites More sharing options...
ajben Posted August 27, 2015 Author Share Posted August 27, 2015 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! Link to comment Share on other sites More sharing options...
Macrura Posted August 27, 2015 Share Posted August 27, 2015 @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) 1 Link to comment Share on other sites More sharing options...
ajben Posted August 28, 2015 Author Share Posted August 28, 2015 @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! Link to comment Share on other sites More sharing options...
Macrura Posted August 28, 2015 Share Posted August 28, 2015 that's looking good – when you get some stable CSS, post it back here... thanks for the autocomplete suggestion also! Link to comment Share on other sites More sharing options...
Martijn Geerts Posted August 28, 2015 Share Posted August 28, 2015 Would be cool to make it a Drop in. Link to comment Share on other sites More sharing options...
Macrura Posted August 28, 2015 Share Posted August 28, 2015 yes - drop in for sure... maybe a module at some point could be convenient, since i'm predicting i'll need this a lot. 2 Link to comment Share on other sites More sharing options...
Macrura Posted March 30, 2016 Share Posted March 30, 2016 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.cssProcessPageEdit 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... 9 Link to comment Share on other sites More sharing options...
Macrura Posted May 21, 2016 Share Posted May 21, 2016 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) 5 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now