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.


  • Chris


    • 2 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


    • 2 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


    • 2 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

    • 2 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

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

Twitter updates

  • ProcessWire 3.0.146 on the dev branch contains about 22 commits with a combination of useful upgrades and issue report resolutions, more details in this forum post: More
    22 November 2019
  • ProcessWire 3.0.144 and 3.0.145 add improved field template context override settings and include a new Inputfields API, along with numerous other issue fixes, optimizations and improvements to the core. More
    8 November 2019
  • ProcessWire 3.0.144 core updates: Upgraded overrides section in the field editor, a new Inputfields JS API, and more— More
    1 November 2019

Latest news

  • ProcessWire Weekly #290
    In the 290th issue of ProcessWire Weekly we're going to introduce the latest addition to the ProDevTools module package and a third party image picker field from gebeer, check out a new site of the week, and more. Read on! / 30 November 2019
  • New User Activity module
    Blog / 29 November 2019
  • Subscribe to weekly ProcessWire news

“The end client and designer love the ease at which they can update the website. Training beyond how to log in wasn’t even necessary since ProcessWire’s default interface is straightforward.” —Jonathan Lahijani