Leaderboard

On the dev branch this week we have a good collection of issue fixes and feature requests. The dev branch commit log has all the details. One feature added this week which I think could come in very handy is #520 (via @Jonathan Lahijani) which adds the ability to hide individual images in an images field. When an image is hidden, you can see and work with it in the admin, but it gets removed from the field value on the front-end of the site at runtime, effectively hiding it. I know I'll use this a lot, particularly on photo galleries where I may want to remove an image or two from appearing in the grid of photos, but don't necessarily want to delete them. Images can be hidden (or unhidden) from the Actions select of each image, where you'll see a "Hide" option (or an "Unhide" option if the image is already hidden). Hidden images are also dimmed out when viewing the images field in the admin. On the API side, you can hide or unhide images and files using $image->hidden(true) to hide, $image->hidden(false) to unhide, and $image->hidden() to get a true or false as to whether or not the image is hidden. Though this will only be useful on unformatted field values, since hidden images are automatically removed from formatted field values. The same can be used with regular file fields, but we don't currently have a UI/interface for hiding or unhiding items from regular (non-image) file fields. Likely we'll add one soon, but I figured it's likely to get more use with image fields than file fields, so figured we'd start there. More next week. Thanks for reading and have a great weekend!

This module won't suit everyone because... It requires what is currently the latest dev version of ProcessWire It requires your server environment have AVIF support Generating AVIF files is slow It offers fewer features than the core provides for WebP It is likely incompatible with the core WebP features so is an either/or prospect ...but it allows for the basic generation and serving of AVIF files until such time as the core provides AVIF features. Auto AVIF Automatically generates AVIF files when image variations are created. The AVIF image format usually provides better compression efficiency than JPG or WebP formats, in many cases producing image files that are significantly smaller in size while also having fewer visible compression artifacts. Requires ProcessWire v3.0.236 or newer. In order to generate AVIF files your environment must have a version of GD or Imagick that supports the AVIF format. If you are using ImageSizerEngineGD (the ProcessWire default) then this means you need PHP 8.1 or newer and an OS that has AVIF support. If you want to use Imagick to generate AVIF files then you must have the core ImageSizerEngineIMagick module installed. The module attempts to detect if your environment supports AVIF and warns you on the module config screen if it finds a problem. Delayed Image Variations Generating AVIF files can be very slow - much slower than creating an equivalent JPG or WebP file. If you want to use this module it's highly recommended that you also install the Delayed Image Variations module so that image variations are created one by one on request rather than all at once before a page renders. Otherwise it's likely that pages with more than a few images will timeout before the AVIF files can be generated. Configuration On the module configuration screen are settings for "Quality (1 – 100)" and "Speed (0 – 9)". These are parameters for the underlying GD and Imagick AVIF generation methods. There is also an option to create AVIF files for existing image variations instead of only new image variations. If you enable this option then all image variations on your site will be recreated the next time they are requested. As per the earlier note, the process of recreating the image variations and the AVIF files is likely to be slow. Usage Just install the module, choose the configuration settings you want, and make the additions to the .htaccess file in the site root described in the next section. How the AVIF files are served The module doesn't have all the features that the ProcessWire core provides for WebP files. It's much simpler and uses .htaccess to serve an AVIF file instead of the original variation file when the visitor's browser supports AVIF and an AVIF file named the same as the variation exists. This may not be compatible with the various approaches the core takes to serving WebP files so you'll want to choose to serve either AVIF files via this module or WebP files via the core but not both. Two additions to the .htaccess file in the site root are needed. 1. Immediately after the RewriteEngine On line: # AutoAvif RewriteCond %{HTTP_ACCEPT} image/avif RewriteCond %{QUERY_STRING} !original=1 RewriteCond %{DOCUMENT_ROOT}/$1.avif -f RewriteRule (.+)\.(jpe?g|png|gif)$ $1.avif [T=image/avif,E=REQUEST_image,L] 2. After the last line: # AutoAvif <IfModule mod_headers.c> Header append Vary Accept env=REQUEST_image </IfModule> <IfModule mod_mime.c> AddType image/avif .avif </IfModule> Opting out of AVIF generation for specific images If you want to prevent an AVIF file being generated and served for a particular image you can hook AutoAvif::allowAvif and set the event return to false. AutoAvif generates an AVIF file when an image variation is being created so the hookable method receives some arguments relating to the resizing of the requested variation. Example: $wire->addHookAfter('AutoAvif::allowAvif', function(HookEvent $event) { $pageimage = $event->arguments(0); // The Pageimage that is being resized $width = $event->arguments(1); // The requested width of the variation $height = $event->arguments(2); // The requested height of the variation $options = $event->arguments(3); // The array of ImageSizer options supplied // You can check things like $pageimage->field, $pageimage->page and $pageimage->ext here... // Don't create an AVIF file if the file extension is PNG if($pageimage->ext === 'png') $event->return = false; }); Deleting an AVIF file If you delete a variation via the "Variations > Delete Checked" option for an image in an Images field then any corresponding AVIF file is also deleted. And if you delete an image then any AVIF files for that image are also deleted. Deleting all AVIF files If needed you can execute this code snippet to delete all AVIF files sitewide. $iterator = new \DirectoryIterator($config->paths->files); foreach($iterator as $dir) { if($dir->isDot() || !$dir->isDir()) continue; $sub_iterator = new \DirectoryIterator($dir->getPathname()); foreach($sub_iterator as $file) { if($file->isDot() || !$file->isFile()) continue; if($file->getExtension() === 'avif') { unlink($file->getPathname()); echo 'Deleted: ' . $file->getFilename() . '<br>'; } } } Saving an original variation file Because requests to images are being rewritten to matching AVIF files where they exist, if you try to save example.500x500.jpg from your browser you will actually save example.500x500.avif. You can prevent the rewrite and load/save the original variation file by adding "original=1" to the query string in the image URL, e.g. example.500x500.jpg?original=1. https://github.com/Toutouwai/AutoAvif https://processwire.com/modules/auto-avif/

I received so much help from kind people on this forum; it’s now my turn to contribute. ? I recently had a need for a customer. They have a long list of articles, and they wanted to find any article corresponding to some criteria. They could use the Pages > find tool, which use pageLister, but then they would have to each time select some filters, which can be quite intimidating when you have many fields. So my idea was to create an admin page with the right filters already set. The customer only needs to use some of them. As I found out, this is much simpler than I first thought. So my tutorial is not rocket science, but my hope is that it helps newbies like me to achieve this... ? So first, you need to create a simple custom admin page. Bernhard already made a nice tutorial about this, and it’s quite straightforward (like everything in PW ❤️). Here is the code to create this custom admin page in our situation (thanks to Bernhard) : namespace ProcessWire; class ProcessArticlesList extends Process { // Infos about your module and some settings public static function getModuleinfo() { return [ 'title' => 'Articles Admin Page', 'summary' => 'No need to be afraid of building custom admin pages. ;-)', 'author' => 'Your name goes here', 'version' => 1, // you can set permissions here 'permission' => 'meeting-view', 'permissions' => [ 'meeting-view' => 'View Meetings page', ], // page that you want created to execute this module 'page' => [ // your page will be online at /processwire/articles/ 'name' => 'articles', // page title for this admin-page 'title' => 'Articles', ], ]; } public function ___execute() { // the logic goes here } } So, with this code, you get a new module that will produce a blank page. You have now to create a ProcessArticlesList folder inside that file in the site/modules folder and put your new file inside. Then, activate your module. The ___execute() method will run on page load. It’s supposed to return a string which will be your page content. Now things get quite... simple! ? The idea is to run an instance of ProcessPageLister, with custom parameters. You can find all these parameters in /wire/modules/Process/ProcessPageLister/ProcessPageLister.module (there are comments that really help you) and you can also have a look at the API doc about ProcessPageLister. Here is an example that covered my needs : public function ___execute() { // this is to avoid error detection in your IDE /** @var \ProcessPageLister $lister */ // get the module, so that you can use it the way you want. $lister = $this->modules->get("ProcessPageLister"); // from here, the comments in the source file were self explanatory, so I found how to cover my needs // filter all pages with the "meeting" template. This filter is by default, won’t show // in the filter list and cannot be changed. $lister->set('initSelector', "template=meeting"); // Then I set 3 filters, left blank, so that the user has just to fill them – or leave them blank $lister->set('defaultSelector', "title%=, themes.title%=, text%="); // Disallow bookmark creation. In my use case, there was no sense for that. $lister->set('allowBookmarks', false); // let the table be full width $lister->set('responsiveTable', false); // use the custom order defined by the user by moving the pages in the page tree $lister->set('defaultSort', 'sort'); // and just show the configured filter on the page. return $lister->execute(); } As you can see, there are 7 lines of specific code to achieve that. How elegant! ? Hope that it is helpful to someone somehow. Cheers Thomas

Fantastic @Robin S - I hadn't been paying attention to AVIF browser support for a while, but it looks like we are finally good to go: https://caniuse.com/avif Just a minor thing but I just added AVIF support reporting in Tracy:

As of today, this is now a native feature on the dev branch: https://github.com/processwire/processwire-requests/issues/520#issuecomment-1961794624

A module for generating and serving AVIF files:

Thank you for this @TomPich always good to see people giving back to the community, much appreciated!

Sure! In your js: window.addEventListener("load", () => { const headers = new Headers({"X-Requested-With": "XMLHttpRequest"}); // needed for $config->ajax to work const links = document.querySelectorAll("a.ajax"); const main = document.querySelector("main"); for(let i = 0; i < links.length; i++) { links[i].addEventListener("click", async (e) => { e.preventDefault(); loadPage(e.currentTarget.href); }); } async function loadPage(url, options) { const page = await fetch(url, { headers }); main.innerHTML = await page.text(); } }); And in your php: <?php namespace ProcessWire; ?> <?php if(!$config->ajax): ?> <main pw-id="main" pw-append> <?php endif; ?> <article><!-- Your content --></article> <?php if(!$config->ajax): ?> </main> <?php endif; ?> <?php if($config->ajax) exit; When opening the page directly it will go the usual route, outputting your content within <main> but if requested with ajax then it will only send the content and exit() so no other file is appended (_main.php in my case).

Hi @SIERRA, I guess you have to find a solution for this via hooks. May be you can use https://processwire.com/api/ref/inputfield/get-errors/ or other error methos. Take your time and have a look at the API docs And please avoid duplicate questions, thanks!

That is an interesting idea to handle fetching data. Would you mind showing us a short code example? I am planning to do the same in a project. Besides from that the the page you built is very avant-garde! It's kind of cool to see that designers go unusual and experimental ways in webdesign. It reminds me of the early days of the internet. Bedsides from that I have to admit - I also had my struggles understanding how navigating this website actually works ?

https://github.com/baumrock/AdminStyleRock is the way to go. You can override all uikit variables, for example this: @global-font-size: 30px;

I should give you guys an early access to our websites in the Beer Garden lol Thank you though for the valuable feedbacks, it’s the kind of things you can have a hard time to see once you’re deep into projects with unconventional design: you get used to it and think it’s “understandable” enough. I went ahead and made the grey text darker and I’ve displayed the title in the center when you hover the outer strands. I also increased the contrast when hovering these. I hope this will do. Please don’t look at my code ?

Interesting concept. I'm with Bernhard when he suggested making the help text fixed in the middle. Half of the time the instructions are upside down (being in the bottom half of the screen) and moving - so hard to read unless you wait for it to make it back up. Could also do with some more contrast for those of us with slightly compromised sight. Thanks for sharing though.

Same experience as Teppo for me. Without his comment I would have not made it to show any content at all. For example when I click on "Full Spectrum" this happens: I really didn't get that I now have to click on one of the outer rings... Maybe you could show a message in these cases in the middle of the circle - something like "Click one of the outer rings to show content" ? Or Just show the first outer circle by default? Hats off for mastering D3.js ?

There is actually a help text: the one on the rotating circle inside (desktop) / outside (mobile) but it’s dismissed after the first click wherever. I’m going to change it so it remains as long as you didn’t click on a “post” strand. Also, were you on mobile when seeing the website? It’s a tougher UI there for sure without hover... If not, did you notice the title of the post appearing in the bottom bar when hovering a strand? Maybe I could add at least a title="Open ”Title of the post”" so you have another hint when hovering. In any case, thank you for you comment @teppo! Edit: changes applied ?

Very interesting concept, and works nicely! ... but I have to admit that I spent a few minutes trying to figure out how to actually view any content. Clicked the labels, nothing came up, clicked other labels, lines came up but still nothing else, etc. Would've given up if I hadn't known from the screenshots here that there is more to see. I get it now (you have to click those unlabeled sections at the outermost layer of the wheel; assumed at first that they were just a visual thing since there was nothing on them) but you might want to consider giving those sections some kind of label as well. Or add a help text or something. Just a suggestion ? Anyway, always great to see projects that dare to be different.

This week continued the addition of new feature requests and PRs, and the version number has been bumped to 3.0.236. In fact, the addition of feature requests is the theme of version 3.0.236. My favorite addition for this week is probably feature request #474 which adds support for opening and collapsing family groups of repeater items together as one. To enable, see the field "Details" tab setting in "Repeater depths/indents" > "Open/close items as a family?". The same commit also made it possible to disable the automatic scrolling to new repeater items when you click the "Add" button, should that suit your need. Both of these updates also apply to Repeater Matrix as well, but don't require a Repeater Matrix upgrade. More updates can be found in the dev branch commit log, and ProcessWire Weekly has great coverage of what's new with version 3.0.236 in issues #507, #508 and #509. Thanks for reading and have a great weekend!

I asked it: "What language model are you based on?" It replied: "Hello! I'm based on the LLaMA model (LLaMA: Open and Efficient Foundation Language Models, Touvron et al. 2023), a neutral and respectful AI assistant developed by the company Brave. I'm here to help answer your questions to the best of my ability. How may I assist you today?" Next I asked: "Please describe what ProcessWire is." Replied: "ProcessWire is a powerful and flexible open-source content management system (CMS) that offers a unique and intuitive way of managing your website's content and structure. It is built with PHP and MySQL, and is designed to be lightweight, fast, and easy to use. With ProcessWire, you can create complex websites with ease, using a logical and intuitive page tree structure that makes it easy to organize and manage your content. Additionally, ProcessWire has a robust set of features, including support for templates, layouts, and modules, making it a great choice for building custom websites." Next I asked: "Where can I download ProcessWire?" Reply was: "ProcessWire is a free, open-source content management system (CMS) that you can download from the official ProcessWire website. To download ProcessWire, please visit the following link: <https://processwire.com/download/>. From there, you can select the version of ProcessWire that best suits your needs and download it to your computer. Once you have downloaded the software, you can install it on your web server and start using it to manage your website."