Leaderboard

This week, some more layout options have been added to it that I think many may find useful. This post highlights them with a screencast: https://processwire.com/blog/posts/processwire-3.0.57-and-admin-theme-framework-updates/

Hi ! Please welcome https://www.docpaddock.com/en/ It's a brand new rebuild of an old project called Trajectons.com (not online any more). It's a competition of predictions. You have to guess some podiums in MotoGP/Moto2/Moto3 categories or F1 (I'm a MotoGP fan). You have a free plan, another one where you can buy an avatar generator, and a Pro one to unlock some cool features. I knew nothing about PW a few months ago and its community helped me a *lot*. I wouldn't have be able to do this without your help. So thank you and have a look if you're into that kind of sports competition You can still sign up before the first Grands Prix seasons : it starts this sunday (26/03).

I finally re-launched Notanotherdotcom - my business website. Things were looking a little dated for a few years, but finding some spare time to give it an overhaul was difficult (I'm sure that resonates with a lot of people here). There's still more content to go on. I'm working through some more recent projects to put on the portfolio but I want to do a bit of a write-up for each one rather than just keep putting up isolated screenshots without much description of what work actually went into each project. It also has a blog where ProcessWire will definitely get a mention. I started writing the second article yesterday, titled "A Better CMS", but when I finally settled on my 3 main reasons for using ProcessWire it quickly began turning into 3 separate blog posts, so keep an eye out for those.

We started using mustache template engine with PW. Since mustache is implemented in various languages. Currently I can render anything either server side or client side with js or php and both share the same code base. Data can be either objects arrays or json whatever you like. We also use patternlabs node mustache version for prototyping and so all patterns can be used 1:1 in PW later using some simple controller system based on Classes that extend PW WireData so all API can be used. We also use terrificjs for easy modular js components. So no vue or react but just to mention that there's everything possible in PW.

I don't think you need to use a Hook for this. Since ProcessWire does not output any markup, you can echo whatever you want to be your content, whether it is from another page or another field or hard coded, or whatever. A couple of examples $out = $page->title; $out .= $page->summary;// some text field; if($page->name == 'my-different-page') { $page->body = 'Some custom Content';// @note: overwriting body field content // or if grabbing from some other page //$settings = $pages->get('/path/to/other/page'); //$out .= $settings->extraContentTextField; } $out .= $page->body; echo $out; Written quickly, pseudo code, etc...

Some new features just added. Yes, these are starting to get into the functionality provided by ModuleToolkit, but I am still playing with the user interface and workflow trying to find the most efficient scenario. Along with the interface that is added to each module's settings page, this screencap shows the new interface available from this module's settings page. It shows a list of all stored module setting backups and adds a new interactive interface for selecting modules whose settings you want to copy to another site. As you check/uncheck modules, their settings will be added to the Settings textarea ready to copy to another site. If you paste in settings from another site and check "Update All", these settings will be imported into this site. You can choose to be warned of version mismatches, or force the import anyway. Let me know what you guys think - am I on the right track with this, or is the ModuleToolkit approach better, or is there room for both? I still may combine the functionalities of both modules, or maybe even create a service that lets you manage your modules and their settings across multiple sites from once central dashboard.

Hi @microcipcip - thanks for a really great commentary on PW, what frontend devs are looking for, and how PW can fit those needs. I am really excited to see your integration of GraphQL into your ProcessVue site profile - definitely planning on using it on an upcoming project. Thanks again for all your great work on this.

Metadata Exif Version 0.9.0 (currently a WIP) for PW 2.8.+ / 3.0+ This is a new attempt to add easy EXIF reading support to ProcessWire. It should be an easy and less error prone API task. Thats why the module internally uses lowercase key names for all EXIF keys and all of your requested key names. But you are not forced to use lowercase key names, you can use any mixed chars for it as you like. You will get back an array or object with keynames / properties named the same (casesensitive) way as you have passed them in with your request. API The module adds one hook to the Pageimage: getExif($options = null) Without any $options passed to the method, it returns all EXIF data in a RAW multidim array. Passing a simple list with requested key names as array to it returns an array with only the values of those requested keynames. If you want change the output from array to object, you can use the a boolean "toObject" set to true. Additionally to this and / or any other option, you need to put your requested keynames list to the option "keys". $rawArray = $image->getExif(); $options = array('Whitebalance', 'Flash', 'ISOSpeedRatings', 'FNumber', 'UserComment'); $array = $image->getExif($options); $options = array('toObject' => true, 'keys' => array('whitebalance', 'flash', 'isospeedratings', 'fnumber', 'usercomment')); $object = $image->getExif($options); Possible options are A working example $options = array( 'keys' => array('ISOSpeedRatings', 'FNumber', 'Flash') ); echo "<table><tr>"; foreach($options['keys'] as $key) echo "<th>{$key}</th>"; echo "</tr>"; foreach($page->images as $image) { $exif = $image->getExif($options); echo "<tr>"; foreach($exif as $value) echo "<td>$value</td>"; echo "</tr>"; } echo "</table>"; This will output something like: With the boolean option "unformatted" passed as true, the output would look like: For some keys, that only store something like integer values, what are not very meaningful to most of us, the module contain xyzFormatted methods. This way, it is easy to enhance and maintain the module in the future. Help wanted It would be nice if some of you test the module and report back if the intended API suites your needs. And you are very welcome to post suggestions for which keys you want to have a ...Formatted method. Thank you! https://github.com/horst-n/MetadataExif

http://caniuse.com/#feat=css-grid The CSS standard Grid Layout will soon be usable in the stable versions of the leading browsers. It should hit Chrome and Firefox in March. It is in Safari tech preview, but no clear date. MS Edge is working on updating support. I guess support in mobile browsers will follow. 2017 is the year to use it on sites, where it is OK to experiment with bleeding edge stuff. A complete guide to the system on CSS Tricks Learn by examples (includes video tutorials) Rachel Andrews summarizing use cases for Grid, Flexbox and Box Alignment in a single article on Smashing Mag (note: heavy with Codepens) News on all things CSS Layout curated by Rachel Polyfill support is unfortunately dragging behind with no contributors stepping up to help Fremy

I've been looking into both React and Vue.js for a while and how front-end frameworks like these could integrate with my current workflow of building websites with ProcessWire. Ultimately I've decided to go with Vue.js after using it for certain sections of a few previous projects and familiarizing myself with the documentation, but I assume the same concepts I'm trying to work out would apply for both. So for my next project, I was thinking of using ProcessWire to simply manage content and serve what would function as the website's API. Essentially I would install ProcessWire into a subdirectory of my site's root folder, say '/api', and all template files would serve JSON only. The site itself would essentially be a webapp served by a simple node.js server, with all routing handled by the vue-router component of Vue.js. This way I could also utilise some sort of server side rendering to avoid initial asynchronous content loading. I would then set up my ProcessWire tree structure so that the API routes match those defined by vue on the front-end, only prefixed with '/api', subsequent pages could then be loaded asynchronously. Has anyone used ProcessWire in a similar way in the past, or used it in another way alongside React or Vue.js? I would eventually like to start using this approach for client projects, my first attempt will be an internal project however.

I don't think there is a setting or hookable method you can use for this. But AdminOnSteroids adds body classes based on the user role, so you could use a bit of custom jQuery to remove the Tree panel toggle button for a role: // remove Tree panel toggle for editor role $('body.role-editor').find('.pw-panel[data-tab-icon="sitemap"]').parent('li').remove();

@Cengiz Deniz Yep, it works very well, but only until you request a key that is not available in an image, than it will throw notices or warnings. The new module I linked to, lets you do the exact same as you does, but without the redundant hassle of validation. So, you can use your code, but I suggest to add a check for available keys: $image="http://cdeniz.com/".$img->url; $exif = exif_read_data($image, NULL, true, true); $tarih = isset($exif["EXIF"]["DateTimeOriginal"]) ? $exif["EXIF"]["DateTimeOriginal"] : 'N/A'; // or anything you want, like '', null, ... $kamera= (isset($exif["IFD0"]["Make"]) ? $exif["IFD0"]["Make"] : '') . " " . (isset($exif["IFD0"]["Model"]) ? $exif["IFD0"]["Model"] : ''); ... ... ... Personally I find this to unreadable and redundant, therefore I prefer the new modules way: $options = array('keys' => array('DateTimeOriginal', 'Make', 'Model'), 'toObject' => true); $exif = $image->getExif($options); // now I can access like this: $tarih = $exif->DateTimeOriginal; $kamera = $exif->Make . ' ' . $exif->Model;

Also: https://processwire.com/blog/posts/introducing-a-new-processwire-site-profile/

Welcome back NooseLadder. Is it already a year ago ? Time really flies man. I remember your posts very well. Here you go: https://github.com/ryancramerdesign/BlogProfile http://modules.processwire.com/modules/process-blog/ Remembering your posts I think you have enough code experience for using pw.

@giannisok a new one already? Only just got my head round the first one so my PHP journey continues. Thanks for sharing.

You need to hook after not before.

If you are using an older version of PW and have Tracy Debugger installed together with SessionHandlerDB you can end up with truncated session data, which causes a CSRF error. See this post (and the thread in general) for more:

Looks really good - doesn't scream 'this is built with a framework'. Minor heads-up - Chrome inspector flags up 'Subscribe to our Newsletter' form as pointing to an insecure endpoint.

Hi @Markus Thomas, and welcome to the forums. In your code example, it doesn't really make sense to do... echo $c->fields; ...or... echo $p->fields; $page->fields is the same as $page->fieldgroup, which the API docs explain as follows: So the fieldgroup is the same for every page that uses the template (i.e. every Repeater item/page in the Repeater field), and you can't simply echo a fieldgroup object in any case. I think instead you want to get the individual subfields you have added to the Repeater field, and you normally do this by getting the subfields by name. For example: <?php foreach ($page->first_rep as $c): ?> <?php echo $c->title; ?> <?php echo $c->body; ?> <?php foreach ($c->second_rep as $p): ?> <?php echo $p->my_other_field_name; ?> <?php endforeach; ?> <?php endforeach; ?>

This week we have a new core version on the development branch and some nice updates to our Uikit admin theme in development. This post covers them in detail, includes a screencast and links to a live demo of the updates. https://processwire.com/blog/posts/processwire-3.0.56-and-uikit-admin-theme-updates/

I would be interested in this service.

Very interesting, that CSS-Grid stuff. I'm thrilled. Here is a short list of usefull links: (must read) http://jensimmons.com/post/feb-27-2017/learn-css-grid http://gridbyexample.com/examples/ (some specs and technical info) http://gridbyexample.com/browsers/ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement https://drafts.csswg.org/css-grid/#grid-containers (some more) https://css-tricks.com/css-grid-one-layout-multiple-ways/ PS: you also can support older browsers with different fallbacks, there are tuts over that too.

You only sanitize the user input. So anything coming in via GET/POST/… data. Anything else comes from your system and your system should never have data in it, which aren't "save", so no need to sanitize anything there. It's not only about plainly changing the number to another one. People try to inject all manner of things into websites, like sql statements or else. So it's for security as well as for preventing errors in your system because of values you didn't expect.

Even with the setting enabled there are various places in processwire where output formatting is not enabled and therefore one does still get a list of images (might not be the case here, but still). Also I did check the website and the urls for the images are "/site/assets/files/xxxx/", which is the result of using ->url on the images list instead of a single image. Also a field named "images" should probably never return a single image or it should at least be renamed to image.

The world is a vampire. (and an earworm for all you smashing pumpkins lovers/haters. You are welcome).

I doubt if ProcessWire will do that for you (unless ASMSelect's JS actually does this, which would be news to me). Data Attributes are not form elements so will not be submitted with the form. You will need JS to grab those attributes and submit them along with the form, e.g. as hidden elements created on the fly on submit.

The person who marked this as CON did not understand Processwire... And they left out the same in the case of WordPress: "Everything has to be a 'custom post' even if you don't use it as a post". Same for Drupal: "Everything has to be a 'node' even if you don't use it as a node" This is just the chosen terminology, so the person who made it up does not understand too much

I am glad that this project is helping ProcessWire getting more devs on board :). I just want to say that I wouldn't have been able to finish ProcessVue if it wasn't for the amazing ProcessWire community. I believe that the community truly is the biggest selling point for new users (like me). Before trying ProcessWire I used OctoberCMS for a while but when I was stuck I got 0 support from the forums, so...althought the CMS is based on the amazing Laravel framework, I just left! I think that ProcessWire is extremely powerful and flexible and with time will become the tool of choice for frontend developers, the new GraphQL module will also help on this direction. Droves of frontend developers are looking for a CMS like this, they just don't know it exists! The usual keywords they use when looking for a SPAs CMS is "Decoupled CMS" or "Headless CMS", and I believe that that's exactly what ProcessWire is for! Some frontend developers prefer to use NodeJS, but the learning curve is huge if you need it for a non trivial project, and the worst thing of all is that after two weeks ANY js tool you may have used is outdated. See for example how Angular has been replaced with React or Vue, and Gulp with Webpack. That doesn't mean that I am against improvements in this regard, I just feel that it's just too much for us poor frontend devs to cope with! ProcessWire is stable, easy to use and won't change API every week. BTW, after that I migrate ProcessVue to GraphQL I am also planning to add Auth0 login integration with JWT, as I think that login/signup is a common feature in SPAs. I am sure I'll have to annoy @Nurguly Ashyrov and the rest of ProcessWire community for getting it in sync with ProcessWire users, but the result should be quite useful

I am sending the NEW version of Simple Contact Form. This new version uses module MarkupGoogleRecaptcha in order to render the captcha. If you have downloaded Valitron validator through composer then add the following line to your _head.php: include(dirname(__FILE__) . "/../../vendor/autoload.php"); or include the old-way on the top of "partials/contact/_controller.php": require(dirname(__FILE__) . "/../../vendor/vlucas/valitron/src/Valitron/Validator.php"); There are 3 files currently: contact.php (template) partials/contact/_controller.php partials/contact/_email.php First file contact.php: <?php namespace ProcessWire; include('partials/contact/_controller.php'); ?> <h2><?php echo __('Contact Form') ?></h2> <?php if($session->flashMessage):?> <div class="alert <?php echo $session->sent ? 'alert-success' : 'alert-danger'?>" role="alert"> <?php echo $session->flashMessage;?> </div> <?php endif;?> <form id="contact-form" action="<?php echo $page->url;?>" method="post"> <div class="form-group <?php echo $v->errors('name') ? 'has-error' : ''?>"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-user"></i></span> <input required class="input-lg form-control" name="name" id="name" type="text" value="<?php echo $name?>" placeholder="<?php echo __('Name') ?>"> </div> </div> <div class="form-group <?php echo $v->errors('email') ? 'has-error' : ''?>"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope"></i></span> <input required class="input-lg form-control" name="email" id="email" type="email" value="<?php echo $email?>" placeholder="<?php echo __('Email') ?>"> </div> </div> <div class="form-group <?php echo $v->errors('phone') ? 'has-error' : ''?>"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-phone"></i></span> <input class="input-lg form-control" name="phone" id="phone" type="tel" value="<?php echo $phone?>" placeholder="<?php echo __('Phone') ?>"> </div> <div class="field-notice" rel="phone"></div> </div> <div class="form-group <?php echo $v->errors('message') ? 'has-error' : ''?>"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa fa-quote-left"></i></span> <textarea rows="7" class="input-lg form-control" placeholder="<?php echo __('Message') ?>" name="message" id="message"><?php echo $message?></textarea> </div> </div> <div class="form-group"> <?php echo $captcha->render()?> </div> <button id="contact_send" class="btn btn-default" type="submit"><i class="fa fa-paper-plane" aria-hidden="true"></i> <?php echo __('SEND') ?></button> </form> <?php $session->remove('flashMessage'); $session->sent = false; echo $captcha->getScript(); ?> Then file partials/contact/_controller.php: <?php namespace ProcessWire; use Valitron\Validator; $captcha = $modules->get("MarkupGoogleRecaptcha"); $name = $sanitizer->text($input->post->name); $email = $sanitizer->email($input->post->email); $phone = $sanitizer->text($input->post->phone); $message = $sanitizer->text($input->post->message); $v = new Validator([ 'name' => $name, 'email' => $email, 'message' => $message, ]); $v->rule('required', ['name', 'email', 'message']); $v->rule('email', 'email'); $contactFormRecipient = 'your@company.com'; if ($input->post->name) { if ($v->validate()) { if ($captcha->verifyResponse() === true) { $subject = 'Contact Form'; $messageHTML = include_once('partials/contact/_email.php'); $mail = wireMail() ->to($contactFormRecipient) ->header('Reply-To', $email) ->subject($subject) ->bodyHTML($messageHTML); if ($mail->send()) { $session->flashMessage = __('Thank you for your message! We will get back to you.'); $session->sent = true; $session->redirect($page->url); } else { $session->flashMessage = __('Mail not sent. Error occured.'); } } else { $session->flashMessage = __('Recaptcha Validation Error'); } } else { $session->flashMessage = __('Please correct the errors and try again.'); } } ?> And finally partials/contact/_email.php: <?php ob_start();?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><?php echo $subject; ?></title> </head> <body> <h1>New message from <i><?php echo $name; ?></i></h1> <p><?php echo $message; ?></p> <hr> <h3>Contact Info:</h3> <p><strong>Name:</strong> <?php echo $name; ?></p> <?php if(!empty($phone)):?> <p><strong>Phone:</strong> <?php echo $phone; ?></p> <?php endif;?> <p><strong>Email:</strong> <a href="mailto:<?php echo $email; ?>"><?php echo $email; ?></a></p> </body> </html> <?php return ob_get_clean();?> Hope you like it!

@ryan Here is a sample in firefox. Just and FYI The field list dropdowns have no initial "instruction" or default option in both chrome and firefox on all pages. There is no highlight for the currently selected item in the sidebar in both chrome and firefox after lost focus. The expand/collapse chevrons are not aligned in firefox. They appear correct in chrome. Everything else looks fantastic! Looking forward to the release!

I think maybe this module uses the core ProcessForgotPassword module. You may need to set the config option for that module: "Email address to send messages from"

If the details are not covered by an NDA, maybe you could share them publicly in this very topic

Hi all, My first – hopefully useful – ProcessWire related tutorial: http://szabesz.hu/blog/install-processwire-in-a-subfolder-on-shared-hosting-cpanel_ins-sub/

Click "Clone or Download" on the Github page, then right-click on the "Download Zip" link and paste that into the "Add Module from URL" install option.

I would also love to see this - I think it would be great if we could define it in a Github repo changelog.md file and have the automatically imported into the text in the modules directory, and perhaps even displayed in the module info within a PW install. Perhaps it would even be nice to have a way to add a flag about breaking changes that would show up in the ProcessWire Upgrades module so you are warned before upgrading. @ryan - any thoughts on this? I'd be happy to work on it - obviously I could do the PW side of it from the repo, but would need access to the php files for the modules directory to make that side of things work.

@kongondo Thanks, I got the menu working with a custom menu builder functions. I couldn't help myself from digging around the in the the module code, though . I think I've found what seems to be a fairly simple solution to the quoted attributes breaking the form output. In ProcessMenuBuilder.module, on line num. 1111: https://github.com/kongondo/MenuBuilder/blob/bfc032cb3a07b65e732469b16b5286563bd709e9/ProcessMenuBuilder.module#L1111 Change: <input type="text" value="' . $title . '" name="item_title[' . $id . ']" class="menu_settings" id="item_title' . $id . '"> To: <input type="text" value="' . htmlentities($title) . '" name="item_title[' . $id . ']" class="menu_settings" id="item_title' . $id . '"> The htmlentities() function deals with the issue of quotes breaking the form input. I've tested it on my site and it seems to be working just fine. The icons display in the front-end and the admin widget item label, and the code displays in the item's title edit field after being saved. I don't know if I've missed anything though?

A simple rule to remember is: Any data input from the user needs to be entity encoded before outputting it back to a browser. What is entity encoding? It means taking some special characters and converting them to a format that isn't interpreted by the browser as anything but text. We care primarily about characters used for tags, like "<" and ">", characters used for single or double quotes (especially when values might end up in HTML tag attributes), and ampersands "&". These are the characters that can mean something more than just text to a web browser. But you don't even have to think about this if you just remember to entity encode any output. There are cases where you don't have to entity encode, like if you've already typecast something as an integer, or already run it through one of PW's filtering functions that removes special characters... $sanitizer->pageName() is a good example. But if you want to play it safe, just entity encode everything you are outputting back to the user... there's no harm in it. One way to tell if entity encoding is working is to enter a value like "<b>test</b>" in your form field. When you get it back, if it reads as test rather than <b>test</b>, then you've got a problem. No. $sanitizer->text() filters input for storage, not for output. It limits length and prevents linebreaks, among other things. While it strips tags (unless you tell it not to) it doesn't entity-encode any characters. The reason is that you don't usually want to store entity encoded text, unless it's meant to be stored as markup, like TinyMCE (in which case, none of this applies). So ideally, your sanitization would go something like this: // these values are for API use or storage $firstName = $sanitizer->text($input->post->first_name); $lastName = $sanitizer->text($input->post->last_name); // these values are for output back to the user $outFirstName = $sanitizer->entities($firstName); $outLastName = $sanitizer->entities($lastName); // you might prefer to bundle these into an array When it comes to outputting values that came from the user, the $sanitizer->text(); is certainly a good idea, but it's not required. It's not going to make the text any safer for output than $sanitizer->entities(); will on it's own.