Leaderboard

I know someone has to write this, so let it be me. The first time I realised what I could do with the ProcessWire API it was like an insane mode in mentioned Tesla Model S. But it was just the beginning as PW keeps accelerating me ever since. Of course there are rough edges, but I am sure there are some in Tesla too - you just have to own it a bit longer to discover them . This creation of yours, Ryan, is something that was a mind-changer and a life-changer for so many of us here and more around the globe. And it is not just cheaper and better, it is open source and the best you can get! Tesla team made a great job. So did you - alone. More people everywhere in the world are using PW now than probably ever will be using Tesla cars. So the impact not only on the future, but on the present is quite comparable (Tesla team just has to work harder to not fall behind too far). ProcessWire is equally fine crafted mixture of technology and design, as this electric car... But none of us have to give it back some day soon. But not only the technology is to be mentioned. ProcessWire is a community, open source and global. People from Africa use it alongside people from Europe and Americas. And they (actually we) come together every day to talk to each other about a topic of no envy and hatred, but a common love and perspective. The world seems to be so unstable and fragmented these days. At the place that I live I hear a lot of negative words aimed at US and its policy. Some of it might be true, some of it is an obvious propaganda. But without other channels of information and communication you can easily lose your own point of view. I am sure something similar is happening on the so called "other side". Here in community we overcome that way of thinking. You, Ryan, and the open source ProcessWire thing is doing better job for creating a world as a better place than NSA spying scandals and troops being brought to places abroad for sure. And your avatar is the most friendly face of America to be seen for many. I do not know if making one of the best pieces of software in the world for free and inspiring one of the most friendly and helpful international communities shall ever help you to buy a luxury electric car (I really hope so), but "at least" your children have something to be really proud about.

No, sadly I don't own a Tesla Model S. Instead I own a 1994 Mazda. But with getting ProcessWire 3.x ready to release, I didn't have a lot to write about this week. So figured, why not chat about something else I'm passionate about (this is a blog after all). Last weekend, I got to pretend that I owned a brand new 2016 Tesla Model S (P90D) for two days and a couple hundred miles. I was so inspired by it, I figured why not write something. We'll even attempt to draw some parallels with ProcessWire. This post also covers updates to several 1st party modules. https://processwire.com/blog/posts/tesla-model-s/

Not sure if this really belongs here, but interesting to see that: http://www.burgerking.it/ is running on PW and yet several other of their regional sites, eg: http://burgerking.ca/ are running Drupal. Sites looks very similar visually.

Hi Sephiroth. Great start! I have been searching for an in-depth tutorial on creating modules so I was delighted to find this thread linked in ProcessWire Weekly. I started reading and adding comments for grammar and spelling and realized it would be much faster if I was able to actually edit the doc. So, I am officially offering my services as an Editor for your document. I figure this would be a great way for me to contribute back to this awesome community and help you help me learn how to write PW modules. If you are interested, let me know and we can go from there. Continue the great work!

Actually couldn't help mentioning this in the latest Weekly issue. Apparently Italian and Polish versions of Burger King's site are running ProcessWire, others use Drupal. Perhaps, just perhaps, they're converting others too?

Hi guys so currently am writing a detailed tutorial about creating Modules, I have never created a module because i don't know all the classes and interfaces required, so this is like a detailed research for me, this is how i learn things by writing articles. However I might make some mistakes so i decided to make it on Google Docs to get comments and feedback, before posting on my website and Processwire tutorial site, this is going to be one heck of a detailed tutorial. Here is the link I will be updating it https://docs.google.com/document/d/1VA_WK-5qbnq3Ux_EOW3p92IcjbAcVZJ0aewIiFxmv2Q/edit# However I wanted to get a clear picture of the following Process Class and ConfigurableModule i noticed some modules require it and some don't My interpretation is that Modules with admin setting pages uses ConfigurableModule and Process are modules who require access to $this->pages and that sort Thanks all

hey! sorry moved to: http://bbstarter.nicegrp.com/ and on github: https://github.com/benbyford/bb-starter

Thanks for your comments, I saw them i really love to apologize to everyone, I got sidetracked by a big project in the office but am working on continuing the rest and yes VueJs is part of it

ok - sure, I can add CSS to help this issue - i will try adding overflow: hidden to the UL and update the module (might not get to it till Sept. as i'm away at the moment...)

I use piwik for a while now and love the extended statistics.. But you should be able to place a hidden image on the procached page which requests an uncached page of your installation which counts the hits that's whats piwik is doing in an <noscript> block for js disabled browsers e.g. <img class="hidden" src="/counter.php"> or <img class="hidden" src="/pathOfUncachedPage">

I'm not sure if you'd actually save very much processing capabilities, as you'd still need to process one request per page (at least without CDN enabled). It's only faster by the time needed to render the actual page. I'd really suggest going with the right tool for the job, which is google analytics or something similar, if possible. But the actual implementation would not be difficult / different to other ajax stuff often explained in the forums. Just send the current url to the server, look for the page in that path and count the view field up.

<?php $threshold = strtotime(date('d.m.Y 00:00:00')); // = today $selectorFuture = "parent=/shows/, show_date>={$threshold}, sort=show_date"; // or: sort=-show_date $selectorPast = "parent=/shows/, show_date<{$threshold}, sort=show_date"; // or: sort=-show_date foreach($pages->find($selectorFuture) as $show) { // echo table rows here ... } foreach($pages->find($selectorPast) as $show) { // echo table rows here ... }

<?php $shows = $pages->get('/shows/')->children; $currentTime = time(); $future = $shows->find("show_date>$currentTime"); $past = $shows->not("show_date>$currentTime");

Hello, in one of my current projects, we have a test and production stage with their own ProcessWire installations, and we regularly want to migrate template/field configuration to the next stage without migrating content as well. ProcessWire supports this via the import/export functionality in the admin GUI. However we (and some others) would like to do this as part of an automated process. There seem to have been some discussion on this topic and two existing modules that get pretty near our requirements: https://github.com/mindplay-dk/SystemMigrations/blob/master/SystemMigrations.module https://github.com/LostKobrakai/Migrations However, they try to solve more then we need and for mindplay-dk's module, development seems to have discontinued. At that point I decided to build a more simple module with reduced scope that basically just makes ProcessWire's import/export automation-ready. Thanks in advance for trying this out and any feedback! About this Module CAUTION: This module is incompatible with repeater fields and ProFields. The module enables you to transfer template and field configuration from one processwire installation to another in an automated way. Changes to templates or fields are exported to the file system immediately (so they can be added to source control together with changes in the template files) The import script is designed to run from the command line (so it can be invoked from your build/deployment tool). On invocation in import mode, a DB backup is created template/field changes from the persist directory are imported into the DB In restore mode, the import script can restore any of the DB backups previously saved How to Use Make sure the module is installed in the source and destination ProcessWire environments. After installation of the module, you should check if the module's default persistDirectory configuration setting fits your requirements. The module will automatically export all fields, fieldgroups, and templates to JSON files in the directory specified by that setting. Note that the same setting is used by the import script as well, so if you change it, make sure you change it in all affected ProcessWire environments. The JSON files can be transferred to the destination ProcessWire environment. Running the import script from the command line will import template and field data in the destination ProcessWire environment. Manual Installation Caution: Beta software - do not use in a production environment without prior testing and regular back-ups. Caution: This module is incompatible with repeater fields and ProFields. In case automatic installation does not work, get the code at https://github.com/jaromic/pw-autoexport-tf/ and follow the instructions in README.md for manual installation. Manual Uninstall Delete the following files and directories from your module directory: AutoExportTemplatesAndFields/ AutoExportTemplatesAndFields.module Download Install from the module directory, clone the repository via GitHub, or download ZIP.

This is a very basic guide on how to optimize a ProcessWire page for speed. It doesn’t go into the depths of optimization and perfect render paths but will provide you with some proven ProcessWire methods for faster websites. The big problems that are easy to fix are what we aim for. You want quick improvements? Then read on… First let's have a look ath the following graph. Those are the areas, we want to improve. Source: http://httparchive.org/interesting.php?a=All&l=Oct%201%202014 Clean up your HTML Look at your HTML source code. Are there any unnecessary parts? Remove anything that might not be needed and try to keep your markup as clean as possible. Avoid using too many external JS libraries or other tools. It is okay to include jQuery from a CDN, because most visitors will already have cached the file. Too many of those external requests will slow down the page. If possible, try to avoid render-blocking Javascripts and move your script tags to the end of the page, right before the body. In most cases, your Javascript will enhance your content but doesn’t need to fire before the site is rendered. Always think if you need to include another library or the fourth webfont on your site. Minify Markup The next step to save some bytes is to remove all whitespaces from your markup. It doesn’t have to look nice, it has to be loaded fast. We perform this trick with our new super-weapon: The AllInOneMinify module for ProcessWire. Install it like every other module for ProcessWire. Once activated, go to the module settings and tick the checkbox for “Minify HTML” and look at your sites source code. It should be minified. AIOM can handle conditional browser comments. If your layout depends on whitespaces you could “force” them by putting an into the markup. Optimize the CSS Now we’re heading for the next larger part of a usual website. We will combine all CSS files and then remove anything not needed (whitespace,comments) from it. Before we start, make sure your CSS files only contain rules that you really use. Especially if you’re using a framework like Bootstrap, most of the selectors are never used. Remove them carefully. We need the AllIneOneMinify module from the previous step again. After installation, open the template file where your HTML header is generated. We will now replace all stylesheet tags with a single file. AIOM needs to know all CSS (or even LESS) files, relative to your template folder. It will then output a link to a single, compressed CSS file. You might have this in your HTML head: <link href="<? echo $config->urls->templates;?>/css/grid.css "rel="stylesheet" /> <link href="<? echo $config->urls->templates;?>/css/style.css“ rel="stylesheet" /> Replace all links to Stylesheets with the single tag like this: <link href=”<? echo AIOM::CSS(array(‘css/grid.css’,’css/style.css’)));?>” rel=”stylesheet”/> You pass an array with the file names to the AIOM method CSS. It will return a link to the file. AIOM takes care of image urls inside CSS. It will detect changes in the source file and only generate a new file if necessary. While developing, you might want to turn on the “Development” checkbox in the module settings. Make JavaScript tiny Do the same as you do to the CSS to your Javascript files. First, clean up the code. Then install AIOM and compress all JS files into a single file using the AIOM::JS method that works as the AIOM::CSS method. For best results, think about including scripts like jQuery from a CDN and put your scripts below the content, before you close the body tag. Also note that the order on how your throw your JS files into AIOM might be important, depending on the code inside. Get the right image size. ProcessWire comes with great image tools. Use them, to make images exactly the size you need them. You don’t have to serve that little thumbnail with over 3000px length just because the editor wasn’t able to reduce the size. Example: Your designer wants to have a slider image with a maximum size of 600x320 pixel. To output the image with that exact dimensions, use the API accordingly: $sliderImage->size(600,320)->url; An even better way would be to use adaptive images or the new srcset attribute combined with a JS fallback. Then your site only delivers the image size as needed. Hint: Play around with the image quality setting in the config.php. Maybe you don’t need images with a JPG quality of 90+. Compress the images further with minimize.pw To make images even smaller, we can use the minimize.pw service. This service will compress images nearly lossless by using more complicated tools to reduce the size of PNGs and JPEGs. By doing this, you remove bytes from the largest chunk of your website weight. minimize.pw is free for 2000 images. Just enter your E-Mailadress and receive a free key Then you have to install the ProcessImageMinimize module and enter they key. You can now activate the option to automatically compress every image uploaded. It is fail-safe and will compress images in the background. Please note, the automatic mode only works with images uploaded AFTER you have activated the module. You can manually select image fields with the ->mz() API method. Just include it before you output the image in your template file: $myImage->width(300,300)->mz()->url; We've closed the service. You could use something similar like Imgix ( https://www.imgix.com/ ). Activate GZip compression on your site Another method to speed up your site is to activate GZip compression. The server will then send all files compressed to the client. This works with nearly all browsers and the CPU power required is minimal. You can tell your server to do this, by adding those lines to your .htaccess file in your root directory. Please take care, that you do not overwrite the ProcessWire rules in the file! For best results add them on the top of the .htaccess file: <IfModule mod_deflate.c> AddOutputFilter DEFLATE js css AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html </IfModule> This was taken from another forum post. Tell the client to cache stuff To make repeating visits faster, we can tell the browser to cache special files for a longer period of time. Again, add this on top of your .htaccess file: <IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 seconds" ExpiresByType image/x-icon "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" ExpiresByType application/octet-stream "access plus 1 month" ExpiresByType application/x-javascript "access plus 1 month" </IfModule> <IfModule mod_headers.c> <FilesMatch "\\.(ico|jpe?g|png|gif|swf|woff)$"> Header set Cache-Control "max-age=31536000, public" </FilesMatch> <FilesMatch "\\.(css)$"> Header set Cache-Control "max-age=2692000, public" </FilesMatch> <FilesMatch "\\.(js)$"> Header set Cache-Control "max-age=2692000, private" </FilesMatch> <FilesMatch "\.(js|css|xml|gz)$"> Header append Vary: Accept-Encoding </FilesMatch> Header unset ETag Header append Cache-Control "public" </IfModule> Remember, that this caching might be annoying while developing the site. Use the internal cache (or ProCache) Another trick to make the site faster is to use a caching system. This will “store” your rendered site so you don’t have to query the database that often. We can either do this with the internal cache of ProcessWire or use the commercial, official ProCache module. Using the build-in system, you go the the setting page of a template and open the “Cache” register. You can now set the Cache time and what happens if something changes. The settings depend on the content of the site. Mostly static content can be cached longer and you might not need to reset the cache every time. Dynamic sites will need shorter cache times. ProCache (buy here) is even faster because it will bypass PHP and the database. Files are served directly as HTML. Please note, that caching might make the site faster but it can create new problems. Use with care. Summary Keep your code as clean as possible. Remove anything unnecessary and then compress HTML,CSS and JS using the AIOM module. The largest part of your page weight are images. Keep them small by using the appropriate dimensions and consider services like minimize.pw. In the end, use intelligent caching and buy ProCache. Following this guide takes not more than an hour but can speed up your site and make your visitors happy. This was just a quick overview of techniques to optimize your page speed. There is plenty of stuff you can do but the steps above are a good first step. Maybe you can share your favorite methods (or links) to start the discussion.

@bernhard thanks, I've fixed the submenu gap in the main nav. I also managed to fix the "hoverSaveDropdown" issue (flicker on hover). It's only CSS and I have to test a little more but it's promising. The solution is to hide the "dropdown" part of the button and add the down arrow with :after. Plus I had to add pointer-events: none to the span inside the buttons as they also caused flickering. I underestimated this issue because it wasn't as noticable in the Reno theme as in the default. Now it seems fine in both of them. As for the centered logo in the login page: I'm not sure about it. I like that it sits in the corner but if there are others who vote for it, then let it be.

Just for your information @benbyf, I'm getting a DNS error when trying to follow the demo link: http://nicegrp.co.uk/dev/bb-starter/ Not sure if it is just me? Thanks for sharing.

Now everything works fine Here is a small video to demonstrate the ajax login process for others who are also interested in creating an similar login process. Finally I have decided to redirect to the same page instead to the profile page because I think it is much more comfortable for the user. The form will be loaded via ajax. All inputs (username, password) will be checked in real time against the database. If everything is correct, the user is able to click the button and the login process starts. After finishing the login process I use a get parameter in the url to show a success message. Best regards

Thanks guys! I went with Horst's solution. Have a great weekend!

I call boxes of filter links here via ajax on demand: http://joerg-hempel.com/archiv/ In the ProCached file, the content is empty. On demand it fetches it via ajax request, and on PW side via a page and urlsegments. You can use the network tab to view the request. But it is only requested one time per session. I store the fetched content in client browser local session storage, to avoid multiple server requests for the same content, if the user clicks around on the filter tabs.

Hi @rolisx and welcome to the forums. foreach ($pages->get('/shows/')->children("show_date<=".time().", sort=show_date') as $show) { and then another one where the show_date is greater than the current time()

You might also find this option useful:

Loved your text Ivan!

Ok, some more updates. @tpr and @bernhard - hopefully I have taken care of your suggestions with this latest version. Now if the Dumps Recorder panel is enabled, the built-in dumps panel is not triggered which should make things simpler. Once you disable the Dumps Recorder, it automatically clears recorded dumps. They are also cleared when you logout. This behavior has also been added to the Mail and Event Interceptor panels. Other updates improve detection of template constants and functions in the Template Resources panel and adding editor links to the included files section. Any thoughts on these improvements? Do they come close to what you were looking for regarding keeping the Dumps Recorder manageable?

Hi Macura, used together with AdminOnSteroids, the module creates a gap under the tabs in my PW setups. If I comment out the css floats for testing, the gap disappears. It has to to with the height: 2.6em coming from .WireTabs (in combination with the float). If I set height to something else, the gap changes. If I set the UL to overflow: hidden, the gap goes away completely.

I am using the default theme and want to send a small feedback. a) if I select "sticky header" the tabs have not background any more (they float freely). I thought they where easier to read before. Why not having the background from the sticky header also there (as it was before) or a lighter variant of the background? Or a "pills" menu design could look fancy there - opposite to tabs they look nice when floating. b) I find the color and place for the description and hints tooltip hard to find, but I want editors to take that information seriously. I switched that feature of but wanted to send a feedback anyway. ... or the tabs could be moved down?

Two major changes this morning! 1. The "Variables" panel is now called "Template Resources" and contains: variables, constants, user defined functions, and included files. 2. The Console panel now also has access to any functions defined in any included files. In this example I am calling the renderNav() function from the _funct.php file.

the way i do it is to create a Runtime Markup field that outputs a value, for example the name of container page template; then you can reference that value in your conditional visibility.

Sorry, but I cannot resist: For me this sounds funny, as the index.php is wrapped around everything what has to do with / runs within PW, including 1k+ core files, all your site files, incl. templates, third-party modules and optionally other included scripts. Measuring the index.php execution time seems to be not the most useful concept for anything more than determining the total execution time. Also, if you have encountered times from 0.5 to 3-4 seconds for the same requests, it looks to me more to be server side issues than not performant coded templates or third party modules. If you would have encountered a request with a specific template to be always 3-4 seconds whereas others run under 0.5, this would be an indice for code bottle neck or that like.

Hello tpr, thanks for your help! I got it working with this code: <script> $("#mainlogin-form").on('submit', function(e){ e.preventDefault(); $.ajax({ type: "POST", url: "<?php echo $pages->get('template=login')->url;?>", data: $("#mainlogin-form").serialize(), success: function(data){ window.location.href = "<?php echo $pages->get("template=profile")->url;?>"; } }); return false; }); </script> For all others who are interested in: First step: I prevent the page reload with e.preventDefault() - this is necessary to prevent the reload, otherwise you will not get logged in Second step: I made a Ajax request to my login template, where the form will be processed (validation stuff, login process,...) url: the url to my login page data : serialize all the form inputs that should be sent with the Ajax request. success: if all is alright then force a redirect to the profile page Best regards

Additional use cases to justify the need for this - one-to-one relationship support. Example: internal only SEO "Pages" (records) attached to one page only, e.g.: - JS slider records, when we need to limit the number of items by design - all sorts of other records when we need to limit the number of records by design... While we are at it, such a limiting capability can be handy in the case of other types too, such as AsmSelect, PageTable to name a few

Updated the article

You're mostly missing the curly braces for the foreach, which is only allowed if only a single following statement is supposed to be foreached. $news = $pages->find("template=news-item, sort=-post-date"); foreach ($news as $newsItem){ $title = $newsItem->body ? "<a href='{$newsItem->url}'>{$newsItem->title}</a>" : $newsItem->title; $icon = "<i class='uk-icon-newspaper-o uk-icon-justify'></i>"; echo "<div class='uk-width-1-1 news-headline-wrap'>{$icon}{$title}</div>"; }

Here is something I hacked together quickly for automatically adding new child pages to the pagetable field. This is only if you are using the page as the parent. It also handles deletion of items if they are trashed externally. I also disabled the internal check for orphans - because they have been automatically added already, there is no need for the "Children were found that may be added to this table. Check the box next to any you would like to add." option. I seems to be working great here, but please test carefully!! Add this to your admin.php file: wire()->addHookBefore('InputfieldPageTable::render', function($event) { $pp = wire('pages')->get(wire('input')->get->id); $ptf = $event->object; //remove pages from pagetable field if they were externally trashed foreach($pp->{$ptf->name} as $item) { if($item->is(Page::statusTrash)) $pp->{$ptf->name}->remove($item); } //add pages to pagetable field if they were created externally foreach($pp->children as $child) { if(!$ptf->has($child->id)) { $pp->{$ptf->name}->add($child); $pp->of(false); $pp->save($ptf->name); } } //reset orphans property so that we don't get a message asking to add new pages that are now already automatically added $ptf->setOrphans(new pageArray()); });