Leaderboard

This week we've had a mixture of core updates and more work on the PageAutosave/LivePreview module. In the core we have mostly maintenance updates and issue resolutions. I'm not going to bump the version number this week as I'd like to get a bit more added to this version first. One feature request that appears in the core this week is the ability to specify colors for RepeaterMatrix item types (idea from @Ivan Gretsky). If you have any version of RepeaterMatrix and you use the current core dev branch, you can specify the background color for any repeater item type by placing a color hex code in the repeater type label (like at the end of it, but wherever). For instance, typing in #777777 (or just #777) would make the repeater items of that type have a grey background rather than the default color background. Though whatever color you choose, note that the text color is white, so don't choose too light of a color. (The hex color code is of course removed from the item labels.) The PageAutosave and LivePreview module also got several updates this week, bringing it that much closer to being production ready: Added support for automatic detection of best placement for live preview window position based on available space. It will choose the correct location and size either to the right, left, above or below your page editor window. Added support for remembering live preview window position in a cookie. So if you setup your preferred layout for editor window and live preview window, ProcessWire will continue to use it. Added a new option to support automatic replacement of individual page field values without having to add your own `pw-value-*` classes. Meaning, you can now gain the benefit of field-value updates in your live preview without PW having to re-render the page. This applies primarily to text-based fields (title, body, etc.) that are part of the page being viewed. LivePreview editor and preview windows now talk to each other with JS rather than use SSE/streaming. I found that it just works more reliably that way, puts less load on the server, and [to my surprise] also seems to be faster. The SSE option is still there in the module config, but it's no longer the default. The only time where I think SSE might be preferable is if you want to monitor changes made to the page from outside of the page editor (like from the API) in a live preview fashion, as the SSE option will pick those up too. In addition to the above, numerous minor bug fixes, improvements and optimizations were added. If you want to grab this new version (which is still a development/testing version), it's posted in the ProDrafts, ProDevTools and ProFields boards. There's more to cover with this module still. I've been so focused on it that I haven't yet started working with htmx. Though I did spend quite a bit of time in the docs and it looks amazing. From what I understand as it relates to this module, htmx could bring a lot of greatness to the front-end preview window, so I'm anxious to get into that, and even more excited to explore the possibilities it opens elsewhere in ProcessWire. Also, how awesome is it that the author of htmx stopped by to say hello and answer questions here in the forums, that made my day — big thanks to @totally not an htmx shill for joining the discussion, I hope I'll have some good questions before long too. Thanks for reading and have a great weekend!

Generally that's correct, htmx.onLoad() replaces the standard jQuery initalizer. Only real trick is that you initialize stuff in the content passed in to the onLoad() callback, rather than initializing the whole document like you do normally in jquery: Note that the query selector is run against the newly inserted `content` element, rather than globally, so you can initialize the library just for the new content that has been added to the DOM (and avoid accidental double-initialization of things.) Alternatives are: using alpine to init the element on load using hyperscript to init the element on load The first one is sane, but not how I would do it unless I already had alpine in my code base and I was comfortable with it. The second one is insane and not recommended, but I do love hyperscript.

@ryan Autosave is very usefull feaature, but in some sceanrios it would be great to have shortcut key (Ctrl+S) to force page save with saving of scroll positon. Maybe it's possible to implement it, while you are in thisfield?

hi, my name is carson, and I created htmx and, since we're here, hyperscript.org (for lunatics only)

Add Image URLs A module for ProcessWire CMS/CMF. Allows images/files to be added to Image/File fields by pasting URLs or using the API. Installation Install the Add Image URLs module. Configuration You can add MIME type > file extension mappings in the module config. These mappings are used when validating URLs to files that do not have file extensions. Usage A "Paste URLs" button will be added to all Image and File fields. Use the button to show a textarea where URLs may be pasted, one per line. Images/files are added when the page is saved. A Pagefiles::addFromUrl method is also added to the API to achieve the same result. The argument of this method is expected to be either: a URL: "https://domain.com/image.jpg" an array of URLs: ["https://domain.com/image1.jpg", "https://domain.com/image2.jpg"] Example: // Get unformatted value of File/Image field to be sure that it's an instance of Pagefiles $page->getUnformatted('file_field')->addFromUrl("https://domain.com/path-to-file.ext"); // No need to call $page->save() as it's already done in the method Should you have an issue using the method, please have a look at the "errors" log to check if something was wrong with your URL(s). WebP conversion The core InputfieldImage does not support images in WebP format. But if you have the WebP To Jpg module installed (v0.2.0 or newer) then any WebP images you add via Add Image URLs will be automatically converted to JPG format. https://github.com/Toutouwai/AddImageUrls https://modules.processwire.com/modules/add-image-urls/

Unlike the Integer input type, Decimal doesn’t allow for a default value. I’d love to see this added. I’m working on a mini project where this would come in really handy. The site admins would have all 7 fields pre-populated and they can then adjust as needed.

Thanks to @monollonom in v0.2.5 you can now use the module to add files/images to fields using the API. From the updated readme: A addFromUrl method is also added to the API to achieve the same result. The argument of this method is expected to be either: a URL: "https://domain.com/image.jpg" an array of URLs: ["https://domain.com/image1.jpg", "https://domain.com/image2.jpg"] Example: $of = $page->of(); $page->of(false); $page->file_field->addFromUrl("https://domain.com/path-to-file.ext"); // No need to call $page->save() as it's already done in the method $page->of($of); Should you have an issue using the method, please have a look at the "errors" log to check if something was wrong with your URL(s).

More info on this suggestion: https://en.wikipedia.org/wiki/Post/Redirect/Get

Thanks for the reminder. Just in time a customer of mine asked for a solution for a "mini-shop" on his website. This seems like the perfect opportunity to help you with some testing. Hopefully I'm not to late for the party ?

I'd tried, but it doesn't work out for me. Don't remember where the exact problem was. In the end I decided to not compress or cache the template, which is responsible for the output of the css file.

Sorry @DV-JF I can't be sure as I don't use ProCache. I can't imagine why it would, but I just can't say for sure. If there was a problem, I guess nonces could be replaced by URLs instead. Naturally, you'd want to make sure your CSP settings are suitable for your site or the devtools will quickly fill with lots of red :)

2021 update: bit easier, better security, no warnings about using <meta http-equiv="Content-Security-Policy">. Rather than rely on <meta http-equiv="Content-Security-Policy"> I have tweaked things a little. Bit more secure, bit easier to do and added nonce function as well to further lock down script-src. If we remove all CSP from htaccess we can define everything in one place and set header() with php instead, right before <!DOCTYPE html> I find it cleaner and easier to customize that way. Allows as much logic and conditional loading as you need. For example: <?php if ($user->isGuest()): $loadMap = $page->name === "map"; $hasMapImgs = ($loadMap) ? " https://*.googleapis.com https://maps.gstatic.com https://*.ggpht.com" : ""; $hasMapStyles = ($loadMap) ? " 'unsafe-inline' https://fonts.googleapis.com" : ""; $cspImgSrc = " img-src 'self' https://www.google-analytics.com data: 'self'" . $hasMapImgs . ";"; $cspStyleSrc = " style-src 'self'" . $hasMapStyles . ";"; $cspCond = $cspImgSrc.$cspStyleSrc; function generateRandomString($length = 25) { $characters = '0123456789'; $charactersLength = strlen($characters); $randomString = ''; for ($i = 0; $i < $length; $i++) { $randomString .= $characters[rand(0, $charactersLength - 1)]; } return $randomString; } $nonce = generateRandomString(35); $csp = "Content-Security-Policy: base-uri 'self'; frame-ancestors 'self'; default-src 'none'; child-src 'self'; manifest-src 'self'; form-action 'self'; connect-src 'self' https://www.google-analytics.com https://maps.googleapis.com; font-src 'self' data: https://fonts.gstatic.com; frame-src 'self' https://www.youtube.com; script-src 'self' https: 'unsafe-inline' 'nonce-" . $nonce . "' 'strict-dynamic';" . $cspCond ; header($csp); ?> <?php endif; ?> <!DOCTYPE html> https://observatory.mozilla.org/analyze/www.alfresco-bar-bistro.com.au

I would love to test as I am sure many others would, but I don't have time to add value at the moment. I will be purchasing as soon as it is released however. Happy bug hunting people.

Hi I get a fatal error when I click on "Debugger" in module settings page. Return value of SearchEngine\Debugger::getWords() must be of the type array, null returned File: .../modules/SearchEngine/lib/Debugger.php:599 Sorry I just update the module and I resolved it with the 0.30.3 version. have a nice day

I am closing the expressions of interest today folks. Final chance to register, otherwise you'll have to wait for the production release. Thanks.

Hello @Ksenia! That’s a browser feature that’s supposed to prevent users from submitting the same form twice. I believe the quickest way to get rid of it would be to add a redirect to the same page after saving: $session->redirect('./', 303); That sends a 303 HTTP status code telling the browser to reload the page using a GET request, which MDN recommends for this purpose, as I understand it. Be aware that ProcessWire exits after a call to $session->redirect(), so no code below that line will get executed. Hope it works for you, I haven’t tested it though!

Maybe... at least that's the case. The other direction would be my favourite but ok. I already set a default value in the backend and reset it each time a location is saved. I forked the module to make it more GDPR-compliant and to fit my needs, maybe you want to take a look at it here: https://github.com/webmanufaktur/FieldtypeLeafletMapMarker

From a conversation with ryan I think to remember that /site/assets is supposed to be writable while /site/templates is not. https://processwire.com/docs/start/structure/files/ does not state the latter one but it confirms my first point.

? I appreciate that, but htmx is fairly feature complete and is supported by my other work. intercooler.js, the predecessor to htmx, has been up for nearly a decade without any sponsorships: https://intercoolerjs.org I don't anticipate htmx being any different, although I always do appreciate any sponsorships! Thank you for the warm welcomes. I don't know how useful I'll be, but I'll try to answer any questions I can around htmx as honestly as possible.

htmx supports using morphdom for swapping with the morphdom-swap extension agree 100% w/ @Craig's characterization of htmx as lower level than unpoly: it's an extension of HTML rather than a full framework (with, for example, a notion of layers). That can be good or bad, depending on your needs. Unpoly is a wonderful library that follows the same general html-oriented approach, but provides a lot more infrastructure baked into the core. I think either one (or, hotwire, for that matter, which is even higher level than unpoly) is a great choice for html-oriented development. I obviously prefer the lower-level "improve on HTML" approach, but they all have plusses and minuses. I'm (all to) happy to chat about htmx either here, on the htmx discord, or anywhere else. -t.totallyNotAnHtmxShill

They are in the docs right here for text(): https://processwire.com/api/ref/sanitizer/text/ but you are right, it is not clear from the docs if these also apply to textarea().

Hi all, I am having trouble on setting a fieldtype visibility from API, I need to set it as locked on a page save. here is the code from the module, which is called on init() $this->addHookBefore("Inputfield::render", $this, "renderFieldFolder"); Now, everything's ok except the locked feature, I can collapse or open the field from API but no way to lock it public function renderFieldFolder(HookEvent $event) { $field = $event->object; if($field->name == 'proj_code_folder') { $field->collapsed = Inputfield::collapsedNoLocked; } } Any clue?

OK ,its was $config->debug = false and it's not enabled. Still I don't consider this feature that useful. I would prefer a HelperFieldLinks type integrated in core.