Leaderboard

This week I've bumped the dev branch version to 3.0.194. Relative to last week, there are a few commits fixing minor issues. Last week we covered some fairly major updates and I've not come across any concerning side effects, so figured it's a good day to bump the version. Next week my kids are out of school for winter break so I'll be around but I don't expect I'll have much in terms of updates to report next week, but definitely will the following week. Thanks and have a great weekend!

Just a note, ProCache will only work on Apache (perhaps LiteSpeed) web server. If you are using Nginx, you have to translate the ProCache-generated htaccess to nginx directives.

Yes! No updates on code, it really works out of the box in most cases! It grabs the output of your templates and right before rendering it does it all, swaps the script, style tags and there you go, minified and merged. What I do when I have this requirements is to just minify what is required on every page, and whatever libraries that are just loaded to work on a specific context I load them separately, you can add "?NoMinify" to the src url to let know ProCache that a specific file should not be loaded. Comments are removed from HTML for sure! Not sure if from CSS too, I can't remember now. <!-- this might include jquery, htmx or some other library you'll be using everywhere, and are originally placed like this in your template file: <script src="/site/templates/js/jquery.js"> <script src="/site/templates/js/somethingesle.js"> ProCache turns it into the following, right before output: --> <script src="/site/assets/ProCache/minified.pwpc.js"> <!-- that other fancy slideshow library you use in a specific block, this won't get minified/merged in the block above --> <script src="/site/templates/js/slideshow.min.js?NoMinify">

https://advanced.team/ - try moving your cursor back and forth on this website. Lots of fancy animations as well.

https://paveldogreat.github.io/WebGL-Fluid-Simulation/ https://experiments.withgoogle.com/search?q=fluid

no, you dont need quotes here ?

I can confirm it works in LiteSpeed, at least in my hosting (Knownhost)

any idea how this is done? This is one that I found while researching and is also stunning https://www.airforce.com/intothestorm/

In reality, that getImageInfoSVG() method should probably try to get the dimensions from the viewbox attribute in the SVG (if actual width and height attributes are not available), before it resorts to using imagick to get them. That would remove the need to rasterize just to get the dimensions.

Hey @adrian, you are right. I was thinking of the viewBox as a set of coordinates in x/y dimension that are defining the corners of the viewbox relative to the origin of the coordinate system (this is why i called them max_x and max_y), which is obviously wrong. It should look like this: /** * Gets the image info/size of an SVG * * Returned width and height values may be integers OR percentage strings. * * #pw-internal * * @param string $filename Optional filename to check * @return array of width and height * */ protected function getImageInfoSVG($filename = '') { $width = 0; $height = 0; if(!$filename) $filename = $this->filename; $xml = @file_get_contents($filename); if($xml) { $a = @simplexml_load_string($xml)->attributes(); if((int) $a->width > 0) $width = (int) $a->width; if((int) $a->height > 0) $height = (int) $a->height; // start viewbox fix if(!$width || !$height){ if($a->viewBox != ""){ // get rid of commas: replace them with spaces $a->viewBox = str_replace(",", " ", $a->viewBox); // get rid of (now possible) double spaces: replace them with a single space $a->viewBox = str_replace(" ", " ", $a->viewBox); // get single values $viewbox = explode(" ", $a->viewBox); if(count($viewbox) === 4){ // we need 4 values, even though we are just using 2 $width = (float) $viewbox[2]; $height = (float) $viewbox[3]; } } } // end viewbox fix } if((!$width || !$height) && (extension_loaded('imagick') || class_exists('\IMagick'))) { try { $imagick = new \Imagick(); $imagick->readImage($filename); $width = $imagick->getImageWidth(); $height = $imagick->getImageHeight(); } catch(\Exception $e) { // fallback to 100% } } if($width < 1) $width = '100%'; if($height < 1) $height = '100%'; return array( 'width' => $width, 'height' => $height ); } @ryan, maybe something like this could be a useful addition to the core?

Some quotes missing here I think. Probably for the previous issue?

Yes. You can modify every inputfield in the PW backend via hooks: $wire->addHookAfter("Inputfield(name=link_page_file)::render", function($event) { $html = $event->return; $html .= " hooked"; $event->return = $html; });

I'd start debugging by adding bd($page) from tracy debugger in this hook so that you see when and which page is saved. It seems that this hook somehow fires for all pages and therefore renames all those pages where it should only fire once. Not sure why this should be the case. Any other hooks involved?

Hi @snck - nice work. I really do think this should be incorporated into the core, although I am a bit confused by the calculation method you have for getting the width / height. I feel like the width and height should be take directly from [2] and [3]. Even if the min_x or min_y aren't set to 0, surely that doesn't change the width of the canvas area that the illustration is on which is what we want the width / height of. Do you agree, or am I missing something? We need to get Ryan's attention on this - maybe a Github issue?

Interesting that it didn't work straight away. If you find similar issues again, please let me know - maybe I've overlooked something?

@adrian Again had problems with this and got back to your idea. Thank you so much! This quick fix might be not the most beautiful/efficient way, but worked fine for me (and might also for someone else): /** * Gets the image info/size of an SVG * * Returned width and height values may be integers OR percentage strings. * * #pw-internal * * @param string $filename Optional filename to check * @return array of width and height * */ protected function getImageInfoSVG($filename = '') { $width = 0; $height = 0; if(!$filename) $filename = $this->filename; $xml = @file_get_contents($filename); if($xml) { $a = @simplexml_load_string($xml)->attributes(); if((int) $a->width > 0) $width = (int) $a->width; if((int) $a->height > 0) $height = (int) $a->height; // start viewbox fix if(!$width || !$height){ if($a->viewBox != ""){ // get rid of commas: replace them with spaces $a->viewBox = str_replace(",", " ", $a->viewBox); // get rid of (now possible) double spaces: replace them with a single space $a->viewBox = str_replace(" ", " ", $a->viewBox); // get single values $viewbox = explode(" ", $a->viewBox); if(count($viewbox) === 4){ // we need 4 values $min_x = (float) $viewbox[0]; $min_y = (float) $viewbox[1]; $max_x = (float) $viewbox[2]; $max_y = (float) $viewbox[3]; $width = $max_x - $min_x; $height = $max_y - $min_y; } } } // end viewbox fix } if((!$width || !$height) && (extension_loaded('imagick') || class_exists('\IMagick'))) { try { $imagick = new \Imagick(); $imagick->readImage($filename); $width = $imagick->getImageWidth(); $height = $imagick->getImageHeight(); } catch(\Exception $e) { // fallback to 100% } } if($width < 1) $width = '100%'; if($height < 1) $height = '100%'; return array( 'width' => $width, 'height' => $height ); }

Ok, please give the latest version a go. It should be much better in that you now get notification of new entries no matter when they happen relative to when you reload the page - they might even happen in another process. Thanks for prompting me to revisit this.

Super, thank you! I couldn't find it in the Process module documentation, but that makes a lot of sense. I'm almost embarrased ?

Hello Mate, a while back I've made a video on how I usually approach usage of Tailwind with Pw, you can find it here. Nowaday, with Tailwind v.3.x I've changed my approach slightly, since some additional postcss packages are already included. Below my updated package.json file, in order to better understand which scripts I invoke: { "devDependencies": { "cross-env": "^7.0.2", "cssnano": "^4.1.10", "laravel-mix": "^6.0.41", "postcss": "^8.4.5", "postcss-import": "^14.0.2", "postcss-preset-env": "^7.2.3", "tailwindcss": "^3.0.18" }, "dependencies": { "concurrently": "^7.0.0", "postcss-cli": "^9.1.0" }, "scripts": { "start": "npx tailwindcss build -i styles/entry.pcss -o styles/dist/dist.css", "watch": "concurrently \"npx postcss styles/entry.pcss -o styles/dist/dist.css --watch\" \" npx mix watch \"", "build": "concurrently \"cross-env NODE_ENV=production npx postcss styles/entry.pcss -o styles/dist/dist.css\" \"npx mix --production\"" } } Basically I rely on tailwindcss cli to kickoff the first compilation of my entry point, then I invoke postcss --watch and mix watch (for js). At build time I switch node environment to production (which cssnano the final css) and mix --production to finalize my js (minification, module resolving, etc.). For completion here is the postcss.config.js: const cssnano = require('cssnano'); module.exports = () => ({ plugins: [ require('postcss-import'), require('tailwindcss/nesting'), require('tailwindcss'), require('autoprefixer'), require('postcss-preset-env')({ features: { 'nesting-rules': false } }), ...(process.env.NODE_ENV === 'production' ? [cssnano] : []) ] });

@kongondo It could but I would guess your bottleneck is quantity of pages, not fields or templates (?). So unless you literally mean hundreds-of-repeater-fields, for your case I think you'd want to enable the ajax loading features of the repeater (if not already) as that would make a big difference. It was a one-off thing that I used and deleted. Writing in the browser so it may need adjustment, but here's something similar (though a bit simpler than what I used): $fieldtype = $modules->get('FieldtypeText'); $title = $fields->get('title'); for($n = 0; $n < 1000; $n++) { $field = new Field(); $field->type = $fieldtype; $field->name = "test_$n"; $field->label = "Test field $n"; $fields->save($field); $fieldgroup = new Fieldgroup(); $fieldgroup->name = "test-$n"; $fieldgroup->add($title); $fieldgroup->add($field); $fieldgroups->save($fieldgroup); $template = new Template(); $template->name = "test-$n"; $template->label = "Test template $n"; $template->fieldgroup = $fieldgroup; $templates->save($template); } @ErikMH I'm not aware of any recent changes that would affect pages in that manner. But for your code, I would drop the $me = wire($this); there is no $me, there is only $this. ? And rather than referring to $me->parent; refer to $this->parent(); with the parenthesis, so that it is a method call rather than a direct access property. Since you are "inside" of the Page class here, the interface is a little lower level than if you are outside of it. Usually it doesn't matter but in this case of things like "parent" I think it might be safer to method calls rather than properties, because these things are dynamically loaded and so accessing the method ensures that happens.

@dotnetic I picked it up after developing our API in Slim and looking at some best practices. It would be really great if this was the ProcessWire default.

I think this should be the default for credentials in ProcessWire. Many other CMS or Frameworks like Laravel or Statamic (which is an Laravel application) use this method.

I have personally found errors related to imagick and pageimage.php to be misleading as the failure can happen at the server / imagick module level and can be due to issues with multi-threading. Are you in a multi-threaded (ie two or more cpu cores) environment and are the timeouts happening much faster than 30 seconds?

@snck, Thanks for reporting back. I don't know much about SVGs, excuse my ignorance please. Was the issue the complexity of the files or the size of the files? I am guessing though that complex files would probably also be large in size. Thanks.

I further investigated the issue by reviewing all of the SVG files used on the pages that have thrown errors and comparing them to files from pages that were editable without problems. I realised that the guys who generated the files (architecture students) used different software in their process (Adobe Illustrator, Vectorworks etc.) which led to really complex files. I ran some of them through an online SVG minification tool which helped to resolve the issue in some cases and instructed the students to develop a kind of maximum complexity guideline for their files. To make the backend usable again and offer them a chance to exchange their "bad" files, it raised the max_execution_time temporarily in the .htaccess: php_value max_execution_time 120

Answering my own question: I got directory/files ownership/permission screwed up on /site/assets/cache. Or PHP7.3 handles those differently? /cache and /modules should be writable. I had both on 755, but guess ownership was wrong. Doing this via ssh fixed it: chown -R myserveruser site/assets/cache chown -R myserveruser site/modules chmod -R a+w site/assets/cache chmod -R a+w site/modules Are there other folders/files I should double-check?

Ok. // code snippet that belongs into the site/ready.php file: // a hook that reads IPTC keywords on images upload and populates them into the images tags field $wire->addHookBefore("InputfieldFile::fileAdded", function(HookEvent $event) { $inputfield = $event->object; // handle to the image field if(!$inputfield instanceof InputfieldImage) { // we need an images field, not a file field return; // early return } if(version_compare(wire('config')->version, '2.8.0', '<')) { $p = $inputfield->value['page']; // get the page, PW < 2.8 } else { $p = $inputfield->attributes['value']->page; // get the page, PW >= 2.8 | 3.0 (or only from 3.0.17+ ??) } $image = $event->argumentsByName('pagefile'); // get the image // check for IPTC data $additionalInfo = array(); $info = @getimagesize($image->filename, $additionalInfo); // read image markers if($info !== false && is_array($additionalInfo) && isset($additionalInfo['APP13'])) { // APP13 is the IPTC marker $iptc = iptcparse($additionalInfo['APP13']); // IPTC field 025 = keywords collection if(is_array($iptc) && isset($iptc['2#025']) && is_array($iptc['2#025']) && count($iptc['2#025']) > 0) { $tags = array(); foreach($iptc['2#025'] as $k => $v) { if(empty($v)) continue; $tags[] = trim(strtolower($v)); } $p->get($inputfield->name)->trackChange('tags'); // prepare page to keep track for changes $image->tags = implode(' ', $tags); // add the tags list as string $p->save($inputfield->name); // save the page images field } } }); EDIT: code was modified to detect $page also with PW version >= 2.8 | 3.0 EDIT 2: Now it is working for all PW versions again. Had have the wrong HookEvent used here (addHokkAfter, but must be: addHookBefore!)