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?
 

Twitter updates

  • We added WebP image support this year and many have been adopting it in existing projects. We look at a process used for migrating existing websites to WebP images— from preliminary considerations to implementation & testing, w/lots of tips & tricks too: More
    16 August 2019
  • Core version 3.0.137 on the dev branch adds the ability to hook multiple methods at once, in a single call. This post details how it works and provides a useful example of how you might put it to use in your development environment— More
    2 August 2019
  • ProcessWire 3.0.136 updates our CKEditor version and adds a new backtrace() method to the core Debug class— More
    26 July 2019

Latest news

  • ProcessWire Weekly #274
    The 274th issue of ProcessWire Weekly introduces three new modules, covers the latest status update from Ryan, and features the newly released website of the Brightline Initiative. Read on!
    Weekly.pw / 10 August 2019
  • WebP images on an existing site
    In this post we’ll look at a process used for migrating an existing website to use WebP images. We’ll cover everything from preliminary considerations to implementation and testing, with lots of tips and tricks along the way.
    Blog / 16 August 2019
  • Subscribe to weekly ProcessWire news

“ProcessWire is like a breath of fresh air. So powerful yet simple to build with and customise, and web editors love it too.” —Margaret Chatwin, Web developer