ProcessWire Weekly #272

Latest core updates: ProcessWire 3.0.136

This week's core update – ProcessWire 3.0.136, which is already available through the dev branch at GitHub – was announced by Ryan in a support forum thread on Friday. This version includes an update to one of our third party dependencies, and a brand new debugging feature:

• The CKEditor version bundled with the core was updated from 4.10.1 to 4.12.1.
  The editor update brings new features, and numerous fixes and improvements. Among these is one that is classified as a security update; although for our use case the issue in question isn't particularly problematic, this update is highly recommended by the CKEditor developers.
• The addition of the Debug::backtrace() static method.
  This method is like PHP's native debug_backtrace() – the results of which you've likely encountered in the context of ProcessWire's fatal exceptions – but tailored for our needs. Resulting backtrace is more to-the-point, and doesn't include all those (usually unrelated) internal calls you'll see in the native PHP backtrace.

... and that's it for our core updates section for this week. We should have more updates to share by next week, so stay tuned for that.

You can find more details about this week's updates, their implications, and particularly the reasoning behind – and some use cases for – the new Debug::backtrace() method from Ryan's post on the support forum, so be sure to check it out as well. Thanks!

New module: PageimageSrcset by Chris Thomson

Pageimage Srcset is a brand new module developed by Chris Thomson with the goal of making the use of "srcset" and "sizes" for responsive images as simple as possible. In addition to providing the attributes you'll need, this module will also automatically create necessary variations to make those rules work right out of the box.

The way you interact with this module is via the API – typically in your template files – and as such it's probably worth pointing out that it doesn't actually do anything for images embedded with Wysiwyg tools, such as CKEditor.

Using PageimageSrcset

The module provides configuration settings for the default srcset options for the site, and you can access its features using various methods and properties added to the Pageimage object:

• Pageimage->srcset is a property that returns the default rules configured via module config settings. For a lot of use cases this will be the primary way you access the features of this module.
• Pageimage->srcset() method works similar as the property version, but accepts set rules in a variety of formats, and then produces necessary srcset parameters from those. This is really handy for more "advanced" use cases.
• Pageimage->sizes property will return the sizes info. The return value of this property is usually just 100vw – unless portrait orientation has been enabled, in which case the default return value will be (orientation: portrait) and (max-width: {maxWidth}px)50vw instead.
• Pageimage->sizes() method can be used to set custom sizes. In most cases this isn't necessary, but again this method can be quite useful for some of the more advanced use cases.
• Finally the native Pageimage->render() gets three all-new properties you can use to easily generate srcset images: srcset, sizes, and uk-img. That last one is one of the Uikit specific features of this module.

Overall this is quite an extensive module, and provides just about everything you could possibly hope for when it comes to handling modern responsive images in ProcessWire, from simple use cases to some that require a bit more thought – such as cover images for both landscape and portrait screen modes.

Additional goodies for Uikit users

In addition to the general purpose responsive image features, there are also some nice helper features specifically for Uikit users: the uk-img attribute for Pageimage::render(), support for converting Uikit width classes within the Pageimage::sizes() method, etc. Of course if you're not using Uikit, you can safely ignore these.

--

Be sure to check out the PageimageSrcset support forum thread for more details about the module. Big thanks to Chris for sharing his work with us – absolutely stunning job!

Site of the week: Andrea Chiabotto, graphic and web design portfolio

Our latest site of the week belongs to Andrea Chiabotto, a graphic designer and web designer from Hamburg, Germany, currently working at news aktuell.

From this multilingual website you can find a showcase of the latest works by Andrea, complete with illustrations or screenshots depending on the type of the project. The front page is essentially a collection of the projects, and also includes a contact form. Products and services have a page of their own, with plenty of detail and a clearly laid out pricing table.

What caught our eye on this site in the first place was definitely the simplicity of the design, and the overall "less is more" vibe it has. There really aren't any "unnecessary" elements here, but the design is top notch, and the site is quite a joy to browse.

Now, regarding what's going on behind the scenes, there's not a whole lot to say: there are no signs of a front-end framework or anything like that here, but we did spot the All In One Minify (AIOM) module in action.

Big thanks to Andrea Chiabotto for sharing this project with us. Keep up the great work – we'd love to see more of your work in the future!

Stay tuned for our next issue

That's it for the 272nd issue of ProcessWire Weekly. We'll be back with more news, updates, and content Saturday, 3rd of August. As always, ProcessWire newsletter subscribers will get our updates a few days later.

Thanks for staying with us, once again. Hope you've had a great and productive week, and don't forget to check out the ProcessWire forums for more interesting topics. Until next week, happy hacking with ProcessWire!