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

    • 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

    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

    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?

Post a comment

Twitter updates

  • New post: This week ProcessWire ProMailer has been released, plus we’ve got a nice upgrade in our community support forum, and more— More
    15 March 2019
  • New post: This week we look at the latest version of ProcessWire, 3.0.127 with nearly 30 new commits resolving dozens of older issue reports and a couple useful new features— More
    1 March 2019
  • New post: This week we take a look at what’s in ProcessWire 3.0.126 which focuses largely on resolving issue reports, but also includes a handy new Page if() method— More
    15 February 2019

Latest news

  • ProcessWire Weekly #253
    In the 253rd issue of ProcessWire Weekly we'll introduce the ProMailer Pro module, cover the upgrade made to our support forum software, check out Sanitizer Transliterate, and pick a new site of the week. Read on!
    Weekly.pw / 16 March 2019
  • ProcessWire ProMailer now available
    This week ProcessWire ProMailer has been released, plus we’ve got a nice upgrade in our community support forum, and more.
    Blog / 15 March 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