Leaderboard

This week is all about repeaters, something that we didn't cover on the roadmap last week–we always like to save a few surprises to keep things interesting. We've also got a preview of the new Repeater Matrix field coming soon to the ProFields package… Read the post here: https://processwire.com/blog/posts/processwire-3.0.4-repeaters-revisited-preview-of-profields-matrix/

Put it in a repeater

Thanks guys glad you like what you see! Actually I haven't done anything in that respect, other than add the option to have them be collapsed by default (something that's been requested by a few people). But I agree just having that option makes quite a difference. It is using pages in exactly the same manner as regular Repeaters. Repeater Matrix actually extends Repeater, in the PHP class sense. So the core Repeater class handles all the page management for Repeater Matrix. This also enables you to convert a Repeater to a Repeater Matrix field (or back again) just by changing the field type.

Update on performance: I copied the install to my local vagrant development box where it is working smoothly. No long page loads and Lister Pro is fast even with 5000 logs. So the performance issues are related to the godaddy server - who would have thought that

Fieldtype and Inputfield ImageMarker As of 02 January 2018 ProcessWire versions earlier than 3.x are not supported Version: Stable Project Page: Github Modules Directory: http://mods.pw/Bk OR http://modules.processwire.com/modules/fieldtype-image-marker/ Requires: ProcessWire 2.4 or greater ######################## About This module allows you to easily 'place markers' on an image. Each placed marker's position/coordinates (x and y) are saved in the field as well as the ID of the ProcessWire page the marker refers to. In the backend markers are placed on a specified base image. In the frontend, using each saved page ID you can then retrieve any information you want about the pages being referenced and display that on your website over the same base image you used in the backend. The module is useful for a diverse number of uses including: Product demonstration: place markers on various parts of your product to showcase its features. Using a bit of CSS and/or JavaScript you can create pop-up boxes displaying more information about that feature of the product. The information (in this case, feature), would be information you've stored in some field (e.g. a text field) in the page marker (i.e. the page being referenced by the coordinates). Office locations: place markers on a map showing global offices of a multinational company Points-of-Interest: place markers showing points of interest on a map or location or anything. The coordinates are saved as percentages. This means they will scale well with the image being marked. This module came about as a result of this request. @credits Ryan Cramer: This code borrows from his FieldtypeEvents. @credits Helder Cervantes: Module concept, HTML, CSS, JavaScript. @credits Roland Toth: CSS, Inspiration. API In the frontend, the field returns an array of ImageMarker objects. Each of these has the following properties info (integer): The page ID of the marker (i.e. the page being referenced by the marker. Using this, you can get the referenced page and have access to all its data. infoLabel (String): The title of the page (above) referenced by the marker (runtime only). x (Integer): The x-coordinate of the marker (%). y (Integer): The y-coordinate of the marker (%). You grab the properties as in any other PW field, e.g. $out = '<img src="'. $page->base_image->url . '" alt="">';// image to place markers on 'base_image' is the name of the file field foreach ($page->marker as $m) { // do something with the following properties $m->id;// e.g. $pages->get((int) $m->id); $m->x; $m->y; $m->infoLabel; } // the CSS and HTML are up to you but see InputfieldImageMarker.module for examples Frontend implementation is left to you the developer/designer

I recently installed a client site at GoDaddy (I tried to talk them out of it, but had to work with what they had). It was one of those $5/month sites, not a VPS. I had to change the RewriteBase in the .htaccess file to "/", but otherwise found that it worked just fine. Granted it's not speedy, but everything runs acceptably for a low traffic site. With ProCache installed it's actually quite fast. Based on the things you've said, I would guess that there's a bottleneck somewhere, and that the GoDaddy server is just making that bottleneck more obvious. Speed should not be significantly affected by quantity of pages in the site, so it points to something, somewhere in the site that is loading a large amount of pages (most likely a hook or module). I would enable debug mode, and then view the Debug info in the bottom of the admin screen on one of the slow loading pages (though not Lister, since it ajax-loads its pages separately). Click on the "Pages" section to see what's being loaded. I'm guessing you might have something in there loading all 2000 pages. This might help to point to the source of the bottleneck.

It's like an enhanced repeater, but it doesn't actually use multiple templates. It uses just one, and pulls a few tricks behind the scenes to make it all work, while remaining perhaps more efficient than if it were using multiple templates. One other update I've been working on this morning for regular Repeaters, and now have functional (though have not pushed to GitHub) is making all repeater items ajax-driven, so they don't load until you click on them. This enables Repeaters to scale just as well as PageTable. It's a configurable option, but one that I think will be good to enable for folks that have lots and lots of repeater items... it should make a major different in editor performance.

You won't have to. It remembers contexts: What you want is either #2 or #3 below: In view mode, if you haven't searched for any media, if you click on 'edit mode' button, you will be taken to edit screen for the media type you were viewing, with the first media selected to edit. So, if in view you were on 'all' menu, you will be taken to 'all' in edit. If you were on 'image' in view mode, you will be taken to 'image' on edit mode. If in view, you'd searched for media and got back some results, if you then clicked on 'edit mode' button, you would be taken to the edit screen for only those found items, shown one media at a time with pagination. If you got back only one result in the search, you would be taken to the edit screen of only that result (without pagination of course) If in view mode you click on the title of a media, you will be taken straight to its edit screen, no questions asked See example GIF below In any of the above scenarios, clicking the view mode button will display the media you'd just edited. Edit mode: clicking on title of media in 'view mode' - (#3 above)

Video clip showing latest development...(note: previews of other types other than images are still a work in progress...)

This is updated/version of the AdminDocsTab module as was posted here: https://processwire.com/talk/topic/11803-admindocstab/ (that one is now obsolete) https://github.com/outflux3/AdminHelp AdminHelp module for ProcessWire Processwire helper modules for managing site documentation. Currently alpha state - please use with caution and report all errors. Instructions There are 3 modules included with this: the master module holds the settings for the other 2. This is a helper module which expects you to have already setup a hidden part of your page tree* to establish your help documentation, using any template (e.g. 'help-doc') and a body field (ckeditor) (*or you can run the setup and it will create these items). The help-doc template does not need to have an output template, as the module will only echo the body field inside the admin. In addition this 'help-doc' template requires "template select" field (separate module) which should be named template_select. (if you run setup it will create this). To have a global help page, which renders all of the help docs in an accordion view, you can install the ProcessAdminHelp module, which will setup a page to view the help docs, under setup. Help Setup Module (AdminHelp) This is how the setup module looks before setup is completed: If you use the automated setup, it will create the field, templates and pages, and will auto-set the module configuration: Example Help Tab (when using AdminHelpTab) Admin Help page (ProcessAdminHelp) This shows all help docs in accordion. (it is capable of displaying child pages also but this is not currently implemented in the module due to the family settings of the default templates). Accordion opened: Features Summary: Manages settings for the help templates (help-index, and help-doc), which enabled users to add new help docs where applicable; these can already exist and be named whatever, you just specify them in the setting. Getting the help/docs tab to show up in the right place (based on user preference template selected on the help doc). Has it's own scoped CSS styling that makes the documentation readable and engaging; has some @import fonts, and also rules to make text layout look correct in PW admin (paragraphs, lists, headings, blockquotes etc.) Makes it easy for site editors to add their notes, mods/edits/enhancements to the docs (edit button - currently only enabled for Superadmin - this can be made a setting based on user feedback). Using the secondary process module will create a 'Help Docs' page under Setup where you can view all of the docs in 1 place as an accordion. (could be moved somewhere else) There is also an automated setup that can run, where it will create the field, templates, and pages for you to get started. This module is probably optimized to handle no more than 10-15 or so help pages; if you needed more than that, the Process module may need to be changed to work differently. Most sites I do need around 4-5 help pages. *If you don't want to load those extra google fonts in your admin you can modify the CSS to your needs, e.g. remove the @import and then change the few lines of css that reference those; Once there have been a few testers, I can see about adding this to the modules directory in a week or so.

tbody class background color is not transparent in app.css line 3301. Is that what you mean? See sass reference, $table-background, default is white.

https://github.com/jdittrich/quickMockup It is HTML based and javascript-enhanced Found via this discussion: https://github.com/opensourcedesign/resources/issues/16

Currently working on an update with bug fixes, translatable links, and (hopefully) ajax refresh when new pages are added. I should have something ready tomorrow. Edit: Made a lot of progress this weekend but will need a bit more time to iron things out. I was able to get the field to refresh when the Add New modal dialog is closed, which works great for single item selects and allows you to select the new item without refreshing the page. However, for asm-style multi-selects, the refresh wipes out your existing selection when it reloads. Because of this I think that another approach will be required.

Tell me about it! 3.0 is going to be awesome! Every time I think ProcessWire is perfect, Ryan keeps proving me wrong by improving it Keep proving me wrong Ryan!

Uploading code in the BackendController public function upload(){ header("Content-type:application/json"); if($this->appContext->premium == 1){ if(count($this->appContext->images) >= self::PREMIUM_MEMBER_IMAGES){ return json_encode(array( 'status'=>'error', 'data'=> sprintf("Your Premium account has exceeded the maximum amount [%d]",self::PREMIUM_MEMBER_IMAGES) )); } } else if(count($this->appContext->images) >= self::REGULAR_MEMBER_IMAGES){ return json_encode(array( 'status'=>'error', 'data'=> sprintf("Your Premium account has exceeded the maximum amount [%d]",self::REGULAR_MEMBER_IMAGES) )); } $config=wire('config'); $file=$_FILES['file']; $wireuploader=new WireUpload('file'); $wireuploader->setDestinationPath($this->appContext->images->path); $wireuploader->setMaxFiles(1); $wireuploader->setOverwrite(true); $wireuploader->setValidExtensions(array('jpg', 'jpeg', 'gif', 'png')); $wireuploader->setTargetFilename($file['name']); $wireuploader->setAllowAjax(true); $resultSet=$wireuploader->execute(); if(!$wireuploader->getErrors()){ //Let's save the article to the page $this->appContext->of(false); $this->appContext->images->add($this->appContext->images->path.$resultSet[0]); $this->appContext->save(); return json_encode(array( 'status'=>'success', 'data'=> sprintf("The %s has been saved to your profile successfully",$file['name']), "count"=>count($this->appContext->premium) )); } else{ return json_encode(array( 'status'=>'error', 'data'=>$wireuploader->getErrors() )); } } } At first i was skeptical about it adding to the pages, because i felt it's too good to be true so checking the Real backend and viola this is the images added to it via the frontend

To make a table become responsive, you have to use something like FooTable and think which kind of presentation on smaller screens will make sense.

I think the latest developments in Processwire is going to make you ask to reconsider the workflow you follow when building a website. For example in my case wireRenderFile() and $layout changed my old workflow into a much better one. Now with the new matrix field I think it will go again to a next level

Oh wow, that's perfect! So the Matrix field is basically an enhanced repeater with multiple templates? Similar to a PageTable except the fields are visible and editable inline and the setup is all automated? I think we are going to need to develop some sort of flow chart or documentation page specifically about the different types of repeating fields and why you would choose one over the other for a particular use case

"I said go daddy, stop lazing about on the sofa"

Well that was it I also got lost in my several template files but that final echoing fixed my problem Now my next task is to sort them by date... we'll see if I need help with that too... Edit: ("limit=3, sort=-date") seems to do most of the magic, just need to get the date sort to show latest first. Edit: wrong syntax... ("limit=3, sort=-created") yey!

$page is always relative to the current page. So if you are asking for the siblings of the current page, it would do just that. Instead you need to use get, to make sure that parent is always the same. To do this you use $pages->get()->siblings inside the () add your selector.

Inside that foreach, add another using $news->children as $news. I would give a better code example, but I'm on my mobile. Sorry, I can't find the edit button on the mobile site. But I just noticed you aren't echoing out your title you need to use <?=$news->title?>

How exciting! So amped for final release. Ryan, you are amazing. :D :D wire('payments')->recipient('ryan')->amount(10000000.00)->currency('us_dollars')->pay(['express' => true]);

https://github.com/ryancramerdesign/ProcessWire/tree/devns And also the weekly blogposts detail most new stuff: http://processwire.com/blog/

https://github.com/ryancramerdesign/ProcessWire/tree/devns

Welcome to the forum, by the way

They are beautiful, both, the new repeaters and the matrix. Beautiful!!

I love what you've done GUI wise to... you removed the unnecessary space the old repeater took and making these not only more beautiful but also more practical. Awesome work !

There aren't enough Like buttons for this!

Have you instead of php.ini tried putting the settings in a file called .user.ini placed in your public_html? I mention this because i see a reference to this in the phpinfo().

This kind of error is usually because your code is overwriting the PW $user object. Try making your own user and password variable something like $u and $p, then there is no chance of that happening.

I have had this too and it is also reported on Github. The error comes from other third party admin modules that try to fetch the id of the currently edited page in admin. The error is raised because those third party modules blindly assume the id is an integer value and passes it unsanitized, for example, via $pages->get($input->get->id). That will raise those errors. Very hard to debug and detect is such a unsanitized selector request when it is called in a autoloaded modules ready event! I have submitted a patch / pull request for that issue on github. PS: Devs of third party modules that need to fetch the currently edited page can do it at least like: $p = $pages->get('id=' . $input->get->id); // but better validate the id before using: if(!is_int($input->get->id) && !is_numeric($input->get->id)) return false; // or only using is_int() ?? if(is_int($input->get->id)) { $p = $pages->get('id=' . $input->get->id); . PPS: I have to admit that I had done it wrong too in some of my custom modules.

well there is this: http://modules.processwire.com/modules/template-preview-images/ and then you could probably clone the radio inputfield and integrate something with this: https://rvera.github.io/image-picker/

I purely use CKEditor for text and text only. And only allow a few HTML tags. Mostly h2, h3, h4, then p, strong, em, ul, li and a. I disable the pwimage, table and all other thing not related to pure markup text. All other content could be added with a page table field row. So if they need a form, a map, an photo album, a single photo or something else, they can add it via the page table. All rows of the table are looped and set to a variable. That variable is set to the template and rendered on the main view.

Best Part is that I have a Data used in Wordpress to get subscribers so without breaking changes , I could easily forgo the Page Object Mantra and also pull directly from the database private function getFollowers($member_id){ $database=wire('database'); $statement=$database->prepare("SELECT COUNT( * ) FROM `member_subscribers` WHERE member_id = :member_id"); $statement->bindParam(":member_id",$member_id,PDO::PARAM_INT); $statement->execute(); $result=$statement->fetch(PDO::FETCH_NUM); return $result[0]; } Luckily this is PDO and it's totally awesome, My Client is really happy with the outcome of the Project because she loves the backend of Processwire and also that Google analytics someone created, and really i was skeptical of PW at first (because if something is too good to be true, then something must be wrong secretly) but now i feel more comfortable with it more than ever, I could go the PW "Everything is a Page Model" or go Rogue and cook up some things, but I love the everything is a page in some scenarios, e.g getting Parent of pages and finding Children , in some ways it feels like JCR in Java but not that advanced though. However i still have much questions ? 1. Having Multiple Albums per User 2. Social Authentication Seriously guys give Dropzone.js a spin for frontend uploading, it's dead easy, good bye

My Preferred method of Developing Processwire Templates If you look at the normal tutorials pitched at developing Processwire website, it's really not flexible, how so you generate alot of content and perform concantenations alot here's an example of my previous styling following the PW standard <?phpob_start(); //Get the Slides $ImageArray=$page->get('images'); $CountImages=count($ImageArray);?> <?php if($CountImages): ?> <div id="carousel-example-generic" class="carousel slide " data-ride="carousel"> <ol class="carousel-indicators"> <?php for($i=0; $i < $CountImages; $i++): if($i==0): ?> <li data-target="#carousel-example-generic" data-slide-to="<?php echo $i ?>" class="active"></li> <?php else: ?> <li data-target="#carousel-example-generic" data-slide-to="<?php echo $i ?>"></li> <?php endif; endfor; ?> </ol> <div class="carousel-inner"> <?php $count=0; foreach($ImageArray as $images): $thumb=$images->size(600,450); ?> <div class="item <?php echo ($count === 0) ? "active":"" ?>"> <img class="" src="<?php echo $thumb->url ?>" style="height: 450px;width: 600px;" alt="" /> <div class="carousel-caption"> <p> <div> <?php echo $images->description ?> </div> </p> </div> </div> <?php $count++; endforeach; ?> </div> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <?php endif; ?> <br/> <div class="col-md-12 pull-right"> <a class="pull-right" href="#"><img src="<?php echo $config->urls->templates?>/img/facebook_sarahs_nest.png" alt=""></a> <a class="pull-right" href="#"><img src="<?php echo $config->urls->templates?>/img/twitter_sarahs_nest.png" alt=""></a> <a class="pull-right" href="#"><img src="<?php echo $config->urls->templates?>/img/youtube_sarahs_nest.png" alt=""></a> </div><?php $homeContent=ob_get_clean(); $content= $homeContent. $content; ?> <h4>Sarah's Nest in Pictures</h4> <div class="col-xs-6 col-md-4"> <a href="#" class="thumbnail"> <img src="<?php echo $config->urls->templates?>/img/Official-Opening16.jpg" alt="..."> </a> </div> <div class="col-xs-6 col-md-4"> <a href="#" class="thumbnail"> <img class="img-responsive" src="<?php echo $config->urls->templates?>/img/Rabbit.jpg" alt="..."> </a> </div> <div class="clearfix"></div> <br> <div class="col-md-8"> <img src="<?php echo $config->urls->templates?>/img/sarahs-nest-object-bg.jpg" alt=""> </div> <?php $content.=ob_get_clean(); ?> Now how this works is that we put a content in this page and the _init.php holds global variables to be used e.g $title,$content while this is good it's become difficult to achieve flexibility and really I don't enjoy concatenations that much as I have to ensure it doesn't have any implication on performance. The dilemma with this, is that you will no doubt have to put alot of logic in the templates which later become ugly, an example of such was when i need a front-page admin it felt hackish to have a logic in the same template to load a seperate css if login and if not. luckily PW is not opinionated that much, meaning you are free to do what you want. This is my preffered style. <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title><?php echo $title; ?></title> <meta charset="utf-8"> <link href="<?php echo $config->urls->templates ?>css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="<?php echo $config->urls->templates ?>css/helper.css" rel="stylesheet" type="text/css" /> <link href="<?php echo $config->urls->templates ?>css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="<?php echo $config->urls->templates ?>css/jquery.fancybox.css" rel="stylesheet" type="text/css" /> <link href="<?php echo $config->urls->templates ?>css/animate.css" rel="stylesheet" type="text/css" /> <link href="<?php echo $config->urls->templates ?>css/style.css" rel="stylesheet" type="text/css" /> <link rel="shortcut icon" href="favicon.ico"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no" /> <title>Symphony</title> </head> <body> <!--Header goes here--> <?php echo wireRenderFile("ui/header.php"); ?> <?php echo $content ?> <?php echo wireRenderFile("ui/footer.php"); ?> In this the main loads several fragments of the pages into the layout so you might be curious how does the template look like , well it looks like this home.php <?php $content=wireRenderFile("ui/fullscreen-slider.php",array( "title"=>$title, "body"=>$page->body, "slideshows"=>$page->sliderImages, "middleImage"=>$page->middleImage )) ?> This way it's more cleaner and easier to read and you can perform alot of logic easily such as swapping templates based on seperate scenarios, I know this doesn't explain much I will post a tutorial soon enough, as this has increased my speed in PW Development.

This is a topic I check out every now and again because, especially on photo-heavy websites, some "seamless" way of resizing images before they are uploaded is something I've always wanted. You know the scenario - someone shoots a bunch of images with their 21 megapixel camera, tries to upload them not thinking about file sizes and the page hangs for ages whilst the image is resized. Or, worse, it times out because you didn't give PHP enough memory or increase the max execution time. I've tried a few PC-based tools to make like easier for clients - some in Windows are part of the right-click menu even, so they just need to remember to right-click and resize. But wouldn't it be nice to have something that does it automatically? Well this might just be the answer: https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing - which is part of a larger library: https://github.com/blueimp/jQuery-File-Upload My question, because I just don't have time right now (lame excuse, but I've got a lot on and this may be of interest to you guys anyway), is whether anyone else has tried this particular set of scripts out, or if the image manipulation gurus amongst us (I'm looking at you Horst ) have considered something like this (canvas to blob conversion on-the-fly before upload seems to be what's happening here) or whether something like that seems simply too volatile - I imagine on huge images it could consume a lot of memory on the person's PC, which is still quicker as a smaller file is uploaded, but may have other side-effects. I have used a Java applet in the past primarily to handle huge files, but that also had some client-side image manipulation built-in, but Java is such a security issue nowadays it's unbelievable. Plus it requires Java to be installed in the first place, so something JavaScript-based, using browser features like canvas if they're available seems ideal, with fallback to simply uploading the large file and letting the server resize the image. One to think about anyway. I'm sure the W3C will eventually roll out a recommendation for browser-side manipulation, but as we know update and implementations are always guaranteed to come quickly or work consistently.

The problem with just implementing it in Swiftmailer (or in your class) is this from ryan's first post: So I can't count on the user not just using the default WireMail class and certain functionality not being available. I think that the WireMail base class needs to have these functions set up before subclasses (is that the correct term?) implement features or we'll have issues with things working consistently or we'll have to do some checks to see which Mail module is installed. My usage in this case is writing modules that use the WireMail class, so I need the functionality in the base class to be sure that the emails will definitely send

Ryan, I would like to have the possibility not to use only the Emailaddress but also the Recipients Names with the TO-array. Actually it accepts only a single emailaddress or an array with emailaddresses, but no names. When building that on my own I would have to break compatibility. Don't like that. Could we not use something like: public function to($email) { if(!is_array($email)) $email = explode(',', $email); $this->mail['to'] = array(); // clear // check for key-value pairs containing name=>email if(array_keys($email) !== range(0, count($email) - 1)) { foreach($email as $n=>$e) { $this->mail['to'][$n] = $this->sanitizeEmail($e); } } else { foreach($email as $e) { $this->mail['to'][] = $this->sanitizeEmail($e); } } return $this; } // also within the send() function we have to check if we have array with name=>email or string only with email I'm not happy with my code example. A better way is much appreciated, but I really would like to have that possibility. ---------------------------------------------------------- - EDIT ---------------------------------------------------------- Now after some testing I came up with this code what seems to be better: public function to($email) { if(!is_array($email)) $email = explode(',', $email); $this->mail['to'] = array(); // clear foreach($email as $n=>$e) { // check for associative key-value pairs containing name=>email if(is_string($n)) { $this->mail[$type][$this->sanitizeHeader($n)] = $this->sanitizeEmail($e); } else { $this->mail['to'][] = $this->sanitizeEmail($e); } } return $this; } And in the send() function we need to loop like this: $numSent = 0; foreach($this->to as $n=>$to) { $to = !is_string($n) ? $to : ( $n . ' <' . $to . '>' ); if(mail($to, $this->subject, $body, $header, $param)) $numSent++; }