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. More
This latest version of ProcessWire on the dev branch adds a new Inputfield module called “Toggle” that is an alternative to the existing Checkbox Inputfield. It also adds a nicer way to make column width adjustments to your fields when editing a template. This post covers all the details with screenshots and a short video.
New “toggle” field
A new type of field called a “toggle” has been added to the core. You can think of it like a checkbox in that it offers a simple ON or OFF selection. But rather than having a single checkbox to represent that state, it uses two radio buttons with their own labels. This enables the user to specifically select ON or OFF, YES or NO, TRUE or FALSE, etc. It comes with several of predefined labels like these, but you can also specify your custom labels (and in multiple languages if you'd like).
Having independently selectable options like this can sometimes be preferable to just having a single checkbox for a few reasons. For starters, it's more specific and clear for the user as they are choosing one thing or another. A checkbox field doesn't require a user interaction, whereas a toggle field does … at least if you make it a required field, something that would usually be useless with a checkbox. With a toggle field, you also have full control over the labels that represent the selectable values, whereas with a checkbox you just have the single checkbox label, usually making it necessary to phrase it as a question.
The above are fairly obvious benefits, but the new toggle field also goes further than this. It provides the ability to have a 3rd option, should you want it. For example, maybe you've got "Yes" and "No" as options, but also want to provide an "I don't know" option — the toggle field will let you do this. In addition, the toggle field also supports a value for "no selection", enabling you to differentiate between a yes/no selection and no selection. Though the "no selection" state would only be applicable if the field was not required. And so far in my own usage, I find it useful to make toggle fields required most of the time.
The core now contains the InputfieldToggle module, but there's also a companion FieldtypeToggle module in development so that you can create native ProcessWire fields of this type. That Fieldtype wasn't quite ready, so will likely be arriving next week in 3.0.140. Until then, you can still use the toggle Inputfield in FormBuilder or anywhere in the API you might be using Inputfield forms.
Of course, you could also do all of this with with a Page or Options field in ProcessWire. But those types may be overkill when all you need is a toggle (or something a little bit beyond it). The new toggle field enables you to do all of this a lot faster and more efficiently than you could before, both in creating the field, and in working with it from the API.
Below is an example of a Toggle field using custom labels, a 3rd option enabled, and a default selection in place:
Below is a screenshot of the field configuration as you would see it when editing a field on the “Input” tab in ProcessWire, or the “Details” tab in FormBuilder (the screenshot below was taken in FormBuilder):
Column width enhancements in the template editor
ProcessWire 3.0.139 contains some nice enhancements to the template editor when working with multi-column rows of fields. This feature was originally developed for FormBuilder, which has a form fields screen that is very similar to ProcessWire's template editor (both use asmSelect). That version of FormBuilder is still a few weeks away from being ready, but I'd found the enhancements so useful already that I wanted to add some of the same ones to the template editor in ProcessWire. So that is what has been added in 3.0.139.
Multi-column rows of fields are now identified with carets, where the down pointing caret identifies the start of a row, and the up pointing caret identifies the end of a row. If the total row with doesn't add up to 100%, then it makes one of them red to point that out.
You can now click and drag the column width percentage for any field and adjust it on the fly. You can drag left/right or up/down. This is a whole lot quicker than click to open the field modal editor, clicking the Input tab, and then dragging the column with adjustment in there (though you can still do that if you want to). Changes to column width or sorting of fields are now saved via automatic Ajax requests, behind the scenes.
Rather than write a lot about this, I think it's faster and simpler just to demonstrate it with an under 1-minute video:
This feature is still experimental and likely only useful on computers (rather than mobile or touch devices) but I've found it to be a useful time saver already and hope that you do too.
That's all for the this week. Next week I have a few new features to mention that are coming in FormBuilder. Paginated forms are one of them, but there's also some other equally interesting stuff on the way that I'll demonstrate next week hopefully. I also hope to have that FieldtypeToggle (mentioned earlier) ready as well. Have a great weekend and enjoy the ProcessWire Weekly too!