ProcessWire Weekly #112

ProcessWire 3.0.24 and 2.8.24 introduce page traversal improvements and more!

According to Ryan's latest post at the processwire.com blog, the past week has been all about taking care of GitHub issues, but we've also got some very nice improvements for the page traversal features and a couple of totally new features too.

Taking care of page traversal bottlenecks

More specifically traversal methods that need to be aware of the position of the page in relation to it's siblings, such as $page->prev() and $page->next(), have received vast improvements in terms of scalability and performance.

These features have been around for a long time, but they used to come with serious slowdowns when dealing with thousands of siblings. From now on such issues should be a thing of the past – at least unless you're dealing with millions of sibling pages.

“Save and edit next” in Page Editor

A feature requested via GitHub, "save and edit next" is a pretty obvious addition to the save actions in Page Editor now that the performance issues related to sibling traversal features have been taken care of.

This action can be quite handy for saving entire page reloads and shaving off a bunch of unnecessary clicks while editing a bunch of adjacent pages. After all it's often the small things that count when it comes to providing great user experience.

$page->index() API method

New API method $page->index() can output the position of current page in relation to it's siblings as a zero-based index number. This method was also made possible thanks to the page traversal updates introduced this week.

For more details about – and background information for – the core updates this week and a few interesting tips on what to expect next week, don't forget to check out Ryan's latest blog post. Thanks!

Latest site profiles for ProcessWire: Bootstrap 4 and Foundation 6 in action

Every now and then we see a question on our support forum regarding use of existing front-end frameworks or JavaScript libraries on a new ProcessWire site. While the easy answer is still that ProcessWire doesn't dictate your markup for you and thus you can use any front-end components you wish, a solid starting point can be quite helpful.

In the case of ProcessWire site profiles are essentially pre-defined structures, complete with markup and everything, that you can choose from while creating a new site. We've got a bunch of these available already from our modules directory, but here are two of the most recent ones, which very much deserve a special mention here:

• Bootstrap 4 minimal site profile is based on the cutting edge version of the Bootstrap front-end framework, Bootstrap 4. This site profile provides a full-featured basic site with a simple layout. Included in the package are Font Awesome, MeanMenu, and a bunch of other commonly used features.
• Foundation 6 minimal site profile is based on the latest version of the Foundation front-end framework and functionally similar to the Bootstrap 4 framework above. This site profile also includes Font Awesome and MeanMenu, but also the Slick Carousel, a replacement for Foundations built-in but deprecated Orbit slider.

Both site profiles are available as SASS versions you can compile yourself or as pre-compiled CSS versions for those not interested in setting up and learning the SASS syntax. Personally I'd suggest taking the extra time to learn SASS, but obviously this route is not for everyone, and either way it's good to have both options available.

Both site profiles were developed by forum user @flydev and can be downloaded from GitHub. Please check out the README files or the support forum topics linked above for more details, installation instructions, etc. Big thanks to @flydev for his contributions!

New navigation module by Soma: Aligator

Aligator is a new navigation module by Soma. Loosely similar to his earlier module for building navigation elements, MarkupSimpleNavigation, the primary task of Aligator is to render a tree of pages starting either from a single root page or an array of pages.

The main difference between Aligator and MarkupSimpleNavigation is that Aligator is much less involved in generating markup. MarkupSimpleNavigation takes a bunch of global settings and generates markup from that, and said markup can be modified using hooks, the markup generated by Aligator is defined by callback functions:

<?php
$menu = $modules->Aligator;

$menu->setDefaultOptions(array(
    "selector" => "",
    "callback" => function($item, $level){
        // any code here to determine the output
        return array(
            "item" => "<a href='$item->url'>$item->title</a>",
            "listOpen" => "<li>",
            "listClose" => "</li>",
            "wrapperOpen" => "<ul>",
            "wrapperClose" => "</ul>"
        );
    }
));

echo $menu->render(
    $root, // A root page or an array of pages (PageArray)
    array( // An array of options (just like the default options)
        array(...), // level 1
        array(...), // level 2
        array(...), // level 3
    ),
    $maxLevels = 3, // How many levels should be rendered?
    $collaped = false // Render just the active root branch?
);

Aligator is still very much a work in progress and could receive (even breaking) changes in the near future, but it does already provide a promising alternative approach to the MarkupSimpleNavigation module. In many ways it feels like a cleaned out version, and while it might not be quite as ready out of the box, it's flexibility and makes up for that many times over.

If you're interested in giving this module a try, it's available for download from GitHub and the README there contains more detailed usage instructions. According to the author, feedback and improvements are also welcome, so please don't hesitate to reach out if there's something in your mind.

We're keenly looking forward to seeing how far this cute little crocodilian can go. Big thanks to Soma for once again giving us something fun to play with!

Site of the week: Haojie

Our latest site of the week belongs to Haojie, a Chinese restaurant located in Bath, UK. Haojie offers a Chinese buffet, bar and takeaway, and in their own words they aim to "leave you happy in heart and full in belly". Sounds pretty good to me!

Crafted by PROGRESS, the site of Haojie site is downright brilliant in it's simplicity, style, and unique charm. The site features some great-looking front-end features, design that has a very mobile first feel to it yet is simultaneously perfectly suited for larger screens, and some rather creative use of both animations and subtle effects.

From a technical point of view the site is based on the Bootstrap front-end framework, makes use of AIOM+ for it's minification needs, and apparently GreenSock components for at least some of those neat-looking animated front-end goodies.

Congratulations to Haojie for having such a wonderful site – and thanks to PROGRESS for sharing their work with us. We sincerely hope that this site serves it's purpose as well as one would assume!

Stay tuned for our next issue

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