ProcessWire 3.0.67 – Upgraded file and image tags

ProcessWire 3.0.67

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.

Upgraded file and image tags

You may already be familiar with this feature, but this week we improved it a lot. With File and Image fields, you've always been able to optionally enable a useful tags feature. This enables you to categorize files or images with tags that can be used to provide more information about the file or image/photo.

As an example, on many sites that I build, every page has an "images" field that can be used for photos placed in CKEditor. But if the client uploads an image and gives it the tag "primary", then my template file knows to display that image at a reserved placement at the top of the page. Likewise, if they give it a tag of "sidebar" then the template file knows to display the image at a reserved place in the sidebar. This simple example just hints towards the usefulness of tagged files/images, but there is so much more you could accomplish. Another example is one we mentioned in a post a couple of weeks ago, where we outlined how to use tags to support a multi-language file or image field in ProcessWire.

Upgrading the tags UI

As useful as the file/image tags feature is, the UI for assigning tags has not been as useful. For starters, its appearance was that of just a regular text field… nothing about it really implied tags, so you kind of had to know what you were doing. It's one of the few places in PW where you would have to instruct the client how to use it. Further, it was completely freeform… you would just type tags, and there was no way to choose pre-assigned tags like "primary" or "sidebar", etc. Basically, you had to remember on your own if there were any tags that might be recognized for site layout and such.

This week we've attempted to resolve those issues and make the tags feature both more friendly and useful. The first order of business was to make it actually look like you were working with tags. To do this, we added a slightly modified version of the excellent Selectize library as an extension to our jQuery UI module. Now you can…

  • Type a tag, then hit space or enter, and it gets converted to a tag.
  • Select from a list of pre-defined tags.
  • Drag and drop tags to the order you prefer.
  • Remove a tag without having to backspace over it (though you can also do backspace).
  • Have support for freeform tags, predefined tags, or both.

Here's what it looks like before you've entered/selected any tags:

Below is what it looks like when you focus the tags field, giving you a list of predefined tags that you can select from. Or you can enter your own:

This screenshot below demonstrates the tags configuration that you'll see on the Details tab when editing a file or image field:

As someone that has used the file/image tags feature quite a lot in the past, I personally find the ability to use pre-defined tags among the most useful additions here. It means I no longer have to communicate by other means what tags are recognized by the site templates. While I know not everyone uses tags, I hope that at least some of you find the additions this week useful in your projects as well.

See also:

If you haven't submitted your latest PW sites to our sites directory in awhile, please stop by and add them when you get a chance–we love seeing your work. We'll be back again next week with another new dev version of ProcessWire. Have a great weekend and enjoy the ProcessWire Weekly.

Comments

  • Chris

    Chris

    • 3 years ago
    • 70
    Very nice updates. I have never really looked into tags, now I can see how useful they could be. Great post.
  • MK

    MK

    • 3 years ago
    • 00
    Fantastic work again Ryan! I remember at one point there being the idea of being able to add arbitrary metadata fields (personally, date/times would be most useful) to any number of pictures in a page's image field - any update on this?
  • MK

    MK

    • 3 years ago
    • 10
    Fantastic work again Ryan! I remember at one point there was the idea of being able to add arbitrary metadata fields (personally, date/time would be most useful) to any number of pictures in a page's image field - any update on this?
  • Zahari M

    Zahari M

    • 3 years ago
    • 11
    Brilliant Ryan! I remember in the early days asking the forum how to use tags to do the opposite.... i.e exclude images! Finally managed to figure it out thanks to Adrian's help I think it was. I love using tags. These improvements are much appreciated.
  • Chris Falkenstein

    Chris Falkenstein

    • 3 years ago
    • 20
    Can the source of the tag field be pages?
 

Twitter updates

  • Weekly update for Jan 10, 2020—front-end file uploads in LoginRegisterPro with InputfieldFrontendFile module: More
    10 January 2020
  • If you haven't seen it yet, be sure to check out this great infographic by @teppokoivula in ProcessWire Weekly #294— How ProcessWire professionals work—the results of our recent weekly polls summarised: weekly.pw/issue/294/#how…
    3 January 2020
  • Today we have a new master version released, 3.0.148! There are 25 new versions worth of upgrades, fixes and optimizations in this new master version, relative to the previous. In this post we take a closer look at what’s new, how to upgrade, & more— More
    3 January 2020

Latest news

  • ProcessWire Weekly #297
    In the 297th issue of ProcessWire Weekly we're going to check out the latest core updates (ProcessWire 3.0.149) and introduce a new third party module called StaticWire. Read on!
    Weekly.pw / 18 January 2020
  • ProcessWire 3.0.148 new master
    Today we have a new master version released, version 3.0.148! The last master version was 3.0.123, so there are 25 new versions worth of upgrades, fixes and optimizations in this new master version, relative to the previous. In this post we’ll take a closer look at what’s new, how to upgrade, and more.
    Blog / 3 January 2020
  • Subscribe to weekly ProcessWire news

“We were really happy to build our new portfolio website on ProcessWire! We wanted something that gave us plenty of control on the back-end, without any bloat on the front end - just a nice, easy to access API for all our content that left us free to design and build however we liked.” —Castus, web design agency in Sheffield, UK