Leaderboard

(Thought I should put a direct link to this on this forum - somehow I forgot to!) This tutorial is aimed at anyone starting out with ProcessWire (whatever their level of expertise) who wants to get a good but basic understanding of how the system works.. It goes back to the beginning and looks at creating fields, template files, templates and then demonstrates how those elements are put together very simply with very ordinary HTML/CSS and a few very simple bits of PHP. This is not a definitive way of creating a site (ProcessWire has no set methods and allows you to work they way you wish), but it should answer some basic questions and get you going. http://wiki.processwire.com/index.php/Basic_Website_Tutorial Note: This tutorial also forms the basis of other tutorials such as the Simple News System and Simple Gallery System.

Selectors have to have a defined value after the operator. There is no defined value in "modified>created", as those are two fields. You can go straight to SQL to accomplish this one: $pageIDs = array(); $result = $db->query("SELECT id FROM pages WHERE modified>created"); while($row = $result->fetch_row()) $pageIDs[] = $row[0]; $pageArray = $pages->getById($pageIDs); // $pageArray contains what you want

CKEditor for ProcessWire CKEditor is a web text editor like TinyMCE. This module can be used anywhere TinyMCE can be used in ProcessWire and it is generally considered one of the best web text editors out there. TinyMCE and CKEditor have always been the two big leaders of web text editors, and they've been equals for many years. Though lately it seems like CKEditor might be a little ahead of TinyMCE in some areas, so I thought we should give people the option of using CKEditor with ProcessWire. CKEditor has a nice inline mode that is desirable in the page editor when you may have lots of rich text inputs. The reason for this is that the page editor loads a lot faster. If you have this need, this would be one reason why you might want to use CKEditor over TinyMCE. Some also prefer CKEditor for other reasons. For instance, @apeisa prefers the table controls in CKEditor to TinyMCE's. Here are a few notes about this module: You already know CKEditor–it's what this forum is using. Though the version included with ProcessWire's module is significantly newer. It is currently beta test. You are advised to test thoroughly before using it in production. You may very well run into bugs, in which case please let me know so that I can fix. It is tested and confirmed compatible with both repeaters and multi-language support. It is now fully hooked into our link and image systems, like TinyMCE. Thanks to Antti for helping with the image plugin. If you want to use the inline mode, you'll need to install the HTML Purifier module first. The toolbar is fully configurable. It is multi-language ready and all text in the module is translatable. Like with TinyMCE, the module optionally supports definition of custom plugins and content.css file. How to install Copy all the files from this module into: /site/modules/InputfieldCKEditor/ Login to your admin and go to Modules > Check for new modules. Click install for InputfieldCKEditor. Now go to Setup > Fields and locate a textarea field that you want to use CKEditor (or create a new textarea field). When editing the settings for a textarea field, click the Details tab. Change the Inputfield Type to CKEditor and save. While still editing the field settings, click to the Input tab for CKEditor-specific settings you may optionally configure. Download ProcessWire Modules page: http://modules.processwire.com/modules/inputfield-ckeditor/ GitHub Repo: https://github.com/ryancramerdesign/InputfieldCKEditor Screenshots Screenshot of regular mode: Screenshot of inline mode, combined with multi-language fields:

HTML Purifier is an HTML sanitization and validation module for ProcessWire. It serves as a front-end to the HTML Purifier PHP library. From htmlpurifier.org: Usage: This module is something that you would use from a template file or another module. The syntax basically goes like this: $purifier = $modules->get('MarkupHTMLPurifier'); $cleanHTML = $purifier->purify($dirtyHTML); The default settings seem to be about right for most cases. However, you can also specify custom settings to HTML Purifier by performing set() calls before calling purify(). For example, UTF-8 encoding is assumed, so if you wanted ISO-8859-1 instead, you'd do: $purifier->set('Core.Encoding', 'ISO-8859-1'); About this module: The reason I made this module is that I'm currently working on a CKEditor module for ProcessWire. It supports a very nice inline mode that I'd like to use. But the problem with an inline mode is that the text you edit is real rendered HTML (rather than a textarea), so that could be a security problem (i.e. XSS). I researched into into how best to resolve that, and the HTML Purifier library kept coming up. So here this module is. The new CKEditor module will require it if you want to use inline mode. Download: GitHub: https://github.com/ryancramerdesign/MarkupHTMLPurifier Modules Directory: http://modules.processwire.com/modules/markup-htmlpurifier/

Hey, my very first Processwire module, so please give any feedback possible about the code. Ported from my actual project, maybe its usefull for someone. Main code for tracking based on the clickHeat Project by labsmedia, generated Heatmaps via heatmap.js What it does: Tracking clicks of your visitors Generate a list in admin backend of tracked sites Generate a Visual Heatmap of the tracked clicks. Requirements: processwire 2.3 jQuery 1.9 a folder in /assets/logs/clicks with write permission I don´t have a git repo, I´m sorry. Installation: copy the Folder Heatmap to your site/modules folder. Install the Module: WireDataHeatmap Install the Module: ProcessListHeatmaps Go to your template admin and assign to every template you wish to make trackable the checkbox field track_heatmap Now check this field on every page you wish to be tracked. Known bugs so far: x coordinates about 40px too far in the right. Will fix this issue the next days. Screener and .zip //EDIT 2013/03/16 Roadmap (everybody needs a tiny roadmap ) - change click save from file to database via $page->save() - tidy up the code! -- *almost - segmentation via date range .... learn git? //EDIT 2013/03/17 New Version 0.0.2 Changed saving clicks to files into $page->fieldtype->textarea worked on heatmap calculus... still not working properly, bit too much offset left. trying to fix this problem :-/ update instructions: uninstall old module delete old module files copy folder heatmap to your modules folder and install both new modules. Now add field "track_heatmap" to every template you wish to provide tracking function. Now just check the field on every page you need to be tracked. The module adds his data container to every tracked page after the first registered click. //EDIT 2013/03/18 New Version 0.0.3 little improvement to visualized data. Heatmaps not yet accurate on fluid layouts, some clicks need some browser resizing to match the correct position Updated the attached .zip Heatmap.zip

It's worth mentioning that wire('input') or wire('any API variable') would in fact work everywhere. So if you only needed to remember one way of accessing API variables, that one would be the most portable.

Never mind, think I found a solution. For anyone else having the same issue. Go to Setup > Templates. Choose a template, and then under family you can select Yes/no for "may pages using this template have children". There's also another option, "Can this template be used for new pages?". Brilliant! @renobird > Just found a way myself, as you can see. But your suggestion is yet another way to do it. Perfect. Thanks!

Here is a draft of the module that I talked about above <?php //ModifiedMinusCreated.module class ModifiedMinusCreated extends WireData implements Module { public static function getModuleInfo() { return array( 'title' => 'Modified minus created', 'version' => 100, 'summary' => 'only a rough draft', 'singular' => true, 'autoload' => true, ); } public function init() { $this->pages->addHookBefore('save', $this, 'subtract'); } public function subtract($event) { $page = $event->arguments[0]; if(!$page->fieldgroup->modifiedminuscreated) return; $page->modifiedminuscreated = $page->modified - $page->created; } Now you just have to create the integer field "modifiedminuscreated" and add it to the templates you want. edited: changed the code under Soma's suggestion

OK. I got another 501 error. I created a textarea field (lowercase) and tried to add an hr option to the tinyMCE advanced options. I've done it before without problem but here it gave me the error "The requested method is not implemented by the server" when I tried to save. The host has only recently moved to litespeed servers. Edit: I just want to mention this isn't really a call for help. I added the element I wanted using phpMyAdmin so it's all good. I could have also added it right into the tinyMCE module. I'm just reporting this as a possible incompatibility with LiteSpeed Servers for anyone else with an pw install on litespeed. cheers

To populate a field on save you can create a autoload module (see HelloWorld.module) And do something like this $this->addHookBefore('Pages::save', $this, 'addTitle'); public function addTitle($event) { $page = $event->arguments[0]; if($page->template->name !== "product") return; $page->title = $page->somefield . " " . $page->field2; }

You could also create a module that would hook to save and update a field holding the value of modified minus created. Then you could use $pages->find("modified-created>0");

This is already implemented in the upcoming version 2.3. Try it yourself by downloading the Dev branch on GitHub.

Greetings, As Soma explained, you can turn off the need for the title field. However, I would want to make sure this is a good idea. If you ever need those pages for other purposes, you'll likely want the title. Also, the "title" can be anything (any field). It does not need to be an extra field, and the user does not even have to know that it's a "title." For example, I'm working on a site with separate pages for numerous retail stores. Stores each have a unique "store number," and I just made that the "title." The user does not know that when they enter the store number they are simultaneously creating a "title," but now I have that bit of information to use in my template code. Based on your description, it sounds like your users are already building invoices through field entries. Maybe just use the "invoice_number" field as the title? Thanks, Matthew

Sorry, I assumed it is clear. In the field advanced settings. Go to Setup -> Fields, open title field and under Advanced you'll find the Global setting. Uncheck it and you can remove title fields from templates.

Hi Soma, could you be more specific where in PW to remove this global flag from title ? Thanks

He means footy.

Soccer? What's soccer?? edit: just to clarify. I don't think you have to understand them right away. But I think that, by the time you are already doing a review, these concepts should be already clear. Anyway, I don't want to pick on @Tyssen, as it's a nice review regardless.

Hey Jennifer, nice site and design! Congrats and great to hear your opinion on PW. Some little things I noticed: Just noticed something when on mobile landscape mode I see a responsive layout broken a little. It looks like this: Clicking Calender of Event on home does to a 404. All the links from the top carousel go to a 404 to http://fyp.washington.edu/fyp I took a closer look at your site and seeing the home page has a impressible load, 85 files and 2.7mb just for what is there. And it's strange as it seems something is loading scripts multiple times as I don't see (just looked quickly) where it's coming from or why at all, so modernizer is loaded twice etc. There lots of css and js script and plugins and fonts, I wonder how much you could improve that without going mad. One of the reason I always still build my custom css and js and only use plugins when really needed, also a reason I don't like those full blown frameworks. Looking at the mobile perspective you load the full images you won't ever need that big anyway so a adaptive image solution would also help reducing page load. Just my 2 cents.

Hey Jennifer - definitely a fantastic looking site! Some design inspiration for me, so thanks! Also, think I should check out Foundation - it is definitely time to start making use of these tools. The only comment I have is the size of some of the images in the sidebars. I noticed them loading slowly and checked out one which was almost 400KB and ended in "1633x0.jpg". I see that you have some great responsive design set up, but it seems that when these actually first switch to bigger dimensions they are at 690px, so it seems like there is about 1000px of extra un-needed width / filesize. Maybe I am missing a screen size scenario that needs images that big, but thought I'd mention it just in case. Also, just found another broken link for you. From http://fyp.washington.edu/getting-started-at-the-university-of-washington/ the link to Fees, Changes and cancellations is broken. Actually, just noticed something weird on this page: http://fyp.washington.edu/parents-families/out-of-state-parent-frequently-asked-questions/ In Chrome at least you can't actually scroll to the very bottom of the page - it flickers and jumps back. No content is hidden, but still a little annoying. Another broken link from: http://fyp.washington.edu/faculty-staff/ to the 2013 Advising and Orientation Schedule PDF (http://fyp.washington.edu/downloads/2013cal.pdf) Anyway, now I am just starting to feel mean and picky - you really have done a brilliant job. Mental note - don't show off any of my sites here or you'll be hunting me down looking for all my broken links

Cool, a link to the backup_restore.php script would be nice too

I don't know the drawbacks of this, but I just managed to do make the dynamic stylesheet proposed on css tricks work has a pw template. So, this is how to do it (someone stop me if this is a bad bad thing to do): 1. Create a template file css.php and put all your css code inside. On the top of the file put this code <?php header("Content-type: text/css"); ?>. 2. Create a "css" PW template with that file. 3. Create a "css" page and give it the "css" template. 4. Link to the stylesheet like this <link rel="stylesheet" href="<?php echo $pages->get('/css/')->url; ?>">. 5. use the PW API on your stylesheet Extra: 6. put some fields on the "css" template and use them on your css Examples: the color picker field for colors; an image field with your style pictures (background, logo, etc). edit: onjegolders was faster! edit2: not the same answer. Mine is more interesting

Teppo, the dev branch now now has switched from extension detection to type detection per your suggestion and code. https://github.com/ryancramerdesign/ProcessWire/blob/dev/wire/core/ImageSizer.php Thanks, Ryan

Hey Antti (and others) - I went ahead and made it so that the module can now accept comma-separated lists of templates per thumbnail config. For example, in the module config, enter a new crop setup called bigthumb like this: bigthumb,320,240,home,search The two extra parameters on the end are templates that this is applicable to. You can keep adding templates to the list to your hearts' content, and in this case it won't show you a thumbnail option for the images field on the basic-page template since you narrowed it to a specific list. If you want the thubmnail to be available to all templates, simply don't add any more parameters after the first three The code, oddly enough, is in the same function as my last post, so change that entire function in InputCropImage.module to the following: protected function renderItem($pagefile, $id, $n) { $out = parent::renderItem($pagefile, $id, $n); $crops = $this->modules->get('ProcessCropImage')->crops; if (strlen($crops)>3) { // If we've defined one or more templates for specific crops, we need to check the current page's template to see if we actually have any applicable crops to show to the user $page = $this->pages->get($this->input->get->id); $applicableCrops = array(); $cropArray = explode("\n", $crops); foreach ($cropArray as $k => $v) { $cropItems = explode(',', $v); if (count($cropItems) > 3) { if (in_array($page->template, array_slice($cropItems, 3))) { $applicableCrops[] = $cropArray[$k]; } } else { // Any non-template-specific crops are automatically added to the list for all cropimage fields $applicableCrops[] = $cropArray[$k]; } } $applicableCrops = implode("\n", $applicableCrops); if (!empty($applicableCrops)) { $cropLinks = $this->_getCropLinks($crops, $cropUrl, $pagefile); if (!empty($cropLinks)) { $cropUrl = "../image-crop/"; $cropStr = "\n\t\t\t<div class='ui-widget-content crops'><p class='description'>Thumbnails (hover to preview, click to crop)</p>". $this->_getCropLinks($applicableCrops, $cropUrl, $pagefile) . "</div>"; // We add our crop string at the end of the list item that holds image $out .= $cropStr; } } } return $out; } If no crops are applicable to a particular template, it simply doesn't render the thumbnails box below each image.