Leaderboard

https://50thbirthday.londonfriend.org.uk/ This is a site we created to celebrate the 50th anniversary of London Friend which is the UK's oldest LGBTQ+ charity. It has a timeline that covers significant events of the charity's history together with a showcase of 50 inspirational Londoners who have made a difference to life in the capital. The technical side of things is pretty much as you imagine. One choice we made was not to use ajax for loading the timeline events but instead loading all of the html and then leaning hard into caching and lazy loading of images. We did use @markus_blue_tomato 's imageBlurHash module to produce placeholders for our lazily loaded images - although honestly you rarely get to see them. For some of the pages the client wanted to be able to add footnotes so we created a text formatter than moves any text in a content block surrounded in square brackets into footnotes section and creates an anchor link. I'll tidy that up and pop it on GitHub when I get some time but feel free to nag me if you think it might be useful to you. Other modules of note were ProCache and (of course) TracyDebugger. We also have some galleries on the site that use PhotoSwipe which is still our g to script for phot galleries. We got great marks in Lighthouse, Observatory and Wave (even the timeline itself which is a complicated page still does very well). It was great to be part of the celebrations (just a shame that I'm on holiday when the launch party happens... dammit)

Here is a minimal example that works for me: <?php namespace ProcessWire; if (input()->post('message')) { header('content-type: text/plain'); //this makes the browser show the "unformatted" response body, i.e. it won’t render HTML die(input()->post->textarea('message')); } ?> <form id="fruidform" method="POST" action="./"> <textarea name="message">&lt;h1&gt;two &gt; one&lt;/h1&gt;</textarea> <button id="urlencoded" type="submit">Tu es urlencoded</button> <button id="formdata" type="submit">Tu es als form-data</button> </form> <script> document.getElementById('urlencoded').addEventListener('click', async function(event) { event.preventDefault(); const response = await fetch('./', { method: 'POST', body: new URLSearchParams([['message', document.forms.fruidform.message.value]]) //you can also make a URLSearchParams from a form automatically, so you don’t have to reassemble all fields yourself: //new URLSearchParams(new FormData(document.forms.fruidform)) }); }); document.getElementById('formdata').addEventListener('click', async function(event) { event.preventDefault(); const response = await fetch('./', { method: 'POST', body: new FormData(document.forms.fruidform) }); }); </script> Observe how you get back “two > one” from the server in both cases. What are you doing differently? Also see how you don’t need to put the content-type header explicitly, because fetch() infers it from the body’s type automatically, but it is sent in both cases! If you look at the unformatted request body in the browser console, you’ll see that the first one is is: message=%3Ch1%3Etwo+%3E+one%3C%2Fh1%3E" message=%3Ch1%3Etwo+%3E+one%3C%2Fh1%3E" That mess of % symbols is “urlencoded” and the request has a header that announces this to the server, so the server will know how to decode it: “Content-Type: application/x-www-form-urlencoded;charset=UTF-8”. It’s called “urlencoded” because it specifically exists to encode GET parameters as part of URLs, but you can use it for POST as well, as you can see. The form-data request body looks like this: -----------------------------9162892302224017952318706005 Content-Disposition: form-data; name="message" <h1>two > one</h1> -----------------------------9162892302224017952318706005-- (Your boundary may vary. The browser generates automatically.) Again the request’s content-type header tells the server that it’s sending this format: “Content-Type: multipart/form-data; boundary=---------------------------9162892302224017952318706005”. If you use XMLHttpRequest, you may need to set the content-type explicitly according to the format you’re sending, I’m not sure, but it can't hurt. Another thing is that these are (I believe) the only two content-types that PHP will put into its $_POST and $_GET variables. That’s why @gebeer’s example had to use file_get_contents('php://input') to get the JSON. Of course you can also send JSON as urlencoded or form-data. Then you can use json_decode(input()->post('myjson')).

In v0.2.0 I've added a Pageimage::megapixelsDimensions() method that returns just the dimensions needed to resize an image to a target megapixel value. I used this recently to create a gallery of sponsor logos in normal and high dpi variations. Example from the updated readme: foreach($page->logos as $logo) { $dimensions = $logo->megapixelsDimensions(0.01); $width = $dimensions['width']; $height = $dimensions['height']; $width2x = $width * 2; $height2x = $height * 2; echo "<img src='{$logo->size($width, $height)->url}' srcset='{$logo->size($width, $height)->url} 1x, {$logo->size($width2x, $height2x)->url} 2x' alt='Logo' width='$width' height='$height'>"; } I've also added the module to the PW directory.

I think this could work both ways. One of the things I really like is that it's possible to use the admin UI to design your fields and pages, but RockMigrations then gives you the code generated to copy and paste into your migrations file. If you start prototyping using the UI, and intended to add it to a migration but forgot to, having an indication that a field or template isn't included in a migration is just as useful as indicating that it is. This would be particularly useful when adding RockMigrations to an existing site, as it makes it easier to see quickly what has been see up to be managed by migrations and what hasn't been.

You can use the User::changed hook to do what you want (see https://processwire.com/api/ref/wire/changed/). Put this in site/ready.php: $wire->addHookAfter('User::changed', function ($event) { if($event->arguments(0) === 'pass') { $user = $event->object; $this->wire->log->save('password-changes', "User $user->name has changed their password"); } }); Now everytime a user changes their password, it will be logged to Setup->logs->password-changes. You can do similar thing with roles if($event->arguments(0) === 'roles') { $user = $event->object; $oldRoles = $event->arguments(1); $newRoles = $event->arguments(2); // code to compare $oldRoles/$newRoles // write to log } If you want to have that information in the session log, just do $this->wire->log->save('session',...)

Inspired by the "max megapixels" option for the client-side image resizer, I made a simple module that adds target megapixel resizing for Pageimages. Image Megapixels A module for ProcessWire CMS/CMF. Adds methods to Pageimage objects useful for resizing to a target megapixel value. Example use You are creating a lightbox gallery of images with different aspect ratios. For the enlargements, rather than setting a fixed maximum width or height you want all the enlargements have the same size in terms of area, allowing a panoramic image to be wider than a square image, for instance. Another use case is sizing a gallery of sponsor logos. The supplied logos are different aspect ratios but you need to ensure the logos are sized so each has equal prominence on the page. The effect of resizing three different aspect ratios by the same megapixel target value can be seen in the screenshot below: Installation Install the Image Megapixels module. API // basic usage $pageimage = $pageimage->megapixels(float $megapixels); // usage with all arguments $pageimage = $pageimage->megapixels(float $megapixels, array $options = []); Example: foreach($page->images as $image) { echo "<img src='$image->megapixels(0.8)->url' alt='$image->description'>" } If needed you can supply an array of options for Pageimage::size() as a second argument. Getting dimensions If you just want to get the height and width dimensions needed to size an image to the given number of megapixels you can use the Pageimage::megapixelsDimensions() method that this module also adds. It returns an array with width and height as keys. Example of how this could be used to output a gallery of logos: foreach($page->logos as $logo) { $dimensions = $logo->megapixelsDimensions(0.01); $width = $dimensions['width']; $height = $dimensions['height']; $width2x = $width * 2; $height2x = $height * 2; echo "<img src='{$logo->size($width, $height)->url}' srcset='{$logo->size($width, $height)->url} 1x, {$logo->size($width2x, $height2x)->url} 2x' alt='Logo' width='$width' height='$height'>"; } https://github.com/Toutouwai/ImageMegapixels https://processwire.com/modules/image-megapixels/

I'm really happy with InputfieldTinyMCE so far. And as threatened to in reply to an earlier core updates post, I took a stab at migrating my autocomplete module over from InputfieldCKEditor. All in all, it was quite a pleasant experience and the JS side was really straight forward. The change also involved a lot of refactoring, and in the aftermath of that there's still a good bit of house cleaning to do, but for anybody willing to toy around with it, there's an alpha release of InlineCompleteTinyMCE on GitHub. A snapshot of InlineCompleteTinyMCEActionUsers in action: And the corresponding configuration in the field's "Input" tab (added to the TinyMCE config section): I haven't tested it with lazy loading or the inline editor yet.

You can do that. RockMigrations will only do what you tell it to do. You can also do that and sometimes I do it myself. It's just a reminder that if you apply changes that are somewhere in code of a migration your changes will get overwritten. If you apply changes via GUI that are not set in any migration than you'll be fine and your manual changes will be kept. That indicator could be improved I guess. For example it could only appear on fields or templates that received changes from a migration. And changes done via RockMigrations could be listed instead of the generic warning. If that is an important feature for you (or anybody else) I'd be happy to merge any PR in that direction and provide all the help needed.

This is a fun, simple project I built over the holidays and really goes back to what initially drew me to ProcessWire several years ago after being inspired by Ryan's Skyscrapers Demo. Backwards Compatible allows searching and browsing by various performance related tags and game pages display detailed data on each title. List of modules used: Import Pages by CSV - Essential for this kind of site, the vast majority of data was imported in one CSV upload Procache - Invaluable after an influx of 650k page views in 6 days(!) Form Builder - A simple implementation for monitored page updates and YT video submissions Soma's AjaxSearch Mike Rockett's Sitemap Additional styles/scripts: Bootstrap Grid only for CSS Fancybox.js Tippy.js Commento

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!

It’s Just a Spam Post… the Site is using Wordpress…

I have found the problem. You have to disable AJAX in the repeater settings, then saving works.

In your browser open page source and see what code shows up there. With that you should be able to trace from where it is coming.

By default LATTE echos the output that you put in { } {$foo = 'FOO!'} That would assign 'FOO!' to the $foo variable and as it is in { } output that. {do $foo = 'FOO!'} That would only assign 'FOO!' to the $foo variable and not output anything. If you want to run more complex code it's always good to have an MVC-like approach with custom page classes, then you could do for example: {$page->doFoo()}

Unfortunately, without more information we can not help. Maybe you have included a php file that outputs this? Processwire does not automatically generate such information But there's a configuration if you want to append or prepend a file: config.php: $config->prependTemplateFile = '_init.php'; $config->appendTemplateFile = '_main.php'; There's also a config inside of each template ("files" tab ?)

I will use htmlspecialchars($input->post->message, ENT_SUBSTITUTE) on the server before storing anything and chuck the sanitizer entirely. It's up to the user to not do typos, it's just up to me to make the logic not break. Thanks for your input!

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.

The latest version of RockMigrations comes with a console on the module's settings page. What does that mean? It is now easier than ever to create custom "site-profile" like installation scripts that you can just copy and paste into that console. Add or remove the lines that you need or don't need, check the checkbox to run code on save and hit the save button!! ?

Have you tried changing FollowSymlinks to SymLinksifOwnerMatch in .htaccess (it's explained in the comments in section 1. Apache Options)? You should probably even be fine with just commenting out the line in a standard PW setup, so I'd try that first.

Hello @bernhard thanks for your answer. Now I understand how to set the locale for each language in the module and was able to achieve what I wanted. Finally my date code would look like this $data = strtotime($publicacion->data_publicacion); $dateFormatter = \IntlDateFormatter::create( $languages->getLocale(), \IntlDateFormatter::NONE, \IntlDateFormatter::NONE, \date_default_timezone_get(), \IntlDateFormatter::GREGORIAN ); $contido .= '<time datetime="' . $publicacion->data_publicacion . '">' ."\n"; $dateFormatter->setPattern('EEEE'); $contido .= '<em>' . datefmt_format($dateFormatter, $data) . '</em>' . "\n"; $dateFormatter->setPattern('MMMM'); $contido .= '<strong>' . datefmt_format($dateFormatter, $data) . '</strong>' . "\n"; $dateFormatter->setPattern('dd'); $contido .= '<span>' . datefmt_format($dateFormatter, $data) . '</span>' . "\n"; $contido .= '</time>' . "\n"; And the final result:

New video is out: Quickstart for RockMigrations ?

Is there a way to get this running with php 7.3? How can i upgrade the mpdf version? The files that i can download here https://github.com/mpdf/mpdf/releases doesn't look very much like the ones i got in my /site/modules/Pages2Pdf/mpdf folder. Or is this module not usable anymore? Thanks!

Ah, I should have known there would be something in PIA for this - it's the real Swiss Army Knife for images. I really need to have a proper explore of that module. (I think it's the state of the docs that has been putting me off - maybe you could consolidate/tidy everything into the GitHub readme?) I have a very primitive system. For modules I'm interested in I have a spreadsheet with name, category, link, brief description of what it does (in my own words). But I often forget to update it with new modules and just try to rely on memory. For forum snippets (and links to the original post) I just have a folder with a bunch of text files in it. The text files are named according to what the snippet is about. Then when I'm looking for something I use the quick filter feature in my file manager (XYplorer).

Hi @Robin S, congrats to one more nice module! And I totally understand why you created it. I also (wanted to) use such a feature in different scenarios. Therefor once I added the "weighten" option to the PIA module. Hopefully you don't mind my following propagation of an alternative way to apply such a functionality. Maybe it is usefull for some people to have a different way to define / calculate / imagine the resulting images. You call it Megapixels, Pia uses image pixel dimensions for width & height or a single dimension for squares, defining a bounding box and get the images contained & weightened into that box. Additonally Pia handles one out of four values to the weighten-option to prioritize the landscape or portrait images in two ways: So, what you wanted was allready available in the modules directory for about three years. But I believe, when seeing all your modules, you have had fun building and sharing it. OT: For me, the last two years it is not possible to keep track of all the good new stuff coming into the core and from community members (like you). Some years ago, it felt doable for me. Lately I also found "a new possibility" to do things that was allready three years available. Even I had read it in the past and bookmarked it under my other several hundred PW links, it got out of focus. If somebody know a good way to keep track and or archive all the good stuff from here, (besides the few things that get mentions in the weekly news & blog posts), please share.

Great for sponsor logos too so that no-one feels gipped.

@adrianromega, did you see the "Example use" section above? To expand on this... it's useful in any situation where you want to be fair to a group of images with different aspect ratios. Take the three images shown in the screenshot above. If these images had been resized using maxSize(800,800) for instance, photo 2 (the square image) would be larger than the others in total area - it would contain the most image data. Now suppose you're running a competition on your website where visitors can vote for the best photo. The three images above have been submitted by three different photographers. If you are resizing by maxSize() rather than megapixels then it's not fair on photographers 1 and 3 that their images are shown smaller than the image from photographer 2.

I've been working with FieldtypeOptions recently and in the absence of documentation thought I would share some example code: $field = $fields->get('test_options'); /* @var FieldtypeOptions $fieldtype */ $fieldtype = $field->type; // Get existing options // $options is a SelectableOptionsArray (WireArray) // If there are no options yet this will return an empty SelectableOptionsArray $options = $fieldtype->getOptions($field); // Create an option $yellow = new SelectableOption(); $yellow->title = 'Yellow'; $yellow->value = 'yel'; // if you want a different value from the title // Don't set an ID for new options - this is added automatically // Will deal with 'sort' property later // Create another option $orange = new SelectableOption(); $orange->title = 'Orange'; // Add option after the existing options $options->add($yellow); // Get an option by title $green = $options->get('title=Green'); // Insert option at a certain position $options->insertAfter($orange, $green); // Remove an option $options->remove($green); // Reset sort properties (so order of options is the same as the SelectableOptionsArray order) $sort = 0; foreach($options as $option) { $option->sort = $sort; $sort++; } // Set options back to field $fieldtype->setOptions($field, $options);

@Macrura Thanks for pointing this out. I couldn't find a documentation, about toolbar items available within processwire. I tried all of the CKEditor fullpackage and all items are usable. Here a complete list: Source, Save,NewPage, Preview, Print, Templates Cut, Copy, Paste, PasteText, PasteFromWord, -, Undo, Redo Find, Replace, -, SelectAll, -, Scayt Form, Checkbox, Radio, TextField, Textarea, Select, Button, ImageButton, HiddenField Bold, Italic, Underline, Strike, Subscript, Superscript, -, RemoveFormat NumberedList, BulletedList, -, Outdent, Indent, -, Blockquote, CreateDiv, -, JustifyLeft, JustifyCenter, JustifyRight, JustifyBlock, -, BidiLtr, BidiRtl, Language Link, Unlink, Anchor Image, Flash, Table, HorizontalRule, Smiley, SpecialChar, PageBreak, Iframe Styles, Format, Font, FontSize TextColor, BGColor Maximize, ShowBlocks About