ryan

PW 3.0.67: Upgrades to file/image tags

14 posts in this topic

This week's version includes some helpful UI updates to the tags feature available in our File and Image fields, which we'll be taking a closer look at in this post. Like many versions, this also includes some other updates consistent with submitted GitHub issue reports. Read on for all the details…

https://processwire.com/blog/posts/processwire-3.0.67-upgraded-file-and-image-tags/

 

13 people like this

Share this post


Link to post
Share on other sites

just upgradet to the newest dev version and tested it. Loving it, Ryan! 
That's what is best about processwire; you are free like a bird and have countless possibilities to realise your ideas with core functions.

3 people like this

Share this post


Link to post
Share on other sites

Love it. I use file and image tagging extensively and it's one of the few PW methods which trips clients up. I was just wondering during the week if it was possible to have a tag selector based on something a bit more dynamic. Thanks :-)

Share this post


Link to post
Share on other sites

Wow, i'm having Déjà vu...

http://modules.processwire.com/modules/selectize-image-tags/

Glad this is in the core now though; personally i couldn't have done without my module version for the past year (used on dozens of sites).

Wondering if i can now remove the dependency for the jQuerySelectize module and load the core selectize js in the module init.

Questions would be:

1) does the new integration allow you to select the Selectize skin?
2) will the core selectize interfere in case you upgrade and have image fields set to use the module selectize image tags
3) can the limit of what tags can be used be set on the field settings, and can those tags preferences be over-ridden per template, like the module.

7 people like this

Share this post


Link to post
Share on other sites

could anybody of you guys using image tags please give me an example when and what for you use it? :) i've never used image tags in the past 3 years and would like to make sure if i was missing something or if i just had no use for it :D thanks!

Share this post


Link to post
Share on other sites

Eg upload a company logo to an image field that holds many images. Then add the tag "logo", and use it as the main brand logo. Then perhaps upload another one with tag "footer_logo", and so on.

Or mark files for different languages as Ryan recommended lately in a blog post. Or mark images to skip, eg for a gallery. I guess you got the idea now.

3 people like this

Share this post


Link to post
Share on other sites

thanks, got it :) have to start using it. i understood the multilanguage part but never needed it so far. but it seems that i will use more tags and less imagesfields in the future (i used to create single fields for what you describe) :D thanks!

Share this post


Link to post
Share on other sites

Is it just me or what - I can't add tags if page is not saved first?

Share this post


Link to post
Share on other sites

it definitely helps with managing images in situations where you have a single images field on a page, and want to use some of those image in the RTE, while still specifying one to be used as the 'featured image', which might appear above a blog post. Using a tag like gallery on multiple images could then be used to output a carousel as that featured image, instead of a single image...

3 people like this

Share this post


Link to post
Share on other sites

@Macrura looks like a could have saved a lot of time here if I'd found your module first, sounds like we were after the same thing, except that you were well ahead of the curve on this. Right down to the Selectize library even. I started working on this after the post a couple weeks ago detailing how to handle multi-language with images, and feeling like an idiot for not even checking to see if someone had built this already. 

I ended up modifying the Selectize library because I couldn't get it to work quite how I wanted to for a couple of instances. Like when doing the createFilter, where you only allow certain tags, if you hit enter and the tag wasn't allowed, it would submit the form and save the page, rather than just refusing the tag. There were a couple little things like that I had to tackle, but otherwise it's pretty close to stock. 

To answer your questions, I didn't add support for Selectize skin, and instead modified the default style to be independent of color palette so that it would work equally well regardless of admin theme. I just thought the other theme colors weren't mixing well with our admin themes.

As for interference, there may be. I don't know a good way around it other than to check if Selectize is already in the core, like if(is_dir($config->paths->JqueryUI . 'selectize')) { $modules->JqueryUI->use('selectize'); } else { /* selectize not present */ }. But since your module came first, perhaps a good route would be for the core to detect if your module is present and skip over the built-in tag stuff when it is?

Yes, the tags can be limited in the field settings. No it can't be changed per-template yet, but that's simple, I'll add that.

@matjazp I'm not sure I understand the question? At least, I don't have to save a page before I can add tags, but if you think there's an error let me know steps to reproduce. 

Share this post


Link to post
Share on other sites

@ryan The menu to select predefined tags doesn't show unless the page is saved.

After a file is uploaded there's an error in the console:

log.png.993edd60c8fe89993bde05fb6f9dd636.png

Image field with "User selects from list of predefined tags" option selected.

Share this post


Link to post
Share on other sites
2 hours ago, ryan said:

As for interference, there may be. I don't know a good way around it other than to check if Selectize is already in the core, like if(is_dir($config->paths->JqueryUI . 'selectize')) { $modules->JqueryUI->use('selectize'); } else { /* selectize not present */ }. But since your module came first, perhaps a good route would be for the core to detect if your module is present and skip over the built-in tag stuff when it is?

There could be a lot of people using the module version for image tags; I will revise the module code to check the core version or the is_dir and then load from core – it does seem that your tweaks are going to be essential for this, as that behavior of it submitting is definitely a problem, that i hadn't noticed (i always assumed that users would click and select, but now i see that they can type stuff in and try and hit enter..)

Another issue is that there is the other module that uses selectize, namely the InputFieldSelectize (and the multiple version) which are page reference fields, and those also load the selectize library. I'm pretty sure there are at least a handful of people actively using that fieldtype, so maybe I will also need to use your modified version of the seletize library in the JquerySelectize base module, so that the selectize family of modules will all behave the same way, whether the library is loaded from the core or from the module, and in situations where someone is using InputfieldSelectize, but not image tags.

if the core version of the library could include the skins, and in addition, your modified skin, then the module version could allow skin to be chosen (if it is installed), but if not installed, then the core version uses the default skin.

In the module config for the JquerySelectize, besides offering the option of changing the skin (existing and new PW admin theme neutral version), that could be a place to specify which selectize library to load (core or module), to allow users with an existing setup to gracefully test and transition to the core version. Once they have tested their setup using the core version as specified in the module's config, they could choose to keep the module installed (for the extended skin options) or uninstall it and use the default skin.

5 people like this

Share this post


Link to post
Share on other sites
16 hours ago, ryan said:

@matjazp I'm not sure I understand the question? At least, I don't have to save a page before I can add tags, but if you think there's an error let me know steps to reproduce.

@ryan I have to save the page before I can enter tags using selectize. There is also js error, as @fbg13 mentioned. It looks like some html is missing on newly uploaded image, like 

<div class="selectize-control InputfieldFileTagsSelect multi plugin-remove_button plugin-drag_drop">...</div>

 

Share this post


Link to post
Share on other sites

@ryan Thanks for the fix! I find the active tags background color to light, not enough contrast to see which tag is active (.selectize-dropdown .active{background-color: #d7e2e6;)

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.