ProcessWire Weekly #121

Latest core updates: ProcessWire 3.0.33 RC1 and 2.8.33

The latest post at the processwire.com blog by Ryan might be pretty short in itself, but contains two very interesting pieces of information nevertheless:

• Starting from version 3.0, the official GitHub account for ProcessWire is going to be processwire/processwire. Said account has just been converted to an organization account, but – at least for the time being – this doesn't really change anything.
• The current plan is to release a stable version of ProcessWire 3.0 on 23rd of September. Keeping this goal in mind the first release candidate version of ProcessWire 3.0 (3.0.33 RC1) has just been pushed to GitHub.

The bulk of changes in 3.0.33 are about keeping comments in sync with version changes, updating documentation, and fixing bugs. Since we're getting pretty close to releasing a new version, we could really use some help with testing; feel free to try out the latest version of the 3.0 branch and submit any feedback via the GitHub issue tracker.

In other news Ryan has decided to post his own "recipe of the week". His tip of the week is a pretty neat method for easily embedding include files into page content. Check the latest processwire.com blog post out for more details about that – and, of course, about the upcoming 3.0 release.

New module: Croppable Image 3

Last week we mentioned a version of the Croppable Image module for ProcessWire 3.0 being under construction, and now we're happy to say that this module is finally here: beta version of Croppable Image 3 is now available for ProcessWire 3.0.20+!

Croppable Image 3, like it's predecessors and the original Thumbnails module built and released by Antti Peisa, consists of three modules: Fieldtype, Inputfield, and a Process module. The API of the module is explained in more detail at GitHub, but in a nutshell using the module means defining crop settings (name, width, height) and requesting a specific cropped version in a template file via the API:

<?php
// get the first image instance of crop setting 'portrait'
$image = $page->images->first()->getCrop('portrait');
echo "<img src='{$image->url}' alt='{$image->description}' />";

Horst has kindly provided us with a screencast showcasing the module in action. This screencast should be particularly interesting to anyone not already familiar with the updated image field in ProcessWire 3.0:

This newly released third iteration of Croppable Image was designed and built by Horst and sponsored by DREIKON. Huge thanks to all parties involved in making this possible – Croppable Image is by far one of the most useful modules out there, and it would've been a real shame to see 3.0 released without a working version of this module!

New module: General Site Settings

Ever wondered where to store site-specific settings like page title, slogan, contact addresses, etc.? Well, General Site Settings is a new module that adds a new General Settings page to the Admin area for storing exactly this kind of data.

You can define the settings you need via the module configuration screen and then modify them via the General Settings page added by the module to the backend of your site during installation. For template use the module adds a new API variable $settings – though you can also change the name of this variable via module configuration if it happens to clash with something you already have in place.

While similar feature can be quite easily achieved by using a regular page for your site-specific settings, this module has a few interesting concepts in place, and can definitely provide an easy way to access and save custom settings. Which method best suits your particular needs depends on various factors, but it's always good to have new options.

Currently this module is somewhat limited in terms of arranging config settings and some features perhaps feel a little bit rough on the edges, but if you're willing to give it a try, you can grab it from GitHub. Big thanks to Piotr Markiewicz for making this module available!

ProcessWire recipe of the week: improving accessibility of read more links

Recipe of the week is a section where we feature a weekly recipe borrowed from the ProcessWire Recipes site. The recipe we've got this week – improving accessibility of read more links for screen reader users – is again a relatively simple one, but as always: the simple things are usually the most useful ones. This particular recipe also happens to be based on W3C link and content accessibility guidelines.

Problem

You want to enhance screen reader accessibility of a "read more" link in a teaser by including a description of the link target, but you don't want this to be actually visible on the page.

Solution

Add a visually hidden, but audible element like this:

<?php
$news = $pages->find('template=news');
foreach($news as $teaser): ?>
    <article>
        <!-- The title -->
        <h3><a href="<?= $teaser->url ?>"><?= $teaser->title ?></a></h3>
        <!-- The excerpt or summary -->
        <p><?= $teaser->summary ?></p>
        <!-- The link, extended -->
        <a href="<?= $teaser->url ?>">Read more <span class="visually-hidden"> about <?= $teaser->title ?></a>
    </article>
<?php endforeach; ?>

Also add to your CSS:

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: rect(0, 0, 0, 0);
    border: 0;
}

That's it: now you've got visually consistent "read more" links without sacrificing the abilithy of screen reader users to fully enjoy your site. Clean and simple – just the way we like it.

If you've got a recipe of your own that you'd like to share with others, feel free to submit it at ProcessWire Recipes. Also, big thanks to Marcus for providing the recipe featured here!

Site of the week: Washington County, Florida Tourist Information

Our latest site of the week is a tourist information site for Washington County, Florida. While this site, designed by John Warren, LLC, is our choice this week for two main reasons:

• first of all the amount, quality and diversity of content on this site is pretty amazing, and
• second of all it feels really usable, which is always a good thing to keep in mind when you're designing a website for a wide audience.

Washington County – named after George Washington, the first President of the United States of America – has a history that dates back to 1825. After various boundary shifts the county is now over 382,000 acres in size, and covers a vast portion of the Florida Panhandle, the northwestern part of Florida. For tourists the county offers a wide range of outdoor activities, live theatre, winery tours, and so much more.

Stepping back to the site itself, from a technical point of view it's powered by the latest stable version of ProcessWire (2.7.2), makes use of the responsive Foundation front-end framework, and includes quite a few content types: in addition to regular content pages there are events, press releases, business pages, and so on. Features like lazy loaded images are implemented in order to boost the performance of the site, and the response times feel very good indeed.

Overall this is a very usable and welcoming site, and as such we believe it serves it's purpose as an online tourist information centre well. Thanks to John Warren, LLC for sharing this site with us!

Stay tuned for our next issue

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