Leaderboard

Last week I told you guys about how I was working on development of a client’s site and deep diving into the details. Well this week was the same, except perhaps more so. Yesterday we finally launched phase one. There’s still more to do, and still working out some small bugs and such. This is a site I’ve been developing since back in the early versions of ProcessWire 2.x, which I think was nearly a decade ago. In fact, this was one of the first sites running ProcessWire 2.x, if I recall correctly. We’ve been keeping it up-to-date over the years, but this is the first time we’ve done a full front-end redo of the site, essentially starting from scratch on that, and spending a few months on it. But the admin side (fields, templates and page structure) remains roughly the same from where it was 10 years ago, and that’s what we’re going to redo in phase 2 (this year). There’s a lot of fields in this site, so I’m looking forward to really simplifying it with ProFields, repeaters and more — none of these existed when the original site was built. One thing really great about this iteration of the site is that it’s a ProcessWire community collaboration. Pete (our awesome forum administrator) did the design, as well as most of the front-end markup/css for the site. Jan (our awesome system administrator) setup the servers that it runs on, with AWS load balancer setup and everything related to that (he’s also one of the owners of the site). I did the other development stuff (the ProcessWire API side of things), making all the content fill all the markup in the right places, structure and organization, markup regions, search engines, optimization, etc., basically the stuff needed to get it all working in PW. This is the first time that I’ve developed a site where we can run new and old site side-by-side off the same ProcessWire installation. During development, the client could click a checkbox in their user profile and then they’d be using the new site. Behind the scenes, it does this using a fairly new feature in ProcessWire which is: $config->setLocation(‘templates’, ‘site/tpl’); So we had site/tpl/ having the new site templates, while site/templates/ had the old version. So one limitation for this phase 1 is that the old and new sites had to deliver the same exact content, even if the resulting output was very different. This site also uses custom page classes (another new feature), Markup Regions, and ProcessWire’s Functions API, and the Uikit 3 front-end framework. Pete also wrote a nice custom PW module for this site to handle localized weather forecasts — I ran out of time to get it in place yesterday, but that should be there next week hopefully. Yesterday we launched the site and we were finally able to start running it through its paces with live traffic. I thought I was going to be working on the PW core today, but you know that as soon as you launch a new site you always find things that need adjustment and can’t wait, so that was all of today. There’s more optimization work to do, and then there’s phase 2, where we start using ProFields and Repeaters to better isolate a lot of data and be able to implement the rest of Pete’s design in the parts that we weren’t able to in phase 1. This is where things like the current pricing tables (one example of a weak point) start to look really sharp. But I’m also looking forward to taking a little breather and catch up on some serious PW core work, issue reports and module updates over the next few weeks before diving into phase 2 of this site. I didn’t want to share the site quite yet because there’s still some details to take care of and such. But here it is Friday and I’ve got no other ProcessWire news to report, so was feeling a little guilty that I didn’t get more ProcessWire core work done over the last week, due to being focused on developing this site. But this was one of the first sites running ProcessWire, so it's an important one to me. And here it is about 10 years later, still the same installation (templates, fields, page tree) but with a brand new design and running the latest PW, and lots more to come. Tripsite.com

Something like this should get you going. This is stolen from a recent import I did which worked well. This assumes you have a field called "images" that you want the images uploaded to. I have also done more complex versions of this when the source HTML image tags have width and height tags - you can use those to resize the images using the PW API and embed that version back into the HTML. $dom = new \DOMDocument(); @$dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8')); foreach($dom->getElementsByTagName('img') as $img) { // grab image from the external URL and add to images field try { $np->images->add('http://olddomain.com/' . $img->getAttribute('src')); if($img->getAttribute('alt') != '') { $np->images->last()->description = $img->getAttribute('alt'); } $img->setAttribute('src', $np->images->last()->url()); } catch(\Exception $e) { // in case remote image can't be downloaded } } return preg_replace('/^<!DOCTYPE.+?>/', '', str_replace( array('<html>', '</html>', '<body>', '</body>', '<p>&amp;n<p>', '<p><p>', '</p></p>'), array('', '', '', '', '<p>', '<p>', '</p>'), $dom->saveHTML()));

I've only recently stumbled across Processwire. Thanks to ADHD and avoiding doing other work. I'm blown away at the power of Processwire. Ryan and all those who've built modules have done an incredible job of making a system that is fully customizable with incredible dev speed. Wordpress has so much bloat, it isn't very user friendly when all you want to do is quick a blog post or change. In fact unless you're a geek, It's actually quite daunting. Hell I'm still daunted by it all the time. I've never got my head around the interface layout and placement of menus and settings. On top of that, most plugins are trying to cater for anyone everyone and they have more junk to 'impress' than anything else. I love that I can just build my own functionality with PW easily or find a way to do it. What I'm particularly excited about is the end clients point of view. I could show a client in 5 minutes what they need to do to maintain their site. Changing look and theme as looks and trends move on would also be a cinch because no mark-up data is stored within the fields, unlike all the WP editor themes out there. Change templates, new site and look. All legacy data looks as good. So thank you to Ryan and the community for Processwire. I've only recently restarted developing after 15 years and frankly really didn't want to but PW has excited about web development again. I'm not one for blowing air up peoples arses but when something excites me, it excites me. ? Now I have to decide on whether I'm going to import my existing website's data or start an entirely new one ? G

Summary: When you start a new site and the default not should be english: 1) enable languages support 2) set Title / Label of the default language to your desired none english native language, (e.g. 'Deutsch' (German)) 3) drop in the none english language pack (for admin backend) into the default language, (e.g. german langpack) Now you are ready to start with a single language site of your choice. If you want to use a multi language site, you now can add as many additional languages you want. If one of them should be english, you add it, but do not need to apply a language pack. 4) add a new language to it and drop in a language pack for any none english language or simply don't drop in a language pack to get the english version (but not as the default one!) For single language sites you only need to enable languages support, NOT language inputfields!, NOT language pagenames!, only basic language support, - to be able to change the default languages name and its lang pack! Of course, if you plan a multilanguage site, you also will need language pagenames and language inputfields, but not if you only need a none english backend. ? So, if you know at the beginning of a new site / project what has to be the default language, it is done with a snip. Only disadvantage is, if you need to switch the default language later on, when already content was filled into a site. These seems to be very rare cases in real life. And for that I think have read a complete step by step guide from @BitPoet within the last two or three month somewhere. (Is this right @BitPoet ? and sorry for ping you here) You also can read it here:

Ok, I have read that linked post. But one question is: What kind of default URLs do we get in a multilanguage site when following @dotnetic's suggestion. (@Jens: ?) I have created a series of screenshots, a full walk-through, of my suggested way, but I don't want to publish it, if it wouldn't be correct or if there be a better way. So here are my questions: When I only want to have a single language page in none english, what is to do then? How will the page pathes urls work out then with a second language set? When I want to have a multi language site with none english default, but with english as second lang, what is to do? How will the pages URLs work out for the none english default and the english sub language? EDIT: @bernhard, you was a bit faster, but I have more in depth questions. ?

Maybe @dotnetic can elaborate why this is a bad practice?

You asked about this once before... ? But "pages.id==1234" is a pretty naff syntax, so here's a hook that lets you match pages just by typing an ID into the admin search: $wire->addHookAfter('ProcessPageSearch::findReady', function(HookEvent $event) { $selector = $event->return; $q = $event->wire('input')->get('q'); // If the admin search query is a number if(is_numeric($q)) { // Get the individual pieces of the selector $selector_pieces = explode(', ', $selector); // Modify the first piece so that it includes an ID clause in an OR-group $selector_pieces[0] = "({$selector_pieces[0]}), (id=$q)"; // Replace the original selector $event->return = implode(', ', $selector_pieces); } });

@horst, Thanks for the write-up! If you possibly can, for newbies, could you please make a diagram/flow chart for the instructions? Or at least add more details please? For instance: Where should this be done? ? Where should this be done? What does the user need to enable and/or download? ? Etc. Thanks for considering.

I'm working on a script for importing very old static HTML files into ProcessWire so they are searchable on the new site. What I have so far works, but I wonder if there are ways I can make the work of cleaning up the imported content easier, by doing more useful cleanup during the import. For this demo, suppose all the files exist in one directory, called "public", and suppose we're importing them all into the basic-page template. At this point, the basic-page template has been modified from the blank profile to include one additional textarea field called "body", which uses the CKEditor. <?php include './path/to/processwire/index.php'; // Use FileSystemIterator to save all the files in the 'public' directory // https://www.php.net/manual/en/class.filesystemiterator.php $files = new FileSystemIterator('./public'); // This is a callback function for the CallbackFilterIterator below $is_html_file = function($file) { return strpos($file->getFilename(), '.htm'); }; // Use CallbackFilterIterator to winnow the files down to only HTML files // https://www.php.net/manual/en/class.callbackfilteriterator.php $html_files = new CallbackFilterIterator($files, $is_html_file); // Input a regular expression and a string -> output an array of matches $preg_matches = function($regex, $string) { preg_match($regex, $string, $array); return $array; }; // Iterate over the directory objects stored in $html_files foreach($html_files as $file) { // Turn this file into a SplFileObject so we can read its contents // https://www.php.net/manual/en/class.splfileobject.php#splfileobject.constants.drop-new-line $_file = new SplFileObject($file); $contents = $_file->fread($_file->getSize()); $h1_content = $preg_matches('/\<h1\>(.*?)\<\/h1\>/i', $contents)[1] | false; // Create a new ProcessWire page and save the content into it $article = new \ProcessWire\Page(); $article->parent = $pages->get('/'); $article->template = 'basic-page'; $article->title = preg_match('/\<h1\>(.*?)\<\/h1\>/i', $contents) ? $preg_matches('/\<h1\>(.*?)\<\/h1\>/i', $contents)[1] : $preg_matches('/\<title\>(.*?)\<\/title\>/i', $contents)[1]; $article->body = $contents; $article->save(); } This successfully titles all the pages that have at least one h1 tag. (I know this is making a big assumption of proper markup, but it appears to be broadly correct in this one case.) The rest of the content is dumped into the page's body field. If this helps anyone else solve a similar problem, have the code! (WTFPL) But when one is dealing with archaic HTML using font tags and tables for layout (yeek!), this leaves much room for improvement. Something I'd like to do is get rid of all the layout tables and site furniture, like branding markup, navigation, and footer text. Of course, that is not marked up in a consistent way across all the documents. ? I wonder if anyone has guidance for something like this? Do you know of any best practices for automating the cleanup old HTML? Thank you! Edit: When searching for HTML tags, matches should be case insensitive (using the i flag after the delimiter). Also, use the content of the title element when there is no h1 tag on the page. This is all fixed in the code above.

@ryan, I know it's an ancient thread, but I'm slowly finishing my first public/client site with PW and this "sort=-sticky" trick has just blown my mind... ? I've got few crossing loops with different layouts and was trying to implement some kind of clever sticky mechanism onto all my find/sort structures. I was almost there with checkbox conditions but decided to look around here for a little help. Found this thread, adjusted and put your suggestion into my project and... started to dance and scream. ? PW is PHENOMENAL! I'm learning PW API for few weeks intensively and I'm more and more thrilled. Thank You and all Devs so much for this wonderful CMF/CME!

Can we see your complete code? Because currently you're looping over the individual levels, but nothing gets added to your array, so I don't quite see how you're building your 5-dimensional array. In any case, you can use array_map to convert an array of page objects to an array of page fields. This function expects a normal array, whereas $level4->children returns a WireArray. But you can use WireArray::getArray() to get the objects in the WireArray as a plain array: $pagesData = array_map(function ($artikel) { return [ 'field1' => $artikel->field1, 'field2' => $artikel->field2, 'field3' => $artikel->field3, ]; }, $level4->children->getArray()); // $pagesData now holds an array of arrays corresponding to pages which in turn contain the fields for that page

There seems to be a different opinion, see: https://processwire.com/talk/topic/21534-how-to-change-the-default-language-in-processwire-cms/?tab=comments#comment-185533 Still, I also use the setup Horst suggests and I have not found any drawbacks of it so far.

This problem is still not solved. Strange results: // check if field is empty (NULL) $p = $pages->get("datetime="); // SQL Error $p = $pages->get("datetime=''"); // SQL Error $p = $pages->get("datetime=0000-00-00 00:00:00"); // SQL Error $p = $pages->get("datetime=0"); // expected result, will find a page with datetime = 1970-01-01 00:00:00 $p = $pages->get("datetime=null"); // will find a page with datetime = 1970-01-01 00:00:00 why? var_dump($p->getUnformatted('datetime')); // if a page exists result -3600 due to the locale I need to check if the field is not set via selector. Any ideas? Currently I exlude this from the selector and loop the results (bad solution) https://github.com/processwire/processwire-issues/issues/973#issuecomment-625678587

What about Tracy's PW Info panel - finds the page and provides edit, view, and open links. Maybe you want for site editors, in which case this obviously isn't very useful, but I use this many times a day during development.

I have installed the SSL in localhost (xampp in Win10) following the steps from this url: https://shellcreeper.com/how-to-create-valid-ssl-in-localhost-for-xampp/

I would say go with another solution for now. I respect Kongondo for not rushing this out to market, it makes me more more excited to see it. Software development should never have timescales unless you are dealing with a client, which I know you are, but lets not rush good work. I am guessing this shouldn't even really be called Padloper anymore, so I wouldn't expect a free of charge upgrade, and in fact I hope there is no license fee reduction just because you have the previous version. I would like to reward Kongondo for his work as I do Ryan by purchasing his Pro modules, even if I don't use them.

@horst, that sounds really promising, unfortunatley I don't have a clue how to do this. I've just installed a new site from the ZIP file (master 3.0.148) with the "Multilanguage" site profile, but I couldn't see a possibility to prevent the default language from being English. I couldn't find any documentation about it either. I'll greatly appreciate any hints how to do the snip ?

For a gallery of images you wouldn't want to insert the images separately into the CKEditor field. You'd want to loop over all the images in the field and output markup for each of them. A typical approach would be to show thumbnail images linked to larger images that display in a JS lightbox (I like to use Fresco), so your template code might look like this (assumes your images field is named "images"): <?php if($page->images->count): ?> <div class="gallery"> <?php foreach($page->images as $image): ?> <a href="<?= $image->maxSize(1000,1000)->url ?>" class="fresco" data-fresco-caption="<?= $image->description ?>"> <img src="<?= $image->size(300,300)->url ?>" alt="<?= $image->description ?>"> </a> <?php endforeach; ?> </div> <?php endif; ?> So the simplest scenario is if your blog text and gallery are separate from each other - e.g. the gallery appears before or after the text. This way you just output the gallery and text separately in your template file. Chances are that's what you want to do, but here are a couple of other scenarios and possible solutions... 1. You want to optionally insert one gallery somewhere within the blog text. In other words, you want some text, followed by the gallery, followed by some more text. One way to do this would be to have two CKEditor fields in your template, labelled "Before gallery" and "After gallery". You divide your text between these two fields. The two CKEditor fields and the images field are all output directly by code in your template file. Another way is to have a single CKEditor field use the Hanna Code module to insert the gallery somewhere in the text. You would create a PHP Hanna tag named "gallery" and use the gallery code shown above for the tag. Then you'd insert [[gallery]] in your CKEditor field wherever you want the gallery to appear. 2. You want to insert multiple galleries somewhere within the blog text. If you stump up some $$ to buy the excellent ProFields module you could use the included Repeater Matrix module to create separate matrix types for Text and Gallery. Then you just add alternating Text and Gallery items to the page as needed to build up the blog post content. Another approach for this that is a bit more advanced but that doesn't cost anything is to use a standard Repeater field for the galleries. You would add an Images field and the Title field to the Repeater field and create a Repeater item for each gallery on the page. Then you'd use Hanna Code to insert the galleries within a single CKEditor field. And to make it easier to select a gallery in the Hanna tag you can use the Hanna Code Dialog module. The "gallery" Hanna tag would have a "title" attribute and the code would look like this: <?php $repeater_item = $page->galleries->findOne("title=$title"); ?> <?php if($repeater_item->id): ?> <div class="gallery"> <?php foreach($repeater_item->images as $image): ?> <a href="<?= $image->maxSize(1000,1000)->url ?>" class="fresco" data-fresco-caption="<?= $image->description ?>"> <img src="<?= $image->size(300,300)->url ?>" alt="<?= $image->description ?>"> </a> <?php endforeach; ?> </div> <?php endif; ?> And the Hanna Code Dialog hook in /site/ready.php to build the dialog form would look like this: $wire->addHookAfter('HannaCodeDialog::buildForm', function(HookEvent $event) { // The Hanna tag that is being opened in the dialog $tag_name = $event->arguments(0); // The page open in Page Edit /* @var Page $edited_page */ $edited_page = $event->arguments(1); // The form rendered in the dialog /* @var InputfieldForm $form */ $form = $event->return; if($tag_name === 'gallery') { $modules = $event->wire('modules'); $gallery_titles = $edited_page->galleries->explode('title'); /* @var InputfieldSelect $f */ $f = $modules->InputfieldSelect; $f->name = 'title'; $f->id = 'title'; $f->label = 'Gallery title'; $f->addOptions($gallery_titles, false); $form->add($f); } }); And this would give you an interface in Page Edit that looks like this (when the Hanna Code dialog is open):

Hi everyone! This is Antti from Avoine. Our website business is growing and we are looking for some extra talent to help us. We are looking for web developer(s) with great visual skills who can design and develop websites that look great and work fast on desktop and mobile. We are looking for a long-term partnership, not a single project gig. Agencies and freelancers can both apply. All the projects will come to our hosting and maintenance, so we expect you to build websites in a same way that we build all our sites. We will of course teach and help to get in track with this. Our current process includes: source code hosted at github.com gulp based workflow composer based processwire installation default site profile that all our projects use tailwind css wireframe used for output strategy We hope that you are familiar with tools like git and composer. Not too much, so don't be afraid about these. Please contact me with email to antti.peisa@avoine.fi and please include: Links to at least 2 reference projects online (both design and front end development needs done by you or your company) Some kind of estimate about how many hours reference project development took Your hour price in euros or usd Looking forward for your application. This is great opportunity to work with legendary creatures like @teppo @Fokke and unfortunately me too.

Hi there Here is the future of e-commerce for Processwire framework: https://processwire.com/talk/topic/19911-future-of-padloper-new-project-lead/ by @kongondo Third parties solutions looks great until you will faced with customization and then, with issues after updates. It is always better to control the code by yourselves. Best wishes from the Alps Alexander

Hi Ryan, Congratulations with your project. Isn't it great to have clients and be able to work from home to make money. Especially in this corona lock down time. I wished I found Processwire 10 years ago. But at least I will be able to make money online as an addition or replacement for my future pension. Pensions here in Spain are already very low, and it is questioned here what will be left for pension money after 10 years. I want to thank this great forum and wish all the coders good business. Greetings from Spain.

hi guys, i'm happy to show you my first project realised with processwire and to say hi the first time here in the forum, although i have been reading, following, learning and liking around here for some weeks now the reason why i did not post any questions is quite simple: all answers for my questions have already been posted (and answered) in the forum/wiki/docs - really great! let me also say thanks to gebeer, who forced me to take a second look to processwire (coming from joomla/seblod and thinking processwire is not worth the effort of changing from a well known system - i was so wrong ^^) So what is "GeoWire"? (http://www.geowire.org) GeoWire is a web mapping tool for creating and sharing web-maps. It's a bit similar to google maps, but you can put your own maps (also all the google layers) and overlays into it and create your own functionality with javascript. First it was a "static" HTML/JS project but within the weeks of development gebeer told me about processwire. So in the end i had my HTML/JS web map viewer ready and thought how great it would be to manage all the code snippets directly on the server with processwire as GUI - you could easily copy your map collocations, drag and drop layers in the layer tree, drag&drop buttons in the toolbar and so on... 2 days later i had the first working prototype ready!!! PW is just wonderful, thank you Ryan+Team! Today i - finally - finished the video tutorials for GeoWire which i published as an open source web mapping tool. Oh man, that sounds so arrogant for me - i'm not a professional developer and i know it is far from perfect, but at least i wanted to give it a try . I would have also put it to GitHub, but i have no experience with it till now and so it was too complicated for me. I hope I am not violating PW by providing GeoWire for download on my website geowire.org? I don't even know if anybody is interested in geowire at all, but maybe it can at least serve as starting point for any other similar projects... any feedback is appreciated. Here is the demo: http://www.geowire.org/demo Maybe you're interested in the videos: The Backend: http://www.youtube.com/watch?v=8sgq8GPYDYo How it works: http://www.youtube.com/watch?v=vxMtAQsKESY How it works in short by an example: The mapPanelToolbar makes this out of that using that code snippet, /* ######################################## ######## mapPanelToolbar.js ######################################## */ Ext.onReady(function() { mapPanelToolbar = Ext.create('Ext.toolbar.Toolbar', { dock: 'top', items: [<?php foreach($page->children as $child) { if($child->include_file) { include('GeoWire/include/'.$child->include_file); echo ','; } echo $child->include_direct.','; } ?>] }); }); that is recursively loaded by the processwire template // create javascript app file from all included code snippets ob_start("makefile"); // include all children of current page foreach ($page->children as $child) { include_file($child); } ob_end_flush(); function makefile($buffer) { if(!wire('config')->dev) { include('GeoWire/JSMin.php'); $buffer = JSMin::minify($buffer); } // take first map if it is homepage $pageid = (wire('page')->id == 1) ? wire('page')->child->id : wire('page')->id; file_put_contents("GeoWire/app".$pageid.".js", $buffer); } happy processwiring and good night Edit: Do you think something like this would be possible or even better put into a module? I know my first version of geowire will soon be outdated as it uses PW2.4 as core, but for the time it was the best way to go and to be honest, i don't know when/if i have the time/motivation to develop this project in future...

Hi Jay, you can find the source code here: https://gitlab.com/baumrock/geowire But I have to say that I was not able to install it on my dev laptop any more. I'd have to have a look on my old machine if there is a working version left. Maybe you can get it up and running though. But in general I'd not recommend using it any more. It was my first project and has some concepts that I'd definitely not use any more (like placing files in the root folder). I had no idea about hooks or modules at that time. Maybe some parts are interesting nevertheless ?

Longtime WP user. Came here to escape the madness that is Gutenberg. Please, for love of ProcessWire, do not include any such editor crap inside core. People can do so via modules or even admin themes but keep PW clean, neat, tight, free and fresh from such nonsense. Just learned about ProcessWire a couple days ago at a JS workshop/conference. Reading the docs, doing first examples and totally in love with it all. Keep it that way please. Regarding Gutenberg. Not only do you need to know React deeply, no also JS and a lot of it and deeply also, then you get to work with a "the WP way" version of React to build things. With Gutenberg WP has set the bar to entry into the WP world way above average, all the hobby coders that could easily make a WP site given a month of learning are now facing a very steep and intense learning curve. This will surly show going forward. This is what got WP off the ground in the first place. Ease of use and also ease of getting a site done. This has changed. Kids these days want to see results, fast. Sure if you don't care about PageSpeed or WebPageTest, just need a page-builder, plaster external libs all over the source, go ahead, if that is your game, and if that is what you unknowing client pays for, the sure, yes, use WP and Gutenberg exactly for this kind of crap. But if you really do care about all these things and want to make a good site that performs well where the client can have multiple custom blocks showing in the frontend, then you are going to have to invest a lot of time learning JS and React and "the WP way of React". Not something I see any entry level coder feeling up to. For example Just go ahead and make a responsive image block, and I don't mean just the img tag but something more like this. https://dev.opera.com/articles/responsive-images/ Asked around many frequented channels, senior and seasoned devs could not come up with something that produces usable source code. One guy had a solution, asked him if he could show the code "sorry, no, we have a team of devs working on that in our agency and cannot show it publicly". Go figure. A whole team of devs at an agency for a responsive image block to work in WP. Well done Matt and super smooth more there Mark, slipping React into WP that way. A good colleague that has been using WP all his life and knows PHP inside out tells me "I am going to stay away from Gutenberg for as long as I can". By your means, feel free and make a module, load the editor of your choice, give the client what you think they need or want, but do all this strictly kept away from the beautiful, clean and nice source that is ProcessWire. Given the WP mess I am sure there will be more and more people going to use ProcessWire in the future. I plan to speak publicly about ProcessWire at a conf as well as hold workshops, I am that much convinced about it. I would not even go this way if I would have discovered any dependencies on external libs or any such page-builder crap that now WP has built in. And now back to the docs and examples. It is such a pleasure. ProcessWire.

Ah, good catch . The API key was a field setting before I put it into the module config. Wonder why I didn’t get that. I assume they’re only shown in debug mode? Thanks for the kind words everyone. I appreciate it :)