Leaderboard

Hi all, I thought I'd take this opportunity to announce a module I've been working on for a private project. Although it's not yet complete, I thought I'd take the time out to see if anyone would be interested in it. I only have the module locally on a test site, so if there is any interest, I can upload it somewhere suitable and maybe others can add to it, provide feedback etc. What is HermodBB? Hermod (messenger of the Norse gods) BB (Bulletin Board) is a module that installs a selection of templates and fields that you'd expect for a frontend forum. It also provides some methods to easily save topics and comments. All topics and comments (replies) are simply pages, and are organised like can be seen in the following image. Each forum has checkbox permissions for viewing, posting, pinning etc (see image below). These permissions can then be verified with some simple code (see below). // Use the helper method to pull a list of forum pages $forums = $hbb->forumsRender(); foreach ($forums as $forum) { // Only show the forums to those that are allowed to view them $rolesForumView = $forum->hbb_forum_view; if ($rolesForumView->has('id=' . $user->roles)) { // User has view access for the forum } } HermodBB also makes it easy to add comments to other pages, i.e articles, blogs etc. Comments are added as sub-pages, just like they are for topics. What HermodBB doesn't do HermodBB does not dictate any markup or sanitization. Any sanitization method can be used, and each topic and comment can easily be rendered as required. I'm currently using UIkit and CKEditor, but this can easily be changed to Bootstrap/Foundation etc. It keeps everything simple so that Processwire can do all the heavy lifting. Note: I am aware that there is the excellent comments module by Ryan, and also the Discussions module by Apeisa, but I needed something a little different for my current project, so I decided to have a bash myself. I am by no means on the same level of coding as the majority of members on here, so please be gentle I'd also like to thank Ryan personally for such an excellent framework. Any questions etc, please feel free to ask.

Also, there are some basic module settings that can also easily be used if required. The image only shows a few options. There are also options to easily set how many topics / comments to display per page for pagination etc.

This seriously made me think of creating a minimal template to wp-* URLs saying "This page was intentionally made without WordPress."

Thanks all for your thoughts, I like this topic! There's surely no "the one" CSS framework. In fact each project may require another fw that fits. Larger projects may benefit of large fws with extra stuffs like carousel, lightbox, etc, while a very simple one requires only a grid and some helpers. Here are my findings with some fws: Fluidable It's only a small grid system but sometimes that's all I need. There are many similar out there, I found this one first and it worked fine. UIkit I liked it much but of course I had to manually tweak things here and there. Unlike other large fws I like its feel and design. Foundation I used this only in a few project but always felt it's too much. Usually I don't participate in projects where such a big fw would be beneficial. Bootstrap That's the de-facto CSS framework and if you do frontend you can't avoid it. I won't start a project with it unless I have to, but I manage many sites where it is used. Most of them are using only its grid and the menu component but they are pulling the full fw. Base That's the one I use the most. It's a grid and some nifty helpers. I started with v1 back then until it turned out that it's not mobile-first. This was fixed in v2, now it's a great starting point. It doesn't have any extra (js) components but that's good - I prefer doing such stuffs with 3rd party plugins. Pure I'm trying this out right now. It's really tiny and works fine so far. I'm not sure I will use it in the future instead Base, time will tell. What I would really like to see is some kind of class name standardization. Almost all have different namings (e.g grids), so it takes some time to get in picture when switching projects.

I have my new site hosted on DigitalOcean. This is what I found today in my access logs. [Sat Oct 10 20:14:43.237273 2015] [:error] [pid 7239] [client 72.191.161.105:59138] PHP Parse error: syntax error, unexpected '?' in /home/jaimito/www/mywebsite.com/public/index.php on line 3 [Mon Oct 12 16:39:52.256530 2015] [:error] [pid 3369] [client 189.46.103.92:51633] script '/home/jaimito/www/mywebsite.com/public/wp-login.php' not found or unable to stat [Mon Oct 12 17:47:29.584326 2015] [:error] [pid 3583] [client 91.210.144.233:60277] script '/home/jaimito/www/mywebsite.com/public/wp-login.php' not found or unable to stat [Mon Oct 12 17:47:30.367421 2015] [:error] [pid 3368] [client 91.210.144.233:61180] script '/home/jaimito/www/mywebsite.com/public/admin.php' not found or unable to stat [Wed Oct 14 08:02:41.769513 2015] [:error] [pid 6195] [client 146.185.239.200:65452] script '/home/jaimito/www/mywebsite.com/public/wp-login.php' not found or unable to stat, referer: http://mywebsite.com/wp-login.php [Wed Oct 14 08:02:42.143803 2015] [:error] [pid 6197] [client 146.185.239.200:49223] script '/home/jaimito/www/mywebsite.com/public/admin.php' not found or unable to stat, referer: http://mywebsite.com/admin.php [Wed Oct 14 08:02:42.680991 2015] [:error] [pid 6195] [client 146.185.239.200:49436] script '/home/jaimito/www/mywebsite.com/public/index.php' not found or unable to stat, referer: http://mywebsite.com/index.php/admin/ Looks to me like it is trying to access commonly known URLs for WordPress admin. Of course it won't find anything!

Hi @Gazley, There is no denying, Semantic UI is very beautiful. However UI Kit has a few more modules that lets me get work out of the door quicker (and make a bigger profit). Here are a few things that I really really like about UI Kit and some things that I don't. Grid 1. data-uk-grid-margin This will add a top margin based on the grid margin when the column is collapsed. This means on mobile no elements are sitting right on top of each other. Instead they have a nice margin between each section. 2. data-uk-grid-match Great for having columns in which you want equal heights, you can do some pretty nice visual designs with this. Such as 50%/50% full width layouts. Components 1. Parallax Like most things with UI Kit it's completely modular and I only include elements I want to use, this makes it super easy. Parallax is one of those elements, it means I can easily add in Parallax elements and still keep it all in the UI Kit Framework. Other useful components include... 2. Dynamic Grid Much like Isotope js, this allows you to create dynamic filterable grids. 3. Sliders There is many options here, there is Slider which allows for mouse scroll and is great for mobile. Slideset which is filterable, great for showing things like clients and Slideshow which is just your usual slider. This comes with plenty of animations, which is all also modular. Core 1. Flex components While not completely supported by older browsers, this gives great control over positioning of content, such as centering content in a div. Combine this with data-uk-grid-match and .uk-flex-middle, you can create absolutely beautiful looking sites. 2. Text Columns Responsive text columns are great, while they are relatively new in not widely supported in browsers, it's great you have that option for modern browsers. 3. Scrollspy Great for the elements that animate on scroll, you can add any class to this also (or even use the javascript event) to have full controls. Javascript Events You can easily hook into Ui Kits javascript events to add custom javascript when certain things happen when using the modules. I know most frameworks have this, but it's a nice things to have. Here is a CodePen showing off a few things that I mentioned (I've tried to put in as many as possible): http://codepen.io/anon/pen/dYVRgQ --- The Bad So here is the bad, not all the components are well polished and require little fixed. For example sliders (used in my example), I much prefer showing them 1 by 1 as it's nice for iPhone uses to use touch controls. However, if there is less than 4 elements, there is sometimes a white flicker on the previous slide as you slide through. It's subtle but it happens. I get around this by making the background black to the slider. It isn't a fix but it makes it less noticeable. The sticky menu doesn't play nicely with the offCanvas and will sometimes stick, I use CSS to get around this applying left: auto !important. Resizing the screen while offCanvas is open will not recalculate the width, breaking the responsive. I got around this by applying width: 100% !important; to the offCanvas overlay. One more thing is that it doesn't apply box-sizing: border-box globally by default, while this isn't much of a problem and more of a personal preference. Overall, these problems are being ironed out and github is getting more active. I do wish for the github community to grow as there are plenty of talented coders out there and UI Kit for me is a great framework which comes with many useful features and most importantly is modular to keep sites lightweight.

In my _main.php files I typically include a "layout" variation file. This is what you would start with as the main template, but moved outside to allow more customisation and flexibility. Specify a default layout to use in the _init.php file, and overwrite it in your template files as and when necessary. _main.php <html> <head> <style></style> ... </head> <body> <header class="header">...</header> <section class="main"><?php require "./includes/layouts/{$layout}.php"; ?></section> <footer class="footer">...</div> </body> </html> _init.php $layout = 'default'; // specify a layout that would be used for "most" pages (I call mine default) So most sites might have default, home and contact layout varieties as a starting point. A layout would include the stuff that varies between page designs and you would create as few or as many as you need, and call on the variables set by the template. For example, layouts/contact.php: <section class="content"> <p>This is our address</p> <?= $page->body ?> </section> <aside> <iframe class="map">...</iframe> </aside>

Is there any way I can send you money? (On some occasions I believe I have threatened to send money to someone brave enough to take a stab at creating a PW-based forum solution)

Create another template to those pages and edit the template. Then go to the Files tab and specify another file in the "Append file" section. Plus you may need to tick the checkbox to disable automatic appending of _main.php.

http://www.korn19.ch/coding/wordpress_logins.php

NOW THAT, would be a fun idea! With a script that gathers all the bots IP addresses that access it. Also make a simple WP login form, and every attempted login gets saved

welcome to the wild wild web

A few weeks ago, Hashicorp, the company behind Vagrant, announced Otto: https://ottoproject.io/ I'm excited to give this a shot and have it finally replace my (embarrassingly antiquated) WAMP setup, although it's a still a very young and perhaps has a lot of kinks that need to be worked out at this moment in time. If anyone tries it out with ProcessWire, I'd love to hear your experiences about it. Jonathan

I have a site with lots of templates neatly ordered with tags in the admin. Now whenever I create a new template I have a hard time finding it, since there is no tag. So I'd like to see the ability to add tags to a new template right when I create it. Thanks, thomas

If after the creation of the template you weren't redirected to the templates list, and on the contrary were still on the created template's page, like it happens after the creation of a field, it would be perfect for you . I guess there is a way to add a hook or something similar to change this "action"/"behaviour".

I'm currently developing about 4 websites in ProcessWire as I've moved all my bespoke development away from WordPress. I'm so happy I've found ProcessWire and I've been recommending it to all my developer friends. Seriously @Ryan, you are a very smart man. Thank you for bringing us such a great CMS/CMF and releasing it for free. --- Jump-Inc is the first site that I have released using ProcessWire, I'm very keen on staying active the the PW community and I will be sharing which sites I have completed using PW. http://jump-inc.uk/ Jump-Inc is a trampoline park opening in the UK, I have used the responsive framework UiKit and for the parallax slider I have used Revolution Slider. I have used @Soma 's ColorPicker module for the gradient picker. Keep up the great work Soma, I love the fact that you can define a selectable colour pallet. Thanks again ProcessWire and the people who contribute to the project.

I really enjoyed reading your answer @Tom, I've seen great sites built with it, but I've never really digged in the code. I think you may have talked me in to trying out a build with it.

A great and really informative answer, Tom! Very many thanks for taking the time to explain all of this for me. This is really where it's at - a real users perspective, warts 'n all. Cheers!

There's also the Admin Save Actions module by @Nik: http://mods.pw/3W

We have to make the world know! Discuss and upvote: https://news.ycombinator.com/item?id=10345280

Yeah, absolutely amazing work. Bold, refreshing design and dev work.

you mean counting like this? $kids = $pages->find("template=poi, has_parent=$page"); $interests = new PageArray(); foreach ($kids as $k) $interests->import($k->interests); $iTotal = count($interests); foreach ($interests as $i) $i->useCount = count($pages->find("interests=$i")); echo "<h3>Interests ($iTotal)</h3>"; echo '<ul>'; foreach ($interests->sort("-useCount") as $i) { echo "<li><a href='interest/$i->name'>$i->title</a> ($i->useCount)</li>"; } echo '</ul>';

WOW! Just to answer myself; all of the above can easily be covered. Just don't use the render(); method. Step 1: fetch your menu data and store it in an array: $footermenu_items_json = $pages->get('name=footer-menu')->menu_items; // this is the menu page in menu builder, could also be fetched with the ID $footermenu_items = json_decode($footermenu_items_json, true); Step 2: use that array to build your custom markup: if( count($footermenu_items) > 0 ){ $out = '<ul class="nav-list">'; foreach($footermenu_items as $item){ $url = ($item['url']) ? $item['url'] : $pages->get($item['pages_id'])->url; $target = (1 == $item['newtab']) ? 'target="_blank"':''; $out .= '<li class="list-item"><a href="' . $url . '" class="list-item-link" ' . $target . '>' . $item['title'] . '</a></li>'; } if( $user->isLoggedin() ){ $out .= '<li class="list-item"><a href="' . $pages->get('name=login, template=login')->url . 'logout/' . '" class="list-item-link">Logout</a></li>'; } else { $out .= '<li class="list-item"><a href="' . $pages->get('name=login, template=login')->url . '" class="list-item-link">Login</a></li>'; } $out .= '</ul>'; echo $out; } Just make sure to var_dump the array somewhere to get an idea of what info is stored in there for the nested levels, etc. This is really neat. For me it's the best of both worlds - I can easily create and maintain menus in the backend, but can still fully control the output in the template. Thank you!! cheers, Tom

if you want to make icons searchable (when setting them on a template), you can use chosen select.. 1) add chosen min.css, min.js and sprites in AdminCustomFiles folder. 2) enable ProcessTemplate in the ACF module settings 3) add lines to load chosen assets (in the dependencies box) ProcessTemplate AdminCustomFiles/chosen.min.css ProcessTemplate AdminCustomFiles/chosen.jquery.min.js 4) create processTemplate.js, inside AdminCustomFiles folder $(document).ready(function(){ $("select#Inputfield_pageLabelIcon").chosen({ disable_search_threshold: 10, no_results_text: "Oops, nothing found!", width: "25%" }); }); this will probably end up being a module, so that it can also extend to fields; for now if you want to do it on fields you have to repeat the instructions for ProcessField and also change the jquery selector

For anyone wanting to getUnformatted regardless, you can do this: $page->getUnformatted('dates_table.begin_date'); /* Returns: * array(8) { * [0]=> int(1430863200) * [1]=> int(1433282400) * [2]=> int(1434837600) * } */ Also: $page->getUnformatted('dates_table.first.begin_date'); // Returns int(1430863200) $page->getUnformatted('dates_table.last.begin_date'); // Returns int(1434837600) So you can have your cake and eat it too without having to parse date strings. E. g. you can directly use the inbuilt templating syntax with formatted values, but if, say, you also need a locale aware day name, you can feed the timestamp to strfrtime().

Recently I've been working on a site where it seemed like it was going to be impossible to keep the page tree and the needs of the site's main menu in harmony; So to solve this I setup a separate page tree under a hidden page called 'Main Menu', with each menu item having three fields: title, menu-link-page, and menu-link-url. All of the menu items are also hidden, so the code below uses the include=all parameter when getting the pages for the tree. To generate the main menu markup, i adapted the great code that was developed by Soma for Joss's bootstrap menu, and modified it to output links to the menu-link-page or menu-link-url; (Entering a value in the menu-link-url field overrides any selection in the menu-link-page.) This solution has enabled me to setup the menu exactly how the site needs it, even if the menu heirarchy is not the same as the page heirarchy, and has solved a lot of problems and made things easier for this scenario. For example, menu items can easily contain external URLs, to subdomain pages, or other related site's pages. (In this case the client has a separate web store for selling parts). Also, all of the parent menu items had to use a javascript:void() as the href, in order for the accordion version to work right on mobile; So this was easy to do by putting that into the menu-item-link field. In the code below, page #1271 contains the menu tree, so it is specified as a parameter to the $root variable. I think this sort of setup, using a custom menu tree, could solve a lot of the questions I've seen recently on the forum; I probably wouldn't use this technique on small sites since it is more work, but for larger ones where you might need a lot of menus, this could be helpful. Also, if you had to setup a Mega Menu, with images and icons, this might make it easier to manage. <?php /** * render custom markup menu for bootstrap nested navigation * * @param PageArray $pa pages of the top level items * @param Page $root root page optional, if you use other root than home page (id:1) * @param string $output for returned string collection * @param integer $level internally used to count levels * @return string menu html string */ function renderChildrenOf($pa, $root = null, $output = '', $level = 0) { if(!$root) $root = wire("pages")->get(1); $output = ''; $level++; foreach($pa as $child) { $class = ''; $has_children = count($child->children('include=all')) ? true : false; if($has_children && $child !== $root) { if($level == 1){ $class .= 'parent'; // first level boostrap dropdown li class //$atoggle .= ' class="dropdown-toggle" data-toggle="dropdown"'; // first level anchor attributes } } // make the current page and only its first level parent have an active class if($child->menu_item_page === wire("page")){ $class .= ' active'; } else if($level == 1 && $child !== $root){ if($child->menu_item_page === wire("page")->rootParent || wire("page")->parents->has($child)){ $class .= ' active'; } } $class = strlen($class) ? " class='".trim($class)."'" : ''; if($child->menu_item_url) {$childlink = $child->menu_item_url; } else { $childlink = $child->menu_item_page->url; } $output .= "<li$class><a href='$childlink'>$child->title</a>"; // If this child is itself a parent and not the root page, then render its children in their own menu too... if($has_children && $child !== $root) { $output .= renderChildrenOf($child->children('include=all'), $root, $output, $level); } $output .= '</li>'; } $outerclass = ($level == 1) ? "accordmobile" : ''; return "<ul class='$outerclass'>$output</ul>"; } // bundle up the first level pages and prepend the root home page // $root = $pages->get(1); // $pa = $root->children; // $pa = $pa->prepend($root); // Set the ball rolling... // echo renderChildrenOf($pa); // example with pages further down in the tree $root = $pages->get("1271"); $pa = $root->children('include=all'); // $pa = $pa->prepend($root); // add the root as the second parameter echo renderChildrenOf($pa,$root);