ProcessWire Weekly #124

Soft launching ProcessWire 3.0, new GitHub repositories, ProcessWire on Packagist, and more

Ryan is back from his well deserved vacation and that shows – this week is pretty huge in terms of new announcements. Just to summarise, here are some of the topics Ryan covered in his latest post at the processwire.com blog:

• Soft launch of ProcessWire 3.0
  There's still plenty of stuff to do particularly in terms of getting our supporting materials updated, but we're live now: no more devns branch – 3.0 is our latest stable release. Go get it!
• Three new GitHub repositories
  As of 3.0 our primary GitHub repository is processwire/processwire, but we also have three other repositories to introduce: processwire-issues for issue reports, processwire-requests for feature requests and soon processwire-legacy for 2.x.
• New GitHub responsibilities
  Benjamin Milde and Francesco Schwarz are now helping with the management of issues and requests repositories. Big thanks to both Benjamin and Francesco for donating their time to the ProcessWire project!
• ProcessWire 3.0 added to Packagist
  ProcessWire has just been added to Packagist, which means that it can be added to an existing project with composer require processwire/processwire – or used to set up a new project with composer create-project processwire/processwire.
• New README and CONTRIBUTING documents
  Our README has been trimmed to contain just what is actually important for most users, and a new CONTRIBUTING document has been added, with instructions for contributing to the project.
• New documentation section (install)
  This new documentation section contains instructions for installing and updating ProcessWire, and also troubleshooting possible issues raised during this process. This information used to be in our README, but makes more sense here.
• $config improvements
  Config settings can now be defined using a brand new method syntax, like this: $config->imageSizerOptions('quality', 70). Also a whole new config setting, $config->fileCompilerOptions, has been added. This can be used to alter the default behaviour of FileCompiler.

For more details about the updates mentioned above, don't forget to check out Ryan's latest post at the processwire.com blog. Thanks!

New module: Sassify provides an easy API for compiling SASS / SCSS files

This time we're thrilled to introduce a brand new module known as Sassify. Built by Rudy Affandi and released under the MIT license Sassify is a template level tool for easily compiling SASS/SCSS files. Behind the scenes Sassify makes use of scssphp, which in turn is a SCSS compiler written in PHP.

Getting started with Sassify is actually really simple: just install it like any other module and use the static Sassify::css() method with proper params in your template files. Two basic examples borrowed from the Sassify GitHub repository:

<!-- Single SASS/SCSS file -->

<link rel="stylesheet" type="text/css" href="<?php echo Sassify::css('sass/my_style.scss'); ?>">

<!-- Array of SASS/SCSS files -->

<link rel="stylesheet" type="text/css" href="<?php echo Sassify::css([
    'sass/style_1.scss',
    'sass/style_2.scss',
    'sass/style_3.scss',
]); ?>">

As you can see, with the Sassify module making use of SASS/SCSS for your stylesheets becomes a downright trivial task, and with this there's one less (pun intended) reason not to jump into the SASS/SCSS bandwagon. Give it a try and see how it feels; you can always go back to plain old CSS if SASS/SCSS doesn't suit your needs.

Big thanks to Rudy Affandi for building and sharing this module with us. There's always demand for simple yet useful modules like this. Keep up the good work!

ProcessWire recipe of the week: create an index / linklist of all used image tags

Our latest recipe of the week makes use of ProcessWire's built-in image tagging support by automatically generating a list of pages with images that have a specific tag selected. This recipe was again borrowed from the ProcessWire Recipes site.

The problem

You need to collect all tags from image fields and create a link list to then filter pages with images that have the selected tag.

The solution

The solution in it's entirety can be seen below. Code comments describe exactly what is happening, and for the most part this should be pretty easy to grasp with some basic understanding of PHP and the ProcessWire API.

<?php

/**
 * collect all tags
 * ======================================
 */

$alltags = array(); // container
$use_urlsegments = false;

// find all pages that have images with tags
$parray = $pages->find("template=basic-page|gallery, images.tags!=''");

// loop pages found and collect tags from images
foreach($parray as $p) {

    // find all images that have no empty tags, yeah you can
    // also use find on Pagefiles array!
    $images = $p->images->find("tags!=''");

    // loop them and add tags to array
    foreach($images as $im) {
        $tags = $im->tags;

        // convert "," and "|" to space and create array using explode
        if(strpos($tags, ',') !== false) $tags = str_replace(',', ' ', $tags);
        if(strpos($tags, '|') !== false) $tags = str_replace('|', ' ', $tags);
        $tags = explode(' ', $tags);

        // convert tag value to a page name using beautifyer, ü => ue, ö => oe
        // since special chars are not allowed in PW urls
        foreach($tags as $tag) {
            $alltags[$sanitizer->pageName($tag, Sanitizer::translate)] = $tag;
        }
    }
}

/**
 * generate links with tags as urlsegment
 * ======================================
 */

// make the array unique and create a tags nav from it
// add tags to the url of the page to later read it and
// render a list of pages

echo "<ul>";
foreach(array_unique($alltags) as $key => $tag) {
    if($use_urlsegments) {
        echo "<li><a href='{$page->url}$key'>$tag</a></li>";
    } else {
        echo "<li><a href='{$page->url}?tag=$tag'>$tag</a></li>";
    }
}
echo "</ul>";

/**
 * find all pages with the supplied tag
 * ======================================
 */

// enable url segments on the template if using url segments
if($input->urlSegment1 || $input->get->tag){

    if($input->urlSegment1) {
        $tagvalue = $input->urlSegment1;
        // get the original tag value text from the cached array
        $tagvalue = $alltags[$tagvalue];
    }
    if($input->get->tag) {
        $tagvalue = $sanitizer->selectorValue($input->get->tag);
    }

    // find pages with images having the requested tag
    $pa = $pages->find("images.tags~='$tagvalue'");
    if(count($pa)) {
        echo "<h2>Pages found</h2>";
        echo "<ul>";
        foreach($pa as $p) echo "<li><a href='$p->url'>$p->title</a></li>";
        echo "</ul>";
    }
}

For more details about the image tagging support check out the API documentation page for the Images fieldtype. Big thanks to Philipp Urlich (aka Soma) for sharing the original version of this recipe!

Site of the week: Enovity

Our latest site of the week is fresh out of the oven and belongs to Enovity, a company that provides various engineering and commissioning services for their clients. In their own words they are "engineers who operate, maintain, and optimize facilities to deliver sustainable environments where people and organizations prosper".

The site of Enovity is the work of Twenty20 Marketing and lights and colors and was launched earlier this week. Based on the Uikit frontend framework, the site has a clean and crisp design and feels comfortable to browse regardless of screen size. In fact the mobile experience feels perhaps even more streamlined than the "big screen" version, but this might, of course, be a question of preference: some of us prefer simplicity.

Page speed feels good enough, the site is based on a recent version of ProcessWire, and – as we already mentioned – the frontend is based on the Uikit framework. Apart from that, one very specific highlight is the use of Google's reCAPTCHA for the contact form; definitely a major improvement over a regular CAPTCHA in terms of usability.

Congratulations are in place, for both Enovity and the team behind the implementation – there's no doubt that this is a job well done, and we hope it serves it's purpose well!

Stay tuned for our next issue

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