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 ?

Since it seems that all irregular pagination use roads lead to this thread, I just wanted to point out that the following enables pagination for a regular PHP array (all the other examples I saw are for PageFiles or PageImages-type arrays). My context of use here is a search results screen where I needed to dump a PageArray out to process additional ranking criteria, resulting in an array named $listings below. $items_per_page = 10; $start = ($input->pageNum - 1) * $items_per_page; $total = count($listings); $listed = array_slice($listings, $start, $items_per_page); // Key difference $a = new PageArray(); $a->setDuplicateChecking(false); foreach($listed as $listing) $a->add(new Page()); $a->setTotal($total); $a->setLimit($items_per_page); $a->setStart($start); echo $a->renderPager(); If you get a complaint about PageArray, it's likely because you haven't declared the ProcessWire namespace in your template.

Inspired by this thread with a little nugget based on AOS by @benbyf to visually distinguish development systems from production ones, I wrote a small module that does the same and lets you adapt colors and text. Link to the github repo: AdminDevModeColors Version 0.0.1 is still very alpha and only tested on PW 3.0.124. Description This module lets you change the color for the top toolbar and add a small piece of text for development systems, so you are immediately you aren't working on production (and vice versa). The adaptions are made through pure CSS and applied if either the "Enable DEV mode" checkbox in the module's configuration is checked or the property $config->devMode is set to true in site/config.php. Works with Default, Reno and Uikit admin themes (though probably needs a lot of testing with different versions still). Since a screenshot says more than thousand words... Production system (unchanged): Dev system (Default admin theme): Dev system (Reno admin theme): Dev system (Uikit admin theme): Feel free to leave any feedback here and report any problems either in this thread or the github issue tracker.

Hey, so we all know about SEO and the importance of performance. Basically we do it, because if no one finds the website we just built, it´s frustrating. We all try to write clean markup, css and js code and most might have a webpack/gulp/whatever pipeline to minimize css&js. But when thinking about it, optimizing your pipeline might save you a few (hundreds) of kb, compared to loading an image with 1 mb that´s literally nothing and frankly just ridiculous. Don´t get me wrong, frontend pipelines are great and should be used, but let´s shift your "I will optimize the shit out of that 3 css lines" focus to something different: try to serve images as fast as possible, this is where the performance boost really happens. I´m no pro on processwire so far, but I built a very easy to use picture element, which some of you could find interesting: 1. the picture comes with 3 different sizes: one for mobile (keep in mind the double dpi, therefore width of 828px), one for tablet and one for desktop 2. the picture generates a webp version and the original file extension as a fallback 3. the filesize of each element is rendered within the "data" attribute 4. lazy loading(sooo important!!!) is done via the native 'loading="lazy"' attribute. Please try it out and see the difference ? I posted this so others can easily optimize their images, but I would also like to hear your suggestions in making it better. Maybe you could decrease the rendering time or maybe you have some easy improvements. Please let me know. Greetings from Austria! <picture> <source data="<?php echo($oElement->repeater_image->width(828)->webp->filesize);?>" media="(max-width: 414px)" srcset="<?php echo($oElement->repeater_image->width(828)->webp->url) ?> 2x" type="image/webp"> <source data="<?php echo($oElement->repeater_image->width(828)->filesize) ?>" media="(max-width: 414px)" srcset="<?php echo($oElement->repeater_image->width(828)->url) ?> 2x" type="image/<?php echo($oElement->repeater_image->ext)?>"> <source data="<?php echo($oElement->repeater_image->width(767)->webp->filesize) ?>" media="(min-width: 415) and (max-width: 767px)" srcset="<?php echo($oElement->repeater_image->width(767)->webp->url) ?> 2x" type="image/webp"> <source data="<?php echo($oElement->repeater_image->width(767)->filesize) ?>" media="(min-width: 415) and (max-width: 767px)" srcset="<?php echo($oElement->repeater_image->width(767)->url) ?> 2x" type="image/<?php echo($oElement->repeater_image->ext)?>"> <source data="<?php echo($oElement->repeater_image->webp->filesize) ?>" media="(min-width: 768px)" srcset="<?php echo($oElement->repeater_image->webp->url) ?>" type="image/webp"> <source data="<?php echo($oElement->repeater_image->filesize) ?>" media="(min-width: 768px)" srcset="<?php echo($oElement->repeater_image->url) ?>" type="image/<?php echo($oElement->repeater_image->ext)?>"> <img data="<?php echo($oElement->repeater_image->filesize) ?>" class="img-fluid" loading="lazy" src="<?php echo($oElement->repeater_image->url) ?>" alt="<?php echo($oElement->repeater_image->description) ?>" type="image/<?php echo($oElement->repeater_image->ext)?>"> </picture>

@bernhard, thanks with the latest version you provided it works now.

Rally nice work! The design is clean and futuristic and I love the text animations for the headlines or inside the menu. Kudos that this is all custom coded! Did you use some plugins for the animations or how did you approach it? Just asking because I was switching between aos.js and GSAP lately.

Really nice site, I like it, thanks for showing. Short notice: There seems to be a little glitch on mobile. Something is causing a minimal horizontal overflow. Can't investigate further cause I'm on mobile ?

I wish I could live and program in a world of "shoulds" but years of working in the WordPress ecosystem has cured me of holding free module developers to high expectations. I do agree that the module format should have either its own css and/or less asset folder, but I also take into consideration that adding LESS and AdminStyleUIKit features to PW is a very recent endeavor. It's one I support and would have certainly argued for, but in working with many old and new modules in the directory, there are a lot of abandoned modules that are still in production which don't necessarily conform to what has been built recently. It's worth discussing how modules should handle their assets - including scripts and styles - on the admin side. Maybe a new thread?

@maetmar I'm quite sure it's just a small thing and since I can't reproduce the issue on my end you could help me a lot in improving the module (for everybody). It would already help if you could provide the output of Debug::backtrace() for the file in question below the line with the $cache variable here: https://github.com/baumrock/RockFrontend/blob/71f8021c7333533d2e4e1753747a88648687ca03/RockFrontend.module.php#L1400

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!

Nice, thx! There's also a version with more control: https://9elements.github.io/fancy-border-radius/full-control.html

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/

ProcessWire does not use a favicon in the admin backend. I usually insert a PNG-based one of the ProcessWire P logo to differentiate the frontend and backend of a site, however I upgraded my technique to use an SVG-based one, which has the added benefit of being able to quickly set the fill color. This is a nice trick, especially if you're working in multiple admin backends of different sites and want to be able to quickly identify which tab belongs to which site by the ProcessWire favicon color alone. Insert this in /site/templates/admin.php: wire('adminTheme')->addExtraMarkup('head', "<link type=\"image/svg+xml\" rel=\"shortcut icon\" href=\"data:image/svg+xml,%3Csvg width='256' height='256' viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#EB1D61' fill-rule='nonzero' d='M234.02346,56.2065308 C226.258185,44.611679 213.340949,31.3634673 200.370381,22.7873303 C173.426584,4.33370224 142.216153,-2.21573572 114.611028,0.642976614 C85.8219124,3.7470262 61.1714319,14.5951995 40.9049183,32.6861551 C22.1317268,49.454423 9.73715371,69.9560838 4.27586162,89.5083961 C-1.24942998,109.060708 -0.513435538,127.162331 1.45988289,140.794549 C3.53986718,154.629436 10.4304818,172.037714 10.4304818,172.037714 C11.8384712,175.376434 13.7904564,176.731123 14.8037821,177.296465 C19.8384108,180.048509 28.105015,177.627137 34.4516337,170.50169 C34.7716313,170.06435 34.9422967,169.45634 34.7716313,168.944332 C33.000978,162.128223 32.3609828,156.997474 31.7316543,153.029411 C30.2916651,145.178619 29.65167,132.026409 30.6116627,119.866214 C31.0916591,113.284776 32.3716494,106.244663 34.6116325,98.8632122 C38.9422665,84.281646 48.0728642,69.0600695 62.3447564,56.4092007 C77.715307,42.7876498 97.4271581,34.3715154 116.16835,32.1954806 C122.738967,31.4061347 135.240206,30.6487893 150.290759,34.3608485 C153.501401,35.1608613 167.282631,38.7555854 182.023853,48.7397449 C192.754438,56.0358614 201.394373,65.0386719 207.346328,73.9454809 C213.404949,82.44695 219.986232,96.783179 221.916885,107.279347 C224.647531,119.226204 224.647531,131.88774 222.706212,144.218603 C220.30623,156.570801 215.975596,168.581659 209.24498,179.152495 C204.605015,187.344626 194.983755,198.171465 183.613174,206.299595 C173.362585,213.510377 161.66134,218.715793 149.650764,221.595839 C143.57081,223.035862 137.469522,223.95321 131.218903,224.15588 C125.661612,224.32655 118.291001,224.15588 113.117706,223.2812 C105.427098,222.054513 103.82711,220.091815 102.067123,217.425106 C102.067123,217.425106 100.840466,215.505075 100.499135,210.36366 C100.616467,163.376243 100.595134,175.920443 100.595134,151.525387 C100.595134,144.63461 100.371136,138.383844 100.435135,132.709086 C100.755133,123.396937 101.54446,116.996835 108.20041,110.063391 C113.01104,104.953976 119.741656,101.87126 127.154934,101.87126 C129.405583,101.87126 137.160191,101.977929 143.97614,107.642019 C151.282751,113.74345 152.509409,122.084916 152.797407,124.314285 C154.461394,137.359827 145.842792,147.077316 142.536151,149.541355 C138.440182,152.613404 134.760209,154.106761 132.274895,154.981442 C126.984268,156.752137 121.170979,157.264145 115.944352,156.922806 C115.144358,156.869472 114.41903,157.392147 114.259031,158.19216 L112.499044,167.322972 C110.781724,174.256417 114.632361,176.795124 116.872345,177.691138 C124.029624,179.899173 130.376243,180.816521 137.896186,180.251179 C149.426765,179.440499 160.797346,174.896427 170.450607,165.893616 C178.663878,158.085492 183.346509,148.453338 184.946497,137.679832 C186.546485,125.722308 184.466501,112.847436 179.015875,101.945928 C173.021254,89.9244028 162.674665,79.8869091 149.042768,74.393488 C135.272206,68.9747348 124.317622,68.7827317 110.195062,72.3881226 L110.035063,72.4414568 C100.861799,75.5988406 93.0111915,79.4922361 84.8405865,87.9297042 C79.2406288,93.7537973 74.6539968,100.804577 71.8593512,108.762037 C69.0860388,116.783498 68.3393778,122.767594 68.2113788,132.069076 C68.0407134,138.959853 68.3713775,145.359955 68.3713775,151.354717 L68.3713775,190.832681 C68.3713775,203.462216 67.9447141,205.648918 68.3713775,212.145022 C68.6060424,216.454424 69.2033713,221.329168 71.091357,226.566585 C73.0326757,232.337344 77.1073116,238.257439 79.9019571,240.988149 C83.8165942,245.158882 88.7978899,248.508269 93.693853,250.588302 C104.904435,255.569715 120.125653,256.359061 132.466893,255.879054 C140.637498,255.569715 148.85077,254.439031 156.904042,252.529667 C173.010587,248.700272 188.477137,241.734828 202.077034,232.070673 C216.658258,221.798509 229.330162,207.782285 236.327442,195.878095 C245.298041,181.733869 251.100664,165.861616 254.119308,149.552022 C256.839287,133.210428 256.711288,116.452827 253.063316,100.356569 C250.183338,85.4229975 242.492729,69.0387358 233.61813,55.8118579 L234.02346,56.2065308 Z'%3E%3C/path%3E%3C/svg%3E%0A\">"); Replace the fill color (#EB1D61 -- the PW pink color) with your own brand color if needed. Note: this is not tested on Safari (doesn't support svg favicons) so make sure to implement a proper fallback if that's important to you.

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!

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!

Hey, it seems to me that there is a wrong thinking or understanding to the whole subject that leads to the confusion. (?) If your comparison are between the compressed image from a third party tool, e.g. photoshop or others, and ONLY the webP output from GD or imagick, then this is comparing apples with bananas. If that's the fact, please read on. If that's not true, please excuse my post and my misunderstanding and forget / don't read the rest of the post. ? EDIT: maybe of additional interest:

Not sure, but it seems like it might be further away: https://caniuse.com/jpegxl I feel like it's the mid 2000's again and I am waiting on browser support for SVG!

Check for the id of the page. It won't have one before the page is saved.

Assuming I understand the need correctly, what I usually do add this to the <head> section of the main markup include: <head> <!-- all your typical <head> stuff --> <?php $file = "styles/$page->template.css"; if(is_file($config->paths->templates . $file)) { echo "<link rel='stylesheet' type='text/css' href='{$config->urls->templates}$file' />"; } $file = "scripts/$page->template.js"; if(is_file($config->paths->templates . $file)) { echo "<script src='{$config->urls->templates}$file'></script>"; } ?> </head> Using this method, if you have a template named 'product', then it could have dedicated CSS and JS files in /site/templates/styles/product.css and /site/templates/scripts/product.js, when you need it. The nice thing about this is that it's just a system rather than hard coded file. If you determine you need something unique for the CSS (or JS) on pages using some template, the you can just create the CSS (or JS) file and have it start working automatically. You can take this further too. For instance, you could use the same technique with page IDs to assign custom CSS/JS files to specific pages.