Leaderboard

This week the ProcessWire core dev branch version has been bumped to 3.0.230. Currently we are about 10 commits ahead of the main/master branch. Relative to that branch, we have 5 issue fixes, 2 pull requests, major improvements to the wireIconMarkup() function and some minor improvements to the ProcessLogger module. We may merge these updates (among others) to the main/master branch as soon as next week. This week I also developed a new security module called LoginTimer that helps to prevent timing attacks in ProcessWire. Admittedly, I started this more for fun than anything, as I don't think timing attacks are a common problem in ProcessWire. But the more I got into it, the more I became aware of the potential dangers of timing attacks (particularly outside of the ProcessWire world). In any case, I now view it as an important security consideration and definitely thought we should have a module for it. Maybe someday we'll have it in the core too. The module is now available in the modules directory and on GitHub, and I wrote up a blog post to accompany the module and that is located here: https://processwire.com/blog/posts/timing-attacks-and-how-to-prevent-them/

Generate image placeholders for smoother lazyloading. Currently supports ThumbHash, BlurHash, and average color placeholders. I've been using the wonderful ImageBlurhash module for this in the past, but unfortunately it's no longer in active development. This new module adds ThumbHash and Average Color placeholder algorithms, improves performance by caching generated placeholders, fixes an issue when replacing images, and allows regenerating and clearing placeholders via the admin interface. Try it out using the installation instructions below or check out the GitHub repo for details. Why use image placeholders? Low-Quality Image Placeholders (LQIP) are used to improve the perceived performance of sites by displaying a small, low-quality version of an image while the high-quality version is being loaded. The LQIP technique is often used in combination with progressive lazyloading. How it works This module will automatically generate a small blurry image placeholder for each image that is uploaded to fields configured to use them. In your frontend templates, you can access the image placeholder as a data URI string to display while the high-quality image is loading. See below for markup examples. Placeholder types The module supports generating various types of image placeholders. The recommended type is ThumbHash which encodes most detail and supports transparent images. ThumbHash is a newer image placeholder algorithm with improved color rendering and support for transparency. BlurHash is the original placeholder algorithm, developed at Wolt. It currently has no support for alpha channels and will render transparency in black. Average color calculates the average color of the image. Installation Install the module using composer from the root of your ProcessWire installation. composer require daun/processwire-image-placeholders Open the admin panel of your site and navigate to Modules → Site → ImagePlaceholders to finish installation. Configuration You'll need to configure your image fields to generate image placeholders. Setup → Fields → [images] → Details → Image placeholders There, you can choose the type of placeholder to generate. If you're installing the module on an existing site, you can also choose to batch-generate placeholders for any existing images. Usage Accessing an image's lqip property will return a data URI string of its placeholder. $page->image->lqip; // data:image/png;base64,R0lGODlhEAAQAMQAA Accessing it as a method allows setting a custom width and/or height of the placeholder. $page->image->lqip(300, 200); // 300x200px Markup Using a lazyloading library like lazysizes or vanilla-lazyload, you can show a placeholder image by using its data URI as src of the image. <!-- Using the placeholder as src while lazyloading the image --> <img src="<?= $page->image->lqip ?>" data-src="<?= $page->image->url ?>" data-lazyload /> Another technique is rendering the placeholder and the original image as separate images on top of each other. This allows smoother animations between the blurry unloaded and the final loaded state. <!-- Display placeholder and image on top of each other --> <div class="ratio-box"> <img src="<?= $page->image->lqip ?>" aria-hidden="true"> <img data-src="<?= $page->image->url ?>" data-lazyload> </div>

Hello @MoritzLost, I had a similar issue with a selector a few weeks ago containing not equal to (!=) and an or-condition. My issue was fixed, but maybe this could be related: https://github.com/processwire/processwire-issues/issues/1802 Regards, Andreas

As most times when it comes to ProcessWire, there's about a million ways to do it. I'm curious why Textarea / Textformatter didn't work. Did you have HTML entity encoder enabled on the fields? A very handy tool for embedding code which you normally wouldn't want editors to enter directly is Hanna Codes. You'd define and insert a tag like [[jobs]] (or [[job number="I002-1350-6"]] if you need to pass on variable parameters) into your field (could be Textarea, CKEditor or TinyMCE) and activate TextformatterHannaCode in the field's configuration. (This would also give you the chance to try out my module Hanna Code Dialog for TinyMCE). You could, of course, also create an individual template with the JS code, or extend your existing template with a checkbox (plus any text field for parameters to the JS) and have your PHP template conditionally render the script tags. It's possible to allow the direct insertion of script tags in CKEditor and TinyMCE, but I consider that a door better left closed for security reasons.

It seems to be a permissions issue. When Rock Migrations is run the regular way, it makes the $user a superuser with a sudo() method. If you run your migrations from your own script you probably need to do the same there.

@everyone (how annoying would it be if that actually worked...) If you've got a Github account and want to support ProcessWire and the community, why not go give this icon PR a ?? Great way to show the icon repo maintainers that there are people out there who love the platform. https://github.com/devicons/devicon/pull/1905 And while you're at it, go give the ProcessWire repo a ⭐ as well! https://github.com/processwire/processwire

Hey there, born out of a personal need I've implement a lightweight version of @Robin S' Hanna Code Dialog module for TinyMCE. In a bout of creativity, I've named it HannaCodeDialogTiny This module is still in alpha state and needs some extensive testing. If you encounter any problems, please open an issue on GitHub. It has no select options, descriptions or cheat sheets (yet), and it doesn't cope well with nested Hanna Codes. What it does have is the Insert Hanna Code dropdown in the TinyMCE menu bar with dialog-based insertion, non-editable Hanna Codes in the editor, double click on existing codes for editing in a dialog. Hanna Codes are also highlighted, and you can drag and drop them around. The dropdown: Double click on any highlighted Hanna Code: Fill in your values: The Hanna Code has been changed: Have fun!

After a previous request for Webp support (6 years ago, times flies…) that Horst and Ryan kindly introduced in PW 3.0.132, I'm back with another request for a new image file format, AVIF, which has landed in almost all browsers. I'm actually surprised no one here in the PW community has been asking for AVIF support in ProcessWire as it seems to be provide much more consistent gains in compression and greater relative quality over Webp, and of course over good old JPEG. My experience using it definitely confirms this. I've been using Cloudinary to serve AVIF images to the browsers that support it, but of course I'd rather not use a third-party service, and use it natively in ProcessWire. Imagemagick supports AVIF if I'm not mistaken. Anyone else is interested?

There hasn't been a lot of activity on the core this week, as I've been wrapped up in a ProcessWire-based client project (same one as last week). I'd like to put in a few more updates before bumping the version number, which will likely be next week. This week I also released a new module to accommodate a feature that had been requested more than once, but since it's not that commonly needed, I thought it was better to put it in a module rather than the core: Custom Inputfield Attributes for ProcessWire This module enhances both the interactive and API configurability of fields in ProcessWire (both admin and front-end). It can add custom attributes to Inputfields in ProcessWire, FormBuilder, or other Inputfield forms. Custom attributes can be configured interactively in the admin, or they can be added via this module’s API method. Custom attributes can be added to the <input> element of an Inputfield or they can be added to the wrapping .Inputfield element. You can add any attribute that you want (with a few exceptions), whether replacing or appending existing attributes, adding data-* attributes or any other named attribute. This module is available for download now on GitHub with more details on the module info page. Thanks for reading and have a great weekend!

Native AVIF support would be great for creating performant sites. When WEBP support was added to the core, it was done as a one-off addition. AVIF could be added in the same way by accessing an $image->avif property on the image object. However — I think @BrendonKoz touched on this above — adding more alternative output formats will probably require some rethinking to keep this part of the core modular. We'll definitely see more image formats being developed in the future, and it'd be great to access them from a single property or as a single parameter with formats and fallbacks, e.g. $image->url(300, ['format' => 'webp,png']).

@AndZyk Thanks Andreas! Looks like that was it, I updated to 3.0.229 and the query works correctly again. Not sure why my colleague updated to a non-Master version, we usually don't do that. Lesson learned, I guess.

This opens up so many possibilities for example for working with htmx or alpine.js. Thank you Ryan.

Hi @ryangorley! Not sure if you've taken at this old but still very relevant post: I'd say the best way is the one that fits your use case and in that sense ProcessWire has no rules about categorization. The tags can exist under their own parent separate from the "News > Blog Item 1" tree branch: /tags/tag-1 And be linked through the tags inputfield, it's pretty much the same case for categories. To my own personal taste I always tend to go with an structure like this: - ? News -- ? Tags ---- ? Tag 1 ---- ? Tag 2 -- ? Categories ---- ? Category 1 ---- ? Category 2 -- ? News Item 1 -- ? News Item 2 I like this because it keeps everything in the context of the "News" for the editors, and also the following URL structures which makes sense to me (not so sure about SEO but have had no complaints lol): /news/tags/tag-1 /news/categories/category-1 /news/news-item-1 The only part I'm not a huge fan of is that it requires a bit of code using hooks to keep the right sort underneath the "News" page, since the actual news items share a parent with the tag/categories parent, sorting the News children by published reversed, will (most likely) send the Tags and Categories to the bottom. But it ain't that big of a deal and if the problem arises to you I'll gladly share my solution. Also, to my own taste, I use a custom field for publish date, this lets me have more control over it and handle the visibility of the actual post with the hidden/unpublished status depending on what I want to achieve. Now for archive pages i'd suggest you take a look at what @ryan did in this old but also still relevant blog profile: https://github.com/ryancramerdesign/BlogProfile/blob/master/site-blog/templates/archives.php In all fairness this is not the clearest example and it's one of those part you'd expect to be built by default in a CMS, but I always think these details are worth the effort as a sacrifice for the flexibility PW gives you in terms of data structure/relation.

The problem isn't breaking the boilerplate, but rather breaking my habits ? I mean I'm so used to just making my own vanilla js and getting it doing what I want that needing to flip the switch to Alpine's way is enough to make me postpone the decision to the next project.

You have done it again. I need a feature for a site and there you go and add it. Have a good weekend Sir.

@Ivan Gretsky please also take a look at https://github.com/baumrock/RockMigrations/tree/dev#repeatermatrix-field I added a convenience method to create the Matrix field and set the types in one go.