Leaderboard

From PW Weekly: This week we're happy to introduce a brand new module from Bernhard Baumrock, called RockLanguage. As the name suggests, RockLanguage is a tool for dealing with translations, and more specifically with translations related to ProcessWire modules. While ProcessWire natively ships with extensive language support, including the ability to ship module translations with the module itself, this does still require some manual work. That is exactly what RockLanguage aims to solve. Here's what the module translation process looks like with RockLanguage: Install RockLanguage on your site and (optionally) configure custom language code mapping via the module configuration screen. Add a directory for the language you'd like to include translations for within your own module's directory, e.g. /site/modules/MyModule/RockLanguage/FI/ for the Finnish language. Translate your module for said language via ProcessWire's translations manager. RockLanguage will automatically notice the update and duplicate the translation file from its original source to the directory you've just created. Now if you install this module to another site with the language folder included, and the site has RockLanguage installed and Finnish as one of its languages, the translation files for your module will be automatically synced with ProcessWire. What's nice about this workflow is that it takes some manual steps out of the equation, thus streamlining translation management. It's too early to say how widely this module will be adopted among public third party modules, but if you like the concept, you can easily start using it for your own modules right away. Download + Docs: baumrock.com/RockLanguage

Thanks for sharing! We have taken over a trainwreck of a Craft site from another agency recently, and amongst a million other nuisances, the image resizer plugin they've chosen is end-of-life. Plus, the authors are fond of uploading huge images. I just might steal that line of code to bring the overall size down considerably...

A week ago the new website of the wuppermann group went online. The Wupperman group is a EU-wide operating company with several locations in different countries. Their portfolio is all about steel fabrication. This includes flat producs, tubes & profiles. The technical production is developed by me, Olaf Gleba. The grafic design is supplied by C&G: Strategische Kommunikation GmbH. Homepage: https://www.wuppermann.com Some Impressions: (Secured) Shareholder portal, only available in german language Former screens deleted on behalf of the client. Technical notes: 1. All contents are populated by provided (i name them) content modules (e.g. Repeater Matrix Types) which gets the client what he needs and either prevent him from doing weird stuff. In nearly all textareas formatting is limited to a absolute minimum. For example, image insertion in CKEditor is generally prohibited. Instead there are dedicated fields for modules which holds media contents. 2. This and that.. - vCards are build on the fly with a admin hook on page save. - PrivacyWire as CCM (just a few cookies to handle Matomo and external movie content) - Uses the SearchEngine Module to handle (multilanguage) site search - Email Obfuscation Module for frontend e-mail addresses - Wire Mail Smtp to deliver automated e-mails - Multilingual (german, english, hungerian, polish, dutch) - Ajax driven content (for example on the contact page) - Heavy use of Fieldtype AssistedURL (Fork by @adrian) to provide language dependend, local file linking (fieldname_[de|en] approach) - Login area (closed shareholder portal) with secured file downloads ($config->pagefileSecure = true) - Email New User, Admin Action (create users batcher), Force Password Change for functionality like adding new users with specific roles, Password reset, Change Passwort a.s.o. - Distribution of concatenate/minified css and javascript is cachebusted (happens within my developement environment,- no modules (like AIOM etc.) involved). - Thanks to @ryan* all images are delivered in WEBP format (with fallback). *) s. https://github.com/processwire/processwire-issues/issues/1497 - The site uses a bunch of modules provided by the ProFields Package (for example Repeater Matrix and Table Fieldtypes).

Hi, I know quite a few of us are working on multi-language websites and are most likely using the `strftime`, however it's deprecated as of 8.1.0 and set to be removed in 9.0. There's some time left but on my local environment using MAMP and 8.0.8, it's as if it's already gone as dates were not localized anymore. Looking for options, I came accross this which might be useful to others: https://gist.github.com/bohwaz/42fc223031e2b2dd2585aab159a20f30 What's your take on this ? Also I wonder how things will be handled in PW's core as the WireDateTime is using that function as well.

The future looks bright! I'm very excited about the preview edition of GitHub Copilot. Finally someone putting AI to good use. Some of these suggestions are downright scary, they're so great. Write some code, a comment, then hit TAB. Boom. This is like Intellisense, but on steroids, and then some. Anyone else tried it? Care to share your experiences?

We recently launched DOMiD Labs, a new microsite for our existing client DOMiD. We already built the main site for DOMiD in 2019, as shown in our previous post here and featured in ProcessWire Weekly #296. The new DOMiD Labs site belongs to a project to plan participative museum concepts for the upcoming migration museum in Cologne, Germany. Concept, design and implementation by schwarzdesign - web agency in Cologne, Germany. Featured in ProcessWire Weekly #433 We're using an in-house starter project to bootstrap new ProcessWire projects. This allows us to deliver smaller projects on a low budget while still providing an extensive, modular content system and to spend some time polishing the features our clients care about. Notable features of the site include: A modular content builder utilizing the excellent Repeater Matrix field. A blog area with a paginated news index page. Multi-language support (site available in English and German). Q&A sections using accordion elements. A contact form built with the Form Builder module. Fully configurable navigation and footer components. Custom translation management for interface translations. Learn more: domidlabs.de

https://processwire.com/api/ref/wire-log/

Hey folks, so in a project I'm working on there are 750+ news articles in WP that are image-heavy in recent years. WP has a habit of storing the original images full-size - well, ProcessWire does too but I always set max dimensions on the image fields to resize during upload to prevent 2mb+ images on my disk. This had resulted in an uploads folder some 25GB in size from 2003-2022. Disk space is, fortunately, cheap nowadays, however I soon realized after mulling it over with Ryan that the easiest and most sane option for importing all those articles was to scrape in the post content HTML into a PW CKEditor field (thanks SimpleHTMLDOM for making this so simple!) but leave the images alone - WP had already done resizes for various lightboxes and galleries so it was just the original, huge images I had to contend with. The solution - on my own copy of the WP uploads dir - was to run this command and watch it go: find ./ -type f \( -iname \*.jpg -o -iname \*.jpeg -o -iname \*.png \) -exec mogrify -quality 90 -verbose -resize 1600x1600\> {} \; It's basically searching all files and subfolders for .jpg, .jpeg and .png files and resizing to no more than 1600px landscape/portrait whilst preserving aspect ratio (no cropping) and 90% image quality. I chose those sizes as the various links in galleries and lightboxes were loading the original file, not one of the WP resized ones, so now we can be fairly sure that we're loading <500kb of image maximum instead of sometimes 10mb+ (some folks have really nice cameras ? ). I'm sure @horst can probably tell me if that command could be better. I think mogrify is usually for a batch of files for example, whereas the find command is serving them up individually so convert might be more appropriate than mogrify, but this command iterates through the files quickly and only resizes which ones it needs to and is happily chugging away right now so I'm happy with it. One thing to note is that any resizing can be a bit CPU-heavy, so if you have the chance to do this on a local server first or out of "normal" hours for site visitors then that's recommended as the server may slow down for the duration.

Quick update! Thanks to your suggestion @Robin S, I could make it work without having to redirect to the child page. Here is the adjustments I came up with, I changed the action of the form to action='{$post->url}?submit_a_comment=1' Parent page template: <?php $form = $post->comments->getCommentForm([ 'className' => 'CommentFormCustom', ]); $formMarkup = " <form class='{form.class} discussions_message ' id='my-comment-form' action='{$post->url}?submit_a_comment=1' method='{form.method}' {form.attrs}> <div class='avatar'>"; // just added if(count($user->images)){ $imgUrl = $user->images->last()->url; } else{ $imgUrl = $user->url; } $formMarkup .= "<img src='{$imgUrl}' data-src='{$imgUrl}'>"; // end $formMarkup .= " </div> <p class='{cite.wrap.class}'> <label class='{label.class}'> <span class='{label.span.class}'>{cite.label}</span> <textarea name='{cite.input.name}' class='{cite.input.class}' required='required' value='{cite.input.value}' >{cite.input.value}</textarea> </label> </p> <p class='{email.wrap.class}'> <label class='{label.class}'> <span class='{label.span.class}'>{email.label}</span> <textarea name='{email.input.name}' class='{email.input.class}' required='required' value='{email.input.value}' >{email.input.value}</textarea> </label> </p> {if.website} <p class='{website.wrap.class}'> <label class='{label.class}'> <span class='{label.span.class}'>{website.label}</span> <input type='text' name='{website.input.name}' class='{website.input.class}' value='{website.input.value}' maxlength='255' /> </label> </p> {endif.website} {if.stars} <p class='{stars.wrap.class}' {stars.wrap.attrs}> <label class='{label.class}'> <span class='{label.span.class}'>{stars.label}</span> {stars.markup} </label> </p> {endif.stars} {if.honeypot} <p class='{honeypot.wrap.class}'> <label> <span>{honeypot.label}</span> <input type='text' name='{honeypot.input.name}' value='{honeypot.input.value}' size='3' /> </label> </p> {endif.honeypot} <p class='{text.wrap.class}'> <label class='{label.class}'> <textarea style='border: 1.5px solid !important;' name='text' class='{text.input.class} my-comment my-new-comment' required='required' rows='{text.input.rows}' cols='{text.input.cols}'>{text.input.value}</textarea> </label> </p> {if.notify} <p class='{notify.wrap.class}'> <label class='{notify.label.class}'> <span class='{notify.label.span.class}'>{notify.label}</span> </label> <label class='{notify.input.label.class}'> <input class='{notify.input.class}' type='radio' name='{notify.input.name}' checked='checked' value='{notify.input.off.value}' {notify.input.off.checked}/> {notify.input.off.label} </label> {if.notify.replies} <label class='{notify.input.label.class}'> <input class='{notify.input.class}' type='radio' name='{notify.input.name}' value='{notify.input.replies.value}' {notify.input.replies.checked}/> {notify.input.replies.label} </label> {endif.notify.replies} {if.notify.all} <label class='{notify.input.label.class}'> <input class='{notify.input.class}' type='radio' name='{notify.input.name}' value='{notify.input.all.value}' {notify.input.all.checked}/> {notify.input.all.label} </label> {endif.notify.all} </p> {endif.notify} <p class='{submit.wrap.class}'> <button type='submit' class='{submit.input.class} button' name='{submit.input.name}' value='{submit.input.value}'>Reply</button> {form.hidden.inputs} </p> </form> "; $form->markup('form', $formMarkup); $form->labels('submit', 'Submit Feedback'); $form->labels('notify', 'Email Me'); // form notifications $form->markup('notification', "<div class='uk-alert {class}'>{message}</div>"); $form->classes('success', 'uk-alert-success'); $form->classes('pending', 'uk-alert-warning'); $form->classes('error', 'uk-alert-danger'); echo $form->render(); ?> Child page template: <?php // Show the comment form echo $page->comments->renderForm(); // If the submit_a_comment URL parameter is not present then redirect to parent page // This must go after the form render so that comment submissions will be processed before redirecting if(!$input->get('submit_a_comment')) $session->redirect($page->parent->url); ?> Comments are now adding to the right child without redirecting! Thank you so much for your time and help. This community is amazing!

Go for it - just be aware that you don't have the originals afterwards of course. You've reminded me I also have a Craft site I can run this on, although the client does usually manually resize their own images it would be good to check.

I had not! ? Thanks! Let me read the module's readme and I might come back with questions ?

It turned 25GB into 11GB by the way. There's still a lot of photos in there ?

One other thing - I am also keeping a copy of the original uploads folder just in case. I've set max resolutions in various CMS' since 2001 and in later years you wonder why you ever set it as low as 800x800 for example ? This way I have the originals if I ever need them again, but I think for the content in question, 1600px max width/height should be absolutely fine. There will also likely be a write-up for this project - it's going to be a while longer though before it's ready.

Hi @Jan Fromm, This has now been fixed. Products or variants that are not enabled for selling cannot be added to the basket. However, please note that since Padloper does not involve itself with the frontend display of products, developers will need to exclude such non-enabled products from frontend display, if they wish to. For instance: <?php // please note the below will also find parent product of variants! // FIND non-enabled products and variants $nonEnabledProductsAndVariants = $padloper->find("template=product|variant,stock.enabled=0"); // FIND enabled products and variants $enabledProductsAndVariants = $padloper->find("template=product|variant,stock.enabled=1"); I also fixed a bug that allowed out-of-stock items to be added to the basket/cart. Please note that out-of-stock is only applicable to products/variants that track their inventory (Product Settings Tab) AND that don't allow overselling/backorders.

Thx for the quick and detailed answer ? Have you seen the new version? https://github.com/baumrock/rockmigrations#running-migrations What you describe is possible with a single file called /site/migrate.php (similar to /site/ready.php for hooks): https://github.com/baumrock/rockmigrations#quickstart No need for another module, no need for creating separate php files with php class notation for simple migration changes, no need for a CLI. Unless I'm missing something ?

You send you request to /scan without the ending slash. ProcessWire by default redirects to a url with an ending slash. And all parameters get lost during the redirect.

I was in the need for using this module together with background images too - but in the "classic" way without any components. I am using the famous Lazysizes JS Plugin for lazyloading the images. To create responsive background images with the PageImageSouce module I also included the lazysizes bgset extension So the code in my template file looks like this: <div class="img-title-wrapper lazyload" data-sizes="auto" data-bgset="<?php echo $image->size($imgFormat)->srcset() ?>"> /* your content */ </div> The wrapper element then gets it's height either via CSS (height: 100vh for a big introduction title image) or through the elements inside the container. Adjust the background image styles to your needs (e.g. background-size:cover).

Thx. The latest ProField Repeater Matrix has the option (input tab) to define the method for adding items. When you choose Images you get the overlay. By default, the image of the matrix type have the same name and is placed along with the type file location (for example: /site/templates/fields/modules_page/matrix_type.php => site/templates/fields/modules_page/matrix_type.svg). Preparing a good looking Image is just up to you then ?

Should have dug in deeper and taken a look. Sorry and thank you! Amazing! Love it.

just curious, how many of you like/work on https://alpinejs.dev/ ?

Quick update... Finally figured out to get React/NextJS to work with a basic (minimal field types to convert to JSON) PW site. Giving self a pat on the back when I discovered Svelte ? Svelte felt (I'm a poet & didn't know it ?) so much more like PW - JS, HTML & CSS with 'state management' and no shadow DOM. The only problem was routing. I'd spent far too long figuring out React/NextJS routing and Svelte offered no immediate solution. The old (like 2yrs) way of routing was called Sapper. Development on Sapper has ceased with all efforts now focussed on the new way, SvelteKit which is in pre-beta (? ). Anyhoo, went with SvelteKit and got it working. I've only scratched the surface on what's possible with React/NextJS and Svelte. Both offer Server Side Rendering (SSR) making the site SEO friendly & fast-loading. Given a choice, I'd choose Svelte every time. With both React/NextJS and Svelte using @Sebi's AppApi with customisation depending on the framework, I: created a home page that pulls the data from the PW home page created a 'slug' page that pulls the data from the PW page url and displays it in a component based on the PW page template as returned in the page JSON, and shows the correct route in the URL from a nav menu In both cases, the page layout is not a PW template but a conditional component file. Anyone else tried Svelte with PW? Your thoughts & comments welcome