Leaderboard

This week the ProcessWire core version on the dev branch has been bumped to 3.0.207. Relative to the previous version, there are several minor issue resolutions and improvements (commit log). I also recommend this version if you are testing out the InputfieldTinyMCE module, which will likely be merged into the core near the end of the year. Speaking of that module, it also received updates this week with the biggest being the addition of improved lazy loading modules for the Normal (non-inline) editor. Rich text editors are one of the most heavyweight input types you can use, so not having to initialize them all during page load is a major performance benefit, especially when you've got multiple fields using them at the same time. With these new lazy-loading modes, the Normal editor has many of the benefits of the Inline editor in terms of page editor performance, but without any of the drawbacks. The new default setting is to "load editor when it becomes visible". This ensures that resources aren't spent loading editors that are hidden behind editor tabs, fieldsets or language tabs, until they are needed. The other lazy-loading option ("load editor when clicked") is the most aggressive lazy loading option. It shows a preview of the editor content but doesn't actually load TinyMCE until you click the preview to edit it. Lastly, I've also been working on a new module (WireSitemapXML) that generates sitemap.xml output, but in a way that I think is more configurable than the other modules available for it. It also supports multi-language sitemaps, URL segments, various hooks and more. While I've got it in use already, I'm going to spend more time on the documentation before releasing it. That's all for this week, have a great weekend!

Hi everyone, I would like to showcase a small micro site of own studio - 7studio.eu Personally I don't like to design anything for myself (as most projects lands in the trash or on the shelf), but I needed something new and simple quite fast before building a fully fledged portfolio, so I thought to built a small "starting point". This is more like a work in progress, than a finished site, it contains only basic info, screenshots of some of the latest works and that's it - as for now ? Technically, on the front end we have a simple custom HTML5/CSS3/JS code, on the back end site uses only core PW features (there is more features already built in on both backend and frontend but not published yet). Any comments, suggestions are welcome, hope you will like it and have a great weekend everyone! P.s. Sorry - there is no english translation yet, PW multilingual features will land in the upcomming weeks ?

ProcessWire Docker Image Dockerized Processwire installation and development enviroment Local enviroment with MariaDB container included Mount local filesystem Processwire versions VSCode Itelliphense configuration xDebug preconfigured Opcache + JIT ready (xDebug must be disabled) Installation & usage Development enviroment installation Build using local script $ git clone https://github.com/laikmosh/docker-processwire.git $ cd docker-processwire $ docker-compose up Install as usual, no extra configuration is needed. There is a config-dev.php file in the ./site/ folder, this file will load by default when running locally, but is in the .dockerignore, so it wont be included at image building time. Custom php.ini settings can be set at: /Processwire/scripts/php/php.ini *Image must be rebuilt for changes on php.ini to take effect Development enviroment usage By default the ProcessWire installer will load the `.env` configuration. Configure .env file for project and DB settings, default database credentials are: Database: {COMPOSE_PROJECT_NAME} User: admin Password: password Server: database Port: 3306 Editable files and templates will be installed to the ./site/ folder. Processwire documentation ProcessWire ProcessWire Repo ProcessWire Documentation

Hi @snck, Thanks for the feedback and the great example! Unfortunately the issue you've raised is more of an issue with how Pageimage::render() is implemented. Adding 'width' or 'height' options is interpreted as a request to resize the Pageimage, which is not what we want in PageimageSource::render(). The default markup does not include width and height attributes, so the only way to add them without resizing the image is to provide them in a specified markup string. I have a hook in an internal development module which sets a default markup string with these attributes: <?php // Pageimage:render $this->addHookBefore('Pageimage::render', function(HookEvent $event) { $markup = $event->arguments(0); $options = $event->arguments(1); if(!is_string($markup)) { $options = $markup; $markup = '<img src="{url}" alt="{alt}" width="{width}" height="{height}">'; } $event->arguments(0, $markup); $event->arguments(1, $options); }); This means I can generally call render() without any options. If your example is something you are doing repeatedly, you could utilise a similar strategy in site/ready.php: <?php // /site/ready.php $wire->addHookBefore('Pageimage::render', function(HookEvent $event) { $markup = $event->arguments(0); $options = $event->arguments(1); if(!is_string($markup)) $options = $markup; if($options['masonry'] ?? false) { // a custom option $img = $event->object; $thumb = $img->width(480); $markup = "<img src='$thumb->url' alt='{alt}' class='{class}' width='$thumb->width' height='$thumb->height'>"; $options = array_merge([ 'picture' => true, 'srcset' => [360, 480, 640, 800], 'sizes' => '(max-width: 579px) calc(100vw - (2 * 34px)), (min-width: 580px) and (max-width: 767px) calc(50vw - (1.5 * 34px)), (min-width: 768px) and (max-width: 1199px) calc(33.3333vw - (1.33 * 34px)), (min-width: 1200px) and (max-width: 1499px) calc(25vw - (1.25 * 34px)), (min-width: 1500px) calc(20vw - (1.2 * 34px))', 'class' => 'teaser-img proportional', 'alt' => $img->description, ], $options); } $event->arguments(0, $markup); $event->arguments(1, $options); }); // In your code $img->render([ 'masonry' => true, 'class' => 'overriding-the-default-class', 'alt' => __('Overriding the default alt text'), ]); // Not tested!!! Cheers, Chris

If you're just after making your image a wonky shape then you can probably just use some fancy css border radius values. Here's a handy looking site for generating the code that looks promising: https://9elements.github.io/fancy-border-radius/

Amazing work! I really like the design!

@wbmnfktr Thanks!

Super clean!

It did! I got it to run with two custom fields in the order-template. These are populated with a hook in __orderSaved and then shown at checkout-confirmation and on the invoice. Thanks again for your help, @kongondo!

@bernhard Imho modifiers like 2x should not be necessary at all. It took me quite some time and testing to wrap my head around responsive images and my experiments with the current browsers showed that whenever my sizes attribute was accurate, the browser chose the closest image resolution from the sourceset taking pixel density of the screen into account automatically. This is a (rather complex) example for my usage of PageimageSource on a page with a masonry style layout that can have from 1 to 5 columns and the sizes also take padding etc. into account (which might be overkill): $img_markup = $img->render([ 'picture' => true, 'srcset' => ['360', '480', '640', '800'], 'sizes' => '(max-width: 579px) calc(100vw - (2 * 34px)), (min-width: 580px) and (max-width: 767px) calc(50vw - (1.5 * 34px)), (min-width: 768px) and (max-width: 1199px) calc(33.3333vw - (1.33 * 34px)), (min-width: 1200px) and (max-width: 1499px) calc(25vw - (1.25 * 34px)), (min-width: 1500px) calc(20vw - (1.2 * 34px))', 'class' => 'teaser-img proportional', 'alt' => $img->description, 'markup' => "<img src='{$img->width(480)->url}' alt='{alt}' class='{class}' width='".$img->width(480)->width."' height='".$img->width(480)->height."'>" ]); Output: <picture> <source srcset="/site/assets/files/1200/1_klimanagepasster_wohnunsgbau.360x0-srcset.webp 360w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.480x0-srcset.webp 480w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.640x0-srcset.webp 640w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.800x0-srcset.webp 800w" sizes="(max-width: 579px) calc(100vw - (2 * 34px)), (min-width: 580px) and (max-width: 767px) calc(50vw - (1.5 * 34px)), (min-width: 768px) and (max-width: 1199px) calc(33.3333vw - (1.33 * 34px)), (min-width: 1200px) and (max-width: 1499px) calc(25vw - (1.25 * 34px)), (min-width: 1500px) calc(20vw - (1.2 * 34px))" type="image/webp"> <source srcset="/site/assets/files/1200/1_klimanagepasster_wohnunsgbau.360x0-srcset.jpg 360w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.480x0-srcset.jpg 480w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.640x0-srcset.jpg 640w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.800x0-srcset.jpg 800w" sizes="(max-width: 579px) calc(100vw - (2 * 34px)), (min-width: 580px) and (max-width: 767px) calc(50vw - (1.5 * 34px)), (min-width: 768px) and (max-width: 1199px) calc(33.3333vw - (1.33 * 34px)), (min-width: 1200px) and (max-width: 1499px) calc(25vw - (1.25 * 34px)), (min-width: 1500px) calc(20vw - (1.2 * 34px))" type="image/jpeg"> <img src="/site/assets/files/1200/1_klimanagepasster_wohnunsgbau.480x0.jpg" alt="Klimanagepasster Wohnunsgbau" class="teaser-img proportional" width="480" height="282" loading="lazy"> </picture> @nbcommunication Great module, I like it a lot! Nevertheless my example also shows a little incovenience I experienced when using PageimageSource: I need to output width and height attributes for my img tag and using the markup option (as shown above) was the only way to accomplish this. Using the height and width options of the render method rendered the srcset useless (all the same sizes). Maybe you could implement an option that outputs the size of the first entry from the srcset as width and height attributes of the img? Especially when using lazyloading the width and height attributes serve as proportional placeholders and prevent layout shifts. Cheers, Flo

@Ivan Gretsky Absolutely, that would be great.

@Mats, would you allow someone to take it over? We need this and looking for a way to make it maintainable.

Hello there! I recently updated my own website - I am a frontend developer living in the northern part of germany. https://www.thumann-media.de The old design has been online since five years (time flies...) and I thought that it was time to make things a bit flashier and include a better showcase of my web projects to give the user a more detailed description of the project features. It's a classic one pager design just for the sake of keeping things as short and simple as possible (I hope the image fits inside this thread). The new version of my site includes a "portolio section" where users get a sneak preview of each project I've been working on recently. It features nice fade-in-out animations powered by aos.js (animate on scroll). Also new is that every project gets a dedicated subpage where I describe some of the unique features that this website offers: I like to have some eye-catchers. I always used the animated wave theme on my website, so why not include a message in a bottle? The animation of the bottle is done via the awesome GSAP animation engine (https://greensock.com/gsap/). This is a super powerful library and I just started diving into the possibilities of this one. Tech Talk: Some of the things I used: - ProFields used for this one (repeater matrix, combo) - Frontend framework is Bootstrap 5. I had a hard time of deciding between Bootstrap and UIKit as my new go-to framework (I am bit biased though because I've been always using bootstrap since version 2). But the grid system alone makes bootstrap so flexible and powerful for me, so I will stick with it for another 10 years I think... - https://github.com/nbcommunication/PageimageSource for image srcsets with webp support - Ajax driven contact form with bootstraps frontend validation - AIOM+ for compressing the assets (CSS and JS) https://github.com/matjazpotocnik/ProcessWire-AIOM-All-In-One-Minify - SEO Maestro - WireMail SMTP AOS.js vs GSAP Which animation library you should use? I discovered the GSAP library a bit too late in the development process, tough. So I am still using aos.js for some animations. AOS has a super small footprint considering its filesize (14 kb, minified) and is super easy to use and super reliable. Whereas GSAP is quite large (71kb, minified) and if you want to make use of scroll triggers you have to include a second library which adds another 40kb. AOS has lots of nice animations which come out of the box. GSAP does not offer this, you have to program those transitions yourself. So you need to spent some time, reading the docs and looking for tutorials! GSAP can do all that AOS can and beyond. If you want to have full control over everything I would advice you to give it a try. So that's all for now. I wish all of you a great weekend!

This week I've worked through a few minor issue reports in both the core (ProcessWire) and InputfieldTinyMCE repositories. In addition, a new version of InputfieldTinyMCE was released that includes various improvements. We'll likely go through a few minor versions of this module before it is added to the core. I recommend downloading the latest posted version (6.0.3). Thanks to all that have been helping to test and report issues as they come up. I'm going to give the core another week or so of updates before we bump to the next version there. If you've recently launched any new sites, please add them to our sites directory at processwire.com/sites/submit/ when you have a moment. And if you aren't already subscribed to the ProcessWire Weekly updates email be sure to subscribe. Thanks and have a great weekend!

Hi @Jan Fromm. Glad it worked! Yes, you will need a custom field. Customers do not have their own template You would need to add the field to the order template itself (padloper-order). Please see Demo 2. It explains how you can do this. Good idea. But there are alternatives with respect to the Notes feature. Also see the caveats below. Apologies. Documentation is still lacking. Notes are stored in the field padloper_notes. This field is used in the template padloper-order. Padloper notes are a type of WireArray. You have access to all the methods of WireArray. Back to notes... Caveats Dedicated Text or Custom Field OR Notes Given that padloper_notes can take multiple notes and given that some of these are generated programmatically, using it to save a very specific note as described in your case might not be the better approach. For instance, you would need to search the WireArray of Notes for your 'reverse charges hint note' before you can display it on their invoice. Searching is not a big deal as you would be searching the WireArray in-memory, however, you will need some key words to match the note you are looking for amongst the order's other notes. An alternative is to add and use a dedicated text field in the order's template similar to the customer's VAT number above. A third alternative is to create your own custom field to store both notes and VAT numbers. Just a few thoughts. If you want to add a note using the API, it is quite simple as shown below. This example assumes you are doing this via a Hook. <?php namespace ProcessWire; # CONTENT OF A HOOK METHOD # /* if hooking $this->addHookAfter('PadloperProcessOrder::orderSaved', null, 'nameOfYourHookFunction'); */ // Retrieve argument by name /** @var Page $orderPage */ $orderPage = $event->arguments('orderPage'); $orderNoteText = "The text of my note. This customer has a VAT..."; # @note: this method will add tje created and modified times for you # you can add your user ID if you want, as the 3rd argument to this method /** @var WireData $note */ $note = $padloper->buildNote($orderNoteText,'admin'); $orderPage->of(false); // add the $note to the order page $orderPage->padloper_notes->add($note); // save the page $orderPage->save('padloper_notes'); # --------- OR ------------- // $notes = $orderPage->padloper_notes; // $notes->add($note); // $orderPage->setAndSave('padloper_notes', $notes); Method to Hook Usually hooking into __orderSaved would be fine. However, this method will be called every time the order is amended during the payment process. For instance, a customer can go to checkout and enter their details. This will cause an order to be created. Whilst in the order confirmation/payment page, the customer could decide to amend their shopping cart and subsequently head to the checkout. Since we already have an order created, it won't be recreated, however, it will be amended if needed, hence orderSaved() will be called again. This might mean your note would be created multiple times. You might not want this. You could always check if such a note exists for the given order and amend it if necessary. To avoid this, it could be better to hook into the PadloperProcessOrder::sendConfirmation() method instead as shown below. This method will be called only once, when the order checkout processing is complete. <?php namespace ProcessWire; # CONTENT OF A HOOK METHOD # /* if hooking $this->addHookAfter('PadloperProcessOrder::sendConfirmation', null, 'nameOfYourHookFunction'); */ $padloper = wire('padloper'); // @NOTE: Retrieve argument by name <- won't work since argument value is Null // instead, we get the orderPage from the session /** @var Page $orderPage */ $orderPage = $padloper->getOrderPage(); // ------------- $orderNoteText = "The text of my note if sendConfirmation() Hook. This customer has a VAT..."; # @note: this method will add the created and modified times for you # you can add your user ID if you want, as the 3rd argument to this method /** @var WireData $note */ $note = $padloper->buildNote($orderNoteText, 'admin'); $orderPage->of(false); // add the $note to the order page $orderPage->padloper_notes->add($note); // save the page $orderPage->save('padloper_notes'); Hope this helps!

I do use Project Manager already and it's definitely a must have extension. Cool. Whilst we're sharing tips though - on a Mac you can set up a Quick Action in Automater to open a folder in VS Code: the command I've got in that Quick Action is open -n -b "com.microsoft.VSCode" --args "$*" On my Linux box I'm using Dolphin on KDE and get offered the option to 'Open with VSCode' when I right click on a folder ... I think thats just happens by default; I don't remember ever setting that up.

https://methodsanalytics.co.uk/ What makes this project cool: We integrated an impossible geometry concept using 3D, Three.JS - Shown in main concept and used for Error 404 concept. We allow the client to create impossible geomerty in the ProcessWire CMS. We created the 3D editor which loads in with a process module. Custom front-end design and UI and full content management across evey aspect of the site. Modular system for page content providing maximum flexibility on page construction. Health check feature looking for broken links and lorem ipsum, page scanning tool. SEO module with global editing section across all pages. Global shared content modules. Methods-Analytics.mp4

Like in recent weeks past, the primary focus this week in core development was working through the queue of older issue reports. Relative to 3.0.128, ProcessWire 3.0.129 contains 17 commits over 1 week, most of which are focused on resolving and closing out older issue reports. However, there have also been a few very useful additions too, and I’m going to cover them in a blog post next week. In terms of our issues repository, we are now down to 65 open issues and 777 closed (the closed number is a total over the life of this repo). If we subtract issues that are tagged as being fixed, not a bug or ready to close, we’re around 55 open issue reports (give or take a couple depending on when we check). Which is to say, there’s a lot of great progress here. And many of the remaining issues are minor things that might only affect one person, though still important nonetheless. Thanks to everyone that’s helping figure things out (such as Toutouwai, Matjazpotocnik, Netcarver and others), your help is greatly appreciated. Just now I also released a new version of ProMailer (v7) which accommodates many of the recent feature requests and fixes a few minor issues as well. There has been a lot of enthusiasm for ProMailer, pleasantly more than expected—thanks for your interest and support. Here’s the changelog for the latest version (v7) below. There is also more good stuff in the works for v8 as well. Changed subscribers list interface to use tabs. Added ability to remove all subscribers from a list. Added ability to remove filtered subscribers from a list (matching find query). Added ability to import subscribers from another list (creating a merged list). Added support for single, multi-select and checkbox custom fields. Added support for PW 3.0.129+ core WireMail blacklist (more details in next week’s blog post). Added several new options for custom fields (see new custom fields reference). Added documentation for conditional placeholders. Split the rather large ProcessProMailer.module into separate files/classes. Fix some display issues in AdminThemeDefault and AdminThemeReno. Various minor bug fixes and other minor tweaks, additions and improvements. Thanks for reading this quick update and hope that you have a great weekend.