Leaderboard

InputfieldSelectize A Inputfield to provide a select interface for Processwire CMS FieldtypePage using the (awesome) Selectize.js jQuery plugin, by Brian Reavis. Selectize: https://github.com/selectize/selectize.js Modules directory: http://modules.processwire.com/modules/inputfield-selectize/ Github: https://github.com/outflux3/InputfieldSelectize Features Custom designed options and items for any page select field. Your select options can use any field or subfield on the page, but also sub-subfields, or any data you provide, since you are not limited by tag replacement: you control the precise data supplied to the options using a PHP array that returns data to the module, which is in turn supplied in JSON to the select as adata-dataattribute. The plugin uses the JSON object for each option meaning you can do whatever you want with that data in designing your options/items. Each instance lets you define which fields are searchable for the select Your selects can use display logic based on the value of any field/data item, for example using ternery conditionals you can avoid empty parenthesis. You can design the options and items (what is seen once an option is selected) independently of each other. Therefore you could have special fields on the options for searching, but exclude those on the item. Likewise you can show elements on your item like an edit button which is not needed on the option. Multiselect pages are sortable, and deletable by backspace or optional remove button. When AceExtended editor is installed, the module will use that for the code input fields. Usage Install the Module Edit your pagefield and choose InputfieldSelectize as inputfield. You will see the empty fields that need to be populated to make this work Notes For examples of what you can do (in general) with your selects when using Selectize.js, view the plugin site at http://selectize.github.io/selectize.js/. The plugin theme is selected on the required JquerySelectize module ----- Examples Basic Example PHP (the data array for each item - this must return a plain array): $data = array( 'title' => $page->title, 'company' => $page->company_select ? $page->company_select->title : 'Not set', 'total' => count($page->recipients), 'editUrl' => $page->editUrl ); return $data; Javascript (item and option same) Here, the item.property each refer to the keys of the PHP array that you returned in the above field. This field must be a valid Javascript string with each of the properties you want to show as demonstrated below, and recommended to use the escape(item.property) syntax. These strings are passed to the render functions of the plugin. '<div class="item">' + '<span style="display:block;font-size:14px;font-weight:bold;">' + escape(item.title) + ' (' + escape(item.total) + ')</span>' + '<span>' + escape(item.company) + '</span>' + '</div>' Example screenshot: A more advanced example This example shows how to use conditionals for the PHP and JS to get the select options to look clean and provide the necessary information to assist users in choosing the correct options: PHP $data = array( 'title' => $page->title, 'year' => $page->year ?: $page->year_sort, 'for_inst' => $page->for_inst, 'edit_href' => $page->editUrl ); return $data; Item Javascript: '<div class="item">' + '<div style="color: black; font-size: 14px;"><span style="font-weight:bold;">' + escape(item.title) + ' (' + escape(item.year) + ')</span>' + ' <a class="pw-modal pw-modal-medium" href="' + escape(item.edit_href) + '">Edit <i class="fa fa-edit"></i></a></div>' + (item.for_inst ? '<div style="color:gray;">for ' + escape(item.for_inst) + '</div>' : '') + '</div>' Option Javascript: '<div class="item" style="width:100%;">' + '<div style="color: black; font-size: 14px;"><span style="font-weight:bold;">' + escape(item.title) + ' (' + escape(item.year) + ')</div>' + (item.for_inst ? '<div style="color:gray;">for ' + escape(item.for_inst) + '</div>' : '') + '</div>' Example with images In this example the selects will feature a thumbnail image: You could also set the width of the selected item to 100% depending on where you place the field (e.g. in a column) $image = $page->images->first(); $thumb = $image->size(100,100); $data = array( 'title' => $page->title, 'thumb_src' => $thumb ->url, 'img_dims' => $image->width . 'x' . $image->height, 'img_desc' => $image->description, 'img_size' => $image->filesizeStr, 'edit_src' => $page->editUrl ); return $data; '<div class="item" style="width:100%;">' + '<div class="image-wrapper" style="float:left;"><img src="' + escape(item.thumb_src) + '" alt=""></div>' + '<div class="info-wrapper" style="float:left; padding:5px;">' + '<span style="font-size:14px;font-weight:bold">' + escape(item.title) + '</span><br>' + '<span>Dimensions: ' + escape(item.img_dims) + 'px</span><br>' + '<span>Filesize: ' + escape(item.img_size) + '</span><br>' + '<span>' + escape(item.img_desc) + '</span><br>' + '<a class="pw-modal pw-modal-medium" href="' + escape(item.edit_src) + '">Edit <span class="ui-icon ui-icon-extlink"></span></a></div>' + '</div>' '<div class="item">' + '<div class="image-wrapper" style="float:left;"><img src="' + escape(item.thumb_src) + '" alt=""></div>' + '<div class="info-wrapper" style="float:left; padding:5px;">' + '<span style="font-size:14px;font-weight:bold">' + escape(item.title) + '</span><br>' + '</div>' + '</div>' Current Notes & Issues: Works with 3.0.23 devns Doesn't currently support creating new options (and may exhibit strange behavior if you try and add one not in the list) Doesn't yet support optgroups

If the order is your issue than use count() with those selectors, the current page num and some math to determine which pages are to be shown on the current page - then load just those. Edit: I've not tested it with real pages, but the test class seems to work correctly: https://github.com/LostKobrakai/Paginator

Hi, If you have 13 minutes to kill, you might enjoy this https://www.youtube.com/watch?v=dIjKJjzRX_E It's funny but he makes some interesting points. This guy also has a series on functional programming with javascript. I've only watched the first video so far but I thought it was pretty good. Recommended here https://processwire.com/talk/topic/13494-methods-to-cycle-through-foreachcompare-values-of-children/?p=121747

My pagination class has no concept of appending or prepending. It's just selector after selector after selector. Just put your selectors in the intended order from the start and you should be fine. If the first selector does not return any items it'll just skip to the next one.

Currently, I don't believe there are any free or paid modules for MLS handling (though please correct me if I am wrong). What format is the MLS feed currently in? You could possibly read the feed (in XML) and then use processwire's API to create the listings using a foreach loop. Possibly set up a chron job (a module for that here) to loop through the feed.

created an issue on github https://github.com/ryancramerdesign/ProcessWire/issues/1881

Seems OK to me - google shows that this was already on the table in PW forums: https://processwire.com/talk/topic/10802-issues-with-javascript-setheight-function-in-pw-admin/ AOS v02 is just uploaded, with some AsmTweaks fixes and a feature to move the delete button to the left on Asm fields. I use a wide screen monitor and this bugged me a lot

hi @Henrik, glad you figured out yourself what caused the problem. I just wanted to test images in repeaters again. But I've got a lot of pages out there which are using images containing image extra fields inside repeaters!

Internal Server Errors are a pain to debug, especially if the server logs do not give any useful information. I'm always doing the die() debugging on such things, e.g. Going to ProcessPageEdit.module and putting die() at various stages an see when the error disappears for a probably blank screen. This way you can at least narrow it down to where the error does happen, which might help finding the issue behind it.

ALT + F3 = select all occurences of current selection

Dude! Nice one LostKobrakai...

cool - thanks, this works well! Now i just have to figure out how to update the sort on the pagetable for the parent page... Edit: was simple, just need to sort the pagetable field on the runtime/temp property... awesome

You way does load all of those notes into memory even though only 15 are used later. Build your Selector first and then query the db for the total result.

Ok, slightly out of context, because it's Javascript, but these 3 videos from funfunfunction could really help you to understand those 3 functions: It's a series, watch them in sequence

Just switched back to ST coming from Atom (so nice, but so slow). ⌘ + P = Go to anything.

Two of my favorite keyboard shortcuts so far in Sublime Text are: ⌘ + D: Select word - Repeat to select next occurrence ⌃ + ⇧ + W: Wrap Selection in html tag (or ⌃ + W for choosing the html tag) Of course there are much more.

Based on own experience as well as observing some topics on here, I would say "yes, but...". The "but" is that certain things need to be done differently, and other things need to be thought about: Code Where will the code that handles the app's business logic be stored and how will it be structured? Bespoke PW modules or use template files? Data The data that you will be storing - what does it looks like? How will it get from the source into the database? What output or reporting requirements are there? URLs Have one or two main entry points and call your custom code? Or have a new Page for most/all URLs. Automatic page name generation Every page has to have a name, and if many pages will be created using the API what is the naming scheme? Re-use admin vs creating custom front-end There's been some talk about this very recently, and the route chosen may depend on: who your audience is, what level of branding is required, and what functionality is available to who. Having said that a lot of the stuff you need from an app framework is already there. Sessions, Users/Permissions, the data layer, output, templating, and other things I can't remember. One thing I've found missing is a robust generic form validation library. I don't like the config format of valitron, so currently using a slightly modified simple-validator. At my company, we've built various SaaS apps and CMSs over the years using CodeIgniter. More recently though, we have used PW where CI may have previously been chosen. Perhaps an interesting example is a recent project where we used only the PW back-end. The branding was changed a bit, but there was no front-end at all. The main function of the app was to generate an HTML5 product showcase/catalogue/datasheet browser, for use on tablets (built with Backbone JS and JSON datasource). The PW admin was perfect for users managing the data. We built a bespoke Process module for the back-end that allowed users to preview and download the HTML5 app.

Just a bit of a head's up in case it useful for you guys. I discovered this when I installed Tracy on a live site which makes heavy use of Angular with ajax calls to get data from the PW backend. Tracy was breaking the site because the returned JSON response had the Tracy debugger bar code appended. The thing is I don't really think this is a Tracy bug. Have a read here: https://laracasts.com/discuss/channels/requests/laravel-5-doesnt-behave-to-angularjs-like-ajax-request Angular decided to remove the AJAX header. I feel like this might also affect those of you using if($config->ajax) checks. The fix is pretty easy - just add the headers like this: .controller('HealthController', ['$scope', '$sce', '$http', function($scope, $sce, $http) { //to allow Tracy to know it's an ajax call and therefore not add code to call $http.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest"; $http.get("/data/health-data.php?rc=" + document.getElementById("rc").getAttribute("data-name")) .success(function (response) { I have also posted an issue for the Tracy guys: https://github.com/nette/tracy/issues/167 but I am not sure whether they can do anything about this, or even if they should try. The same goes for PW and its $config->ajax check. Hope that's helpful to someone!

I got a client request to make Word template so she can create an image of the weekly menu of a restaurant to post on Facebook. I usually get sick when I have to deal with M$ Word - it's frustration and it's not meant to be used things like that. So I figured out a better system: PW + html2canvas.js. It took more time to finish but it was worth the trouble. The main issues were html2canvas versus some CSS issues, plus switching to different languages in PW on each line. Also, JavaScript cannot offer named downloads, only "download.png", so I had to use HTML5 attribute "download" on links to be able to add custom download filename. I used ProField modules Table and Matrix Repeater which allow very pleasant editing of menu items, even in multilanguage context. Front-end editing is created using the built-in front-end editor. I was about to achieve inline editing of menu items but it soon turned out that repeaters and tables can't be edited this way. Anyway, it's still better compared to my module FEEL because sections are reloaded using Ajax and the admin lightbox shows only the fields I choose. Here's a quick screencap - when the gray background turns to dark gray, then the menu is not HTML but canvas, that can be downloaded.

After convincing my main client/boss of the advantages of PW over WP, I'm currently build his personal/company site new version. He's a Project Management expert and currently works for the United Nations. His website received around 2k unique visitors per day. Running WP on a Digital Ocean 4GB droplet with Varnish and Apache on Ubuntu 14. MySQL DB runs on another droplet with 2GB. There are other apps running on the same 4G server. I'm planning to use Laravel's Forge to admin the new version. It will make things easier I think. This new version will merge two websites, ricardo-vargas.com and macrosolutions.com.br (the company services). I'm posting the screenshots for the template and admin pages of a consulting service that today leaves at: http://macrosolutions.com.br/consulting/projects-offices-assessment-optimization-and-restructing/ on the old site. There's no front-end yet but I reckon posting these screens may help someone. Numbers: 43 Fields organized in 4 tabs.

The "setHeight" function sets the height of a filler div to equalise the height of inputfield columns in the admin, so everything looks neat and tidy. I like this and the overall attention to detail in the admin UI, but I've notices a couple of issues with this method of equalising columns. 1. The function fires on document ready but this doesn't allow time for CKEditor fields to load and these can change the height of a column by quite a bit when loaded. Perhaps setHeight should fire on window load instead of document ready? (Edit: I tried this and it doesn't solve the issue. Probably needs to fire on a callback from CKEditor). Or perhaps a CSS-only solution could replace this Javascript approach, utilising display:table-cell or flexbox? 2. The function fires even when the viewport is narrow enough that the layout has switched to single column. In this case the heights don't need to be equalised because the columns are stacked on top of each other, and the extra filler space looks weird. This issue affects the Form Builder module too, where the filler div can cause the form to expand beyond the height of its iframe. I cludged together a CSS fix for this like so... @media only screen and (max-width:767px) { .maxColHeightSpacer {display:none !important;} } ...but it might be better to use something like enquire.js to make sure the function only fires above a certain breakpoint. Edit: just discovered another small issue... 3. The function doesn't fire after images and files are added to a field, which of course changes the height of the field. Is there an AJAX callback for image/file uploads I can use to retrigger the function? Any thoughts?

In the famous "30 minutes" thread MadeMyDay somehow made a point by putting ProcessWire into context with TYPO3. Recently, I got an inquery for a multilingual website for a speaker agency. A customer looking for an Open Source solution. These speakers had meta data attached (topics, languages, speaking areas, gender) and this database would be the most essential part of the website. Also, a password protected area was needed where speakers could supply materials such as slides to an exclusive user group. Sounded like the perfect job for ProcessWire, unfortunately, after a while of internal consulting and decision-making, the customer chose TYPO3 instead. PW was totally new for them, they admitted to be fascinated by it, but went with the system they knew in the end. That, and Marc's above mentioned comment made me think. ProcessWire does a good job catering developers but still has room for improvement, in my opinion. Throughout the 30 Minutes / WP Tavern article I often read, "once the developers are on board, the rest will follow". I'm not so sure. It would not hurt to emphasize PW's abilities to serve as a business/enterprise CMS right now. Take the benefit teaser on typo3.org for example, a perfect intro. It states: Open Source Enterprise CMS Scalable Web Application Framework Large, active global community User friendly with unlimited extendability Integrated Development and Editing Workflows I guess most of these advantages do fit to ProcessWire as well or, in the case of continuous integration, are on the doorstep (at least that's how I read "Integrated Development"). And PW's community may not be large yet, but is damn active. Apart from that, the home page is full of, hm, let's say: trigger words that work on some business business owners: "enterprise", "professional", "web solutions" and "certificates". I'm not proposing to copy all this. But I have an idea: Since both TYPO3 and ProcessWire are relatively big here in Germany (each on their own scale) one could emphasize the "also a perfect business CMS" aspect on http://de.processwire.com. I guess this won't hurt "the brand" at all, but, possibly, create some insights on if and how such a communication strategy could work. /edit: These automated capitalized words in the thread title are really annoying :-/

Don't know if you can already do this, but implementing PHPs array_chunk method would be pretty useful.. For example $list = $pages->find("template=something"); // Returns 5 pages $chunked = $list->chunk(3); print_r($chunked); /*prints*/ array( 0=> array( Page, Page, Page ) 1=> array( Page, Page ) ) Especially useful if you're trying to print pages into columns. Can you already do this?

@Sinmok Take a look at what Gayan posted above, it shows you how to do it. I've also updated my previous example to make it more obvious.

Thanks Sinmok and netcarver. It would be really useful when we are using a front-end framework like Bootstrap. <?php $list = $pages->find("template=basic-page"); // Returns 5 pages $chunked = array_chunk($list->getArray(), 3); ?> <?php foreach($chunked as $i => $row): ?> <div class='row'> <?php foreach($row as $item) : ?> <div class="col-md-4"> <?php echo $item->title; ?> </div> <?php endforeach; ?> </div> <?php endforeach; ?>

You could build with PW planboards, map applications, newsletter-tools, news-scapers, spiders, voting games, surveys etc etc. Calling PW an enterprise CMS is way to limited.

There was a free PHP/jQuery Snippet in the last CMS i used with a Kind of HannaCode addon [[rating]] where needed. It works with a separeted sqllite db - maybe could used as a base or snippet for a simpler or free usecase. https://github.com/tlongren/colorrating