Leaderboard

The master/main branch is now updated to version 3.0.225. Early next week I'll be adding a git tag for the version number as well. I usually like to merge dev to the master/main branch first, let it marinate for a day or two, and then tag it. That's because once we tag it, it triggers other services to pick it up and broadcast it. So letting it marinate for the weekend just adds a layer of comfort, for whatever silly reason. That's pretty much how I've always done it. When I did the merge, it reported 511 files changed, 76421 insertions(+), 23539 deletions(-), so there's quite a lot in this version. There's enough, that I'm going to need another week to document it all into a new blog post, which should be ready by this time next week. Our contributors list also continues to grow nicely with this new version. Thanks to all those that have submitted PRs, reported issues, and submitted feature requests. Big thanks to @matjazp in particular who has been helping a lot in identifying, testing, organizing and even coding the solutions for numerous issue reports. More details on this new version next week. Until then, thanks for reading and have a great weekend!

Never release on fridays! ?

I've often heard people say "It's hard to keep track" with all the updates to my modules. That's why I work on the DEV branch now in all of my modules for one month and then merge the changes into MAIN and create a new release that lists all new features and bug fixes. If you are interested you can sign up here: https://www.baumrock.com/rock-monthly/ ???

The KKP.LAW site has been a Site of the Week in Processwire Weekly in the past. For this reason I would like to share some insights. So I hope someone will get an inspiration and maybe others may provide idees how to improve my process. Development Setup Currently I build my projects with DDEV and upload them to the server using Github Actions. This way I can view and develop them locally and push them to live when I am done. I also have SCSS which I write to a src folder and is watched by DDEV and also by the GitHub action. So it is possible to change SCSS via a browser in GitHub and everything will be deployed automatically. The basics The KKP.LAW was the last project before I develop this orocess with modules. But the basics are almost the same. Years ago I used Typo3 for building websites. But the really complex update routine, the complicated configuration and the ongoing change how you should build templates made it necessary for me to look for a new CMS. So Wordpress was never an option and many others were also very complicated, so I looked at ProcessWire. After a second look I really understood the approach and built my first websites with Processwire. Very quickly I switched from Typo3 to Processwire. Implementing new features into existing websites was so easy with it. But one thing I really liked in Typo3 was the concept of pages and page content. On each page you can have multiple page contents. I.e. text or images or a mix of both. So I started to rebuild this logic in Processwire. I have templates for pages and templates for page contents. I use a page and pagecontent tag for the different types. On the PHP templates I just need to include them. So each page collects its page content children. All page contents can have a wrapper with some css classes. So it is easy to create layouts with this system. CSS Framework For this I use a kind of own CSS framework which is much more individual than big ones like Bootstrap. Personally I like the concept of 10 columns. So I have a 10 + 4 + 3 column system. Paddings are always added inside a column. So I dont need rows. All page content is inside a div tag with display: flex; flex-wrap: wrap;. The result is very clean and I get a slim file sizes. Components Later I changed the page content more into components. They are not as powerful as in modern JavaScript framework. It was more a logical step for me. In my eyes, the massive classes I would need to build responsive websites always displeased me. So more and more I changed my approach to design and configure everything in a component with maybe one or two classes and do the rest in CSS. But in some cases the old approach is still good. Current approach So I made some modules for my basic needs. The current module is very personal build arrount my needs and my DDEV configuration. Each component (or page content) has its own module. So it has some methods, PHP template and basic scss which I bind into my deployment process. I wrote a bash script that sets up ddev, installs Processwire and these modules. Also creates a GitHub brunch with the required action that can be synced into a live server. - So this is a basic overview of my approach. Hope it is an inspiration for you. Questions and suggestions are very welcome. See Website: KKP.LAW My own website: (also Processwire) Jens Weigel – Büro für Design

It's my own script. Basically I'm identifying every text to animate with a data-attribute. Then my JS starts by breaking each word into a div with overflow:hidden and each letter in a span shifted down and incremented css transition-delay. Then, an intersectionObserver detects when it comes into view and adds a css class that changes each letter's position back to zero and the transition-delay makes them appear one by one. It's a cool approach and practically a snap-on script that I can reuse (and have done so already) on other pages. It still has that error @netcarver pointed out, though. I also have something similar for the images that makes a fade-in reveal effect.

That's a glitch on my animation script that I still have to improve ? It's on my todo list

I don't understand what you are saying here. And it sounds totally contrary to what you say afterwards. RockFrontend's "addIf()" for adding single scripts depending on conditions is one thing, but replacing the whole markup is something totally different. If you are trying to do the latter you have two options. One is what you describe and make ProcessWire NOT use the _main.php file. Another option would be to be more explicit in _main.php and put something like this on top of the file: <?php if($page->template == 'foo') return $rockfrontend->render('my/custom/markupfile.[php|latte]'); ... // content of _main.php here that will be loaded for all templates except 'foo' Another concept that RockFrontend provides is the renderLayout() method. The concept is to put this in _main.php: <html> <head>...</head> <body> <?= $rockfrontend->renderLayout() ?> </body> </html> Which will tell RockFrontend to load /site/templates/layouts/default.php by default and load /site/templates/layouts/foo.php for all pages with template "foo". So you have lots of options ?

very helpful @Stefanowitsch thank you very much for pointing out those different conditions. Another awesome demonstration of Rockfrontend's capabilities ? In my case I spoke too soon and what I was actually attempting to do was to inject code into the _main.php <head> if I was on a certain template / page / etc. But because I am using the ProcessWire $config->urls->templates method to obtain the url for the script via php, I can't do that by loading an external.js file via AddIf … for example: <!-- threejs code --> <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script> <script type="importmap"> { "imports": { "three": "<?php echo $config->urls->templates?>scripts/build/three.module.js", "three/addons/": "<?php echo $config->urls->templates?>scripts/jsm/" } } </script> But then I came across a section of the Markup Regions in ProcessWire post which explained what I was attempting to do, and for me is a new discovery of ProcessWire ? So what I did was create a _main_webgl.php file and specify in my template to ignore _main.php and load this one instead. Maybe not the most elegant solution, but it is separating the logic nicely and allowing me to not have to load unnecessary scripts depending on the page / template. Very nice!

(funnily I just went through the same question regarding showing a custom font in a svg) If you want your svg to show the font when displaying it through an <img> tag you will need to have it embedded as a base64, as mentionned in your SO link. My take on what you want to achieve is something along the lines of what I described here: With transfonter, you could generate a .svg version of the font file you're using and then build the svg with the icon and module name using this php library. I haven’t tested it so I can’t vouch for it but I would try this way first.

Thx. Yeah sounds good. Regarding the text I was wondering if it is a good idea to have that as text rather than converted to paths. Usually I convert it to paths for maximum compatibility, but that would make things more complicated I guess. But I didn't do any research here, maybe there are some linux tools update, seems I could do that with inkscape: https://stackoverflow.com/questions/15203650/programmatically-convert-svg-shapes-to-paths-lineto-moveto Or maybe I can include the font file in my svg?? https://stackoverflow.com/questions/71060147/why-is-my-svg-file-not-using-my-font-file Any advice would be welcome ? Edit: transfonter is an interesting tool! https://transfonter.org/ --> ubuntu bold with letters A-Z and a-z results in an 13kb css file, wich sounds ok compared to the alternative of installing inkscape on my server and converting text to curves on save...

I tried, but it didn't worked (i am a frontend designer and know only html and the basics of php). Is it possible to post a simple example of a "add" button with no page reload ? Thanks

@heldercervantes Very nice. Perhaps a little more line height needed on .type-title, to stop the descenders in headlines getting cropped? (1.2 worked for me in Firefox)

You could create a template and page to output the settings page image and specify that URL in the theme setting. Simplification: if your settings page doesn't have a PHP template yet, you could use that one, or you could extend the existing one. With url segments, you could even pull different stuff from it (logo image, icons, disclaimer, ...). Code for settings template: <?php namespace ProcessWire; if($input->urlSegment(1) === 'logo') { wireSendFile($page->logoimage->filename, [ 'exit' => true ]); } Then just put /path/to/settings/page/logo/ into the logo image file field.

As there are already a few fans of HTMX here - just to let you know: htmx 1.9.3 has been released https://htmx.org/posts/2023-07-14-htmx-1-9-3-is-released/

Absolutely! Even their Twitter account is having fun right now and ThePrimeAgen is on board of course. https://twitter.com/htmx_org https://www.youtube.com/results?search_query=primeagen+htmx

On a sidenote: htmx is getting more and more attention. Recent example: It was the spotlight teaser of the last JavaScript Weekly newsletter.

They are on github first.

Indeed, I’ve been finding HTMX very useful indeed — and I was surprised to see that I’m several versions behind. I spent quite a while looking for the intervening release notes. I couldn’t find any at htmx.org, but they are available via UNPKG: https://unpkg.com/browse/htmx.org@1.9.3/CHANGELOG.md Looks like it’s time to upgrade! ?

but if you want to move a page content to a other page you need some extra modules. I guess it is a personal flavor how to do ?

On the template: (you see the module approch) getComponent gets all allowed page components, loads it template files, wraps it if needed. Every component has a wrapper builder where I can choose what css class it will use. this will wrap this component into <div class="hero"> <div class="heroinner"> {COMPONENT-CODE} </div> </div>

I've been using WireMailSmtp since ages and for some clients we have microsoft exchange 365 emails. Recently Microsoft annouced they are deprecating basic stmp authentication in favor of OAuth 2.0...is there a way to configure WireMailSmtp with this method?