ProcessWire Weekly #574

This week in the processwire.com blog: ProcessWire admin redesign

As we mentioned in our previous issue, the plan was to release newly redesigned admin theme for ProcessWire this week — and that is exactly what happened. New admin look is enabled as of the latest development version of ProcessWire, 3.0.248.

Technically this is not a whole new theme, but rather a visual and user interface update for our default admin theme, AdminThemeUikit. That being said, it is a major upgrade, and comes with some pretty amazing new features, such as...

• Option to switch between light mode and dark mode on a per-user basis. By default, we're using whatever mode you've selected for your OS and/or browser, but you can override it as needed.
• Whole new — or two whole new, depending on your point of view — design layer applied on top of our existing admin theme. You can also revert back to the "old" look if you still prefer that.
• Numerous quality of life updates for the user interface: masthead with primary navigation and search bar is now always visible, dropdown navigation lists with lots of items scroll within the dropdown itself, improved search function and command hotkeys, an ability to set the "main" color for the theme, and more.
• Many new customization options in addition to the admin.less approach (which we've supported since version 3.0.179.) Among other things you can now modify admin theme main color, customize the theme using plain CSS and all-new CSS variables. Check out the bundled examples for more details.

The admin theme redesign — along with new look for processwire.com, which is as of this writing still being worked on — was realized by KONKAT Studio, a Hamburg based studio consisting of designer Jan Ploch and developer Diogo Oliveira. Both Diogo and Jan have been using ProcessWire for a long time, and (in their own words) felt it was time to give something back to the community.

For more details about the admin theme redesigned and a Q&A with the KONKAT Studio, be sure to check out the post at the processwire.com blog.

Big thanks to Diogo, Jan, and of course Ryan for all their work on the admin theme — it is a major upgrade, and in many ways opens whole new opportunities for future ideas!

New module: Markup Bluesky

Markup Bluesky is a new third party ProcessWire module created by Daniel Lintott, aka TwoWheelDev. This is actually a module bundle, consisting of four related modules — inputfield, fieldtype, textformatter, and a markup generating module. Together these modules allow one to embed and manage content from Bluesky Social on their site.

The list of features, as outlined in the projects README file:

• Custom ProcessWire fieldtype with options for:
  • Setting a Bluesky handle
  • Choosing how many posts to show
  • Toggling inclusion of reposts
• Outputs formatted markup via MarkupBluesky for front-end rendering
• Stores settings per-page using JSON in the database
• Includes a textformatter to render individual posts to a page

Once you've installed the module, created a Bluesky field, and added it to relevant template(s), you can choose a Bluesky handle and configure related settings on a per-page basis. Once you've done that, rendering a feed is as simple as including required dependencies — FancyBox and hls.js — and calling the module's renderFeed method:

echo $modules->get('MarkupBluesky')->renderFeed($page->your_bluesky_field);

For more details and a step-by-step getting started guide check out the MarkupBluesky GitHub repository. This module is not currently available from our modules directory, but you can install it by downloading or cloning it from aforementioned repository.

Big thanks to Daniel for creating this module and making it available for the ProcessWire community!

Site of the week: BILCUT

Our latest site of the week belongs to BILCUT GmbH, a German company that specializes in the production and sale of high-quality, high-speed laser-cut blanks. BILCUT is part of the BILSTEIN GROUP, which is one of the strongest international cold-rolled strip manufacturers.

The multilingual website of BILCUT was created by camalot GmbH and is focused on introducing the BILCUT company, their services, their technology, and its applications — among other things. There's quite a lot of information on this site, and it's available in both German and English.

For Bilcut, a spin-off of the Bilstein Group, we developed a website with a strong focus on technical innovation and customer benefits. The special feature: a 3D upload form with preview, allowing users to submit requests for nesting or production directly.

— Sites directory entry for the BILCUT website

In terms of design the BILCUT website is very clean and neatly organized, and overall has an industrial look and feel to it. Images are used to add a splash of color here and there, while some transition effects have been sprinkled on top of it to liven things up. All in all this is a very easy to grasp and easy to navigate website that also performs very well, so we've got no complaints whatsoever.

As for some behind the scenes details, it looks like the front-end of this site was built on top of the Bootstrap front-end framework, with additional effects being powered by the Animate On Scroll library. As for non-core ProcessWire modules, there are none that we could easily spot here, so not much else we can say about the implementation.

Thanks to the folks at camalot GmbH for sharing this project with us, and our congratulations to the client, BILCUT GmbH, for their new, ProcessWire powered website!

Stay tuned for our next issue

That's it for the 574th issue of ProcessWire Weekly. We'll be back with more news, updates, and content Saturday, 17th of May. 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!