Leaderboard

HELLO! Finished a simple Artist Profile for Processwire similar in scope to Indexhibit. On github: https://github.com/benbyford/artist-profile Demo: http://artist.nicegrp.com/

Been getting questions on how to build complex/custom menus. Even with the ability to pass it custom options, some menus are a bit more complex than what Menu Builder offers out of the box. My answer to such questions has, to date, been get the JSON and use that to build your menu. Not very easy for some....but no more...thanks to @Beluga, @Peter and @Webrocker + others for the inspiration/challenges. I've now added a method in MarkupMenuBuilder to make building custom complex menus a breeze. Don't get me wrong, you still have to know your foreach loops or even better grab one of the many recursive list/menu functions in the forums (or StackOverflow) and adapt it to your needs. Don't worry though, below, I provide a couple of complete code examples using recursive functions. For a 2-level deep menu, even a nested foreach would do. Going forward, this new method is what I recommend for building complex menus if using Menu Builder. The new method is called getMenuItems($menu, $type = 2, $options = null) takes 3 arguments. Before I show you the cool things you can do with this method, let's get familiar with the arguments. $menu: This is identical to the first argument in MarkupMenuBuilder's method render(): Use this argument to tell getMenuItems() the menu whose items you want returned. The argument takes a Page, id, title, name or array of menu items $type: Whether to return a normal array or a Menu object (WireArray) of menu items $options: Similar to render() method options but please note that only 3 options (from the list of those applicable to render()) apply to getMenuItems(). These are default_title, default_class and current_class_level. default_class is applied to the item's property $m['ccss_itemclass']. Probably not many know that MarkupMenuBuilder ships with a tiny but useful internal class called Menu. MenuBuilder uses it internally to build Menu objects that are finally used to build menus. Menu objects are WireArrays. If $type == 2, this is what is returned. Array vs WireArray So, which type of output should you return using getMenuItems()? Well, it depends on your needs. Personally, I'd go for the Menu object. Here's why: Although you can still easily build menus by using getMenuItems() to return a normal PHP Array, it's not nearly as powerful as returning and using a WireArray Menu object instead. Whichever type of items you return using getMenuItems(), it means you can manipulate or apply logic before or within a recursive function (or foreach loop) to each of your menu items. For instance, show some parts of the menu only to users who are logged in, or get extra details from a field of the page represented by the menu item, add images to your menu items, etc. Grabbing the Menu object means you can easily add some runtime properties to each Menu object (i.e. each menu item). If you went with a normal array, of course, you can also manipulate it, but not as easily as working with an object. A Menu object also means you have access to the powerful WireArray methods (don't touch sort though!). For instance, $menuItems->find("parentID=$m->id"). With a Menu object, you also get to avoid annoying isset(var) that come with arrays . Here are the properties that come with each Menu object. Use these to control your logic and output menu items values. In that block of code, to the left are the indices you'd get with a normal array. The values (to the right) are the Menu object properties. Below are examples of building the W3Bits 'CSS-only responsive multi-level menu' as illustrated in the tutorial by @Beluga. We use 3 different recursive functions to build the menu using items returned by getMenuItems(). I will eventually expound on and add the examples to my Menu Builder site. Meanwhile, here's a (very colourful) demo. Examples @note: The CSS is the one by @Beluga in the tutorial linked to above. @note: Clearer examples can be found in these gists. First, we grab menu items and feed those to our recursive functions. $mb = $modules->get('MarkupMenuBuilder');// get Menu Builder // get menu raw menu items. $menu can be a Page, an ID, a name, a title or an array #$menu = $pages->get(1299);// pass a Page #$menu = 1299;// pass an ID #$menu = 'main';// pass a name $jsonStr = $pages->get(1299)->menu_items; $arrayFromJSON = json_decode($jsonStr, true); #$menu = $arrayFromJSON;// pass an array $menu = 'Main';// pass a title /** grab menu items as WireArray with Menu objects **/ // for examples 1a, 2 and 3 $menuItems = $mb->getMenuItems($menu, 2, $options);// called with options and 2nd argument = 2 {return Menu (WireArray object)} #$menuItems = $mb->getMenuItems($menu);// called without options; 2nd argument defaults to 2 /** grab menu items as Normal Array with Menu items **/ // only for example 1b below menuItems2 = $mb->getMenuItems($menu, 1);// called without options; 2nd argument is 1 so return array Example 1a: Using some recursive function and a Menu object /** * Builds a nested list (menu items) of a single menu. * * A recursive function to display nested list of menu items. * * @access private * @param Int $parent ID of menu item. * @param Array $menu Object of menu items to display. * @param Int $first Helper variable to designate first menu item. * @return string $out. * */ function buildMenuFromObject($parent = 0, $menu, $first = 0) { $out = ''; $has_child = false; foreach ($menu as $m) { $newtab = $m->newtab ? " target='_blank'" : ''; // if this menu item is a parent; create the sub-items/child-menu-items if ($m->parentID == $parent) {// if this menu item is a parent; create the inner-items/child-menu-items // if this is the first child if ($has_child === false) { $has_child = true;// This is a parent if ($first == 0){ $out .= "<ul class='main-menu cf'>\n"; $first = 1; } else $out .= "\n<ul class='sub-menu'>\n"; } $class = $m->isCurrent ? ' class="current"' : ''; // a menu item $out .= '<li' . $class . '><a href="' . $m->url . '"' . $newtab . '>' . $m->title; // if menu item has children if ($m->isParent) { $out .= '<span class="drop-icon">▼</span>' . '<label title="Toggle Drop-down" class="drop-icon" for="' . wire('sanitizer')->pageName($m->title) . '" onclick>▼</label>' . '</a>' . '<input type="checkbox" id="' . wire('sanitizer')->pageName($m->title) . '">'; } else $out .= '</a>'; // call function again to generate nested list for sub-menu items belonging to this menu item. $out .= buildMenuFromObject($m->id, $menu, $first); $out .= "</li>\n"; }// end if parent }// end foreach if ($has_child === true) $out .= "</ul>\n"; return $out; } Example 1b: Using some recursive function and a Menu array /** * Builds a nested list (menu items) of a single menu from an Array of menu items. * * A recursive function to display nested list of menu items. * * @access private * @param Int $parent ID of menu item. * @param Array $menu Array of menu items to display. * @param Int $first Helper variable to designate first menu item. * @return string $out. * */ function buildMenuFromArray($parent = 0, $menu, $first = 0) { $out = ''; $has_child = false; foreach ($menu as $id => $m) { $parentID = isset($m['parent_id']) ? $m['parent_id'] : 0; $newtab = isset($m['newtab']) && $m['newtab'] ? " target='_blank'" : ''; // if this menu item is a parent; create the sub-items/child-menu-items if ($parentID == $parent) {// if this menu item is a parent; create the inner-items/child-menu-items // if this is the first child if ($has_child === false) { $has_child = true;// This is a parent if ($first == 0){ $out .= "<ul class='main-menu cf'>\n"; $first = 1; } else $out .= "\n<ul class='sub-menu'>\n"; } $class = isset($m['is_current']) && $m['is_current'] ? ' class="current"' : ''; // a menu item $out .= '<li' . $class . '><a href="' . $m['url'] . '"' . $newtab . '>' . $m['title']; // if menu item has children if (isset($m['is_parent']) && $m['is_parent']) { $out .= '<span class="drop-icon">▼</span>' . '<label title="Toggle Drop-down" class="drop-icon" for="' . wire('sanitizer')->pageName($m['title']) . '" onclick>▼</label>' . '</a>' . '<input type="checkbox" id="' . wire('sanitizer')->pageName($m['title']) . '">'; } else $out .= '</a>'; // call function again to generate nested list for sub-menu items belonging to this menu item. $out .= buildMenuFromArray($id, $menu, $first); $out .= "</li>\n"; }// end if parent }// end foreach if ($has_child === true) $out .= "</ul>\n"; return $out; } For example 1a and 1b we call the respective functions to output the menu <div id="content"> <nav id="mainMenu"> <label for='tm' id='toggle-menu' onclick>Navigation <span class='drop-icon'>▼</span></label> <input id='tm' type='checkbox'> <?php // build menu from Menu object (example 1a) echo buildMenuFromObject(0, $menuItems); // OR build menu from array (example 1b) #echo buildMenuFromArray(0, $menuItems2); ?> </nav> </div> Example 2: Using a modified version of @mindplay.dk's recursive function /** * Recursively traverse and visit every child item in an array|object of Menu items. * * @param Menu item parent ID $parent to start traversal from. * @param callable $enter function to call upon visiting a child menu item. * @param callable|null $exit function to call after visiting a child menu item (and all of its children). * @param Menu Object|Array $menuItems to traverse. * * @see Modified From mindplay.dk https://processwire.com/talk/topic/110-recursive-navigation/#entry28241 */ function visit($parent, $enter, $exit=null, $menuItems) { foreach ($menuItems as $m) { if ($m->parentID == $parent) { call_user_func($enter, $m); if ($m->isParent) visit($m->id, $enter, $exit, $menuItems); if ($exit) call_user_func($exit, $m); } } } For example 2, we call the function (@note: a bit different from example 1 and 3) this way to output the menu <div id="content"> <nav id="mainMenu"> <label for='tm' id='toggle-menu' onclick>Navigation <span class='drop-icon'>▼</span></label> <input id='tm' type='checkbox'> <?php echo "<ul class='main-menu cf'>"; visit( 0// start from the top items , // function $enter: <li> for a single menu item function($menuItem) { echo '<li><a href="' . $menuItem->url . '">' . $menuItem->title; if ($menuItem->isParent) { echo '<span class="drop-icon">▼</span>' . #'<label title="Toggle Drop-down" class="drop-icon" for="' . wire('sanitizer')->pageName($menuItem->title) . '" onclick>▼</label>' . '<label title="Toggle Drop-down" class="drop-icon" for="sm' . $menuItem->id . '" onclick>▼</label>' . '</a>' . #'<input type="checkbox" id="' . wire('sanitizer')->pageName($menuItem->title) . '"><ul class="sub-menu">' . '<input type="checkbox" id="sm' . $menuItem->id . '"><ul class="sub-menu">'; } else echo '</a>'; }// end function 1 ($enter) , #function $exit: close menu item <li> and sub-menu <ul> tags function($menuItem) { if ($menuItem->isParent) echo '</ul>'; echo '</li>'; }, $menuItems// the menu items (Menu objects in this example) ); ?> </nav> </div> Example 3: Using a modified version of @slkwrm's recursive function /** * Recursively traverse and visit every child item in an array|object of Menu items. * * @param Menu Object|Array $menuItems to traverse. * @param Int $parent ID to start traversal from. * @param Int $depth Depth of sub-menus. * @param Int $first Helper variable to designate first menu item. * @see Modified From @slkwrm * @return string $out. */ function treeMenu($menuItems, $parent, $depth = 1, $first = 0) { $depth -= 1; if ($first == 0){ $out = "\n<ul class='main-menu cf'>"; $first = 1; } else $out = "\n<ul class='sub-menu'>"; foreach($menuItems as $m) { if ($m->parentID == $parent) { $sub = ''; $out .= "\n\t<li>\n\t\t<a href='" . $m->url . "'>" . $m->title; if($m->isParent && $depth > 0 ) { $sub = str_replace("\n", "\n\t\t", treeMenu($menuItems, $m->id, $depth, $first)); $out .= '<span class="drop-icon">▼</span>' . '<label title="Toggle Drop-down" class="drop-icon" for="sm' . $m->id . '" onclick>▼</label>' . '</a>' . '<input type="checkbox" id="sm' . $m->id . '">' . $sub . "\n\t"; } else $out .= "</a>\n\t"; $out .="\n\t</li>"; } }// end foreach $out .= "\n</ul>"; return $out; } For example 3, we call the function to output the menu <div id="content"> <nav id="mainMenu"> <label for='tm' id='toggle-menu' onclick>Navigation <span class='drop-icon'>▼</span></label> <input id='tm' type='checkbox'> <?php //parameters: menuItems, menu item parent ID, depth, first (helper variable) echo treeMenu($menuItems, 0, 4); ?> </nav> </div>

In a nutshell, you have to know these (very) basic concepts: Define a variable Output a variable Loop through an array Perhaps use switch/case instead of if/else Concatenate strings for HTML-output Use include() or require() Have the API cheatsheet ready to build your selectors There are tons of examples around here, and also when you download and install PW, everything in the /site folder is very well commented to get you going.

You could start with the beginner's tutorials in the docs, they are very clear and helpful: take Joss's "But what if I don't know how to code?" series, or Ryan's "Hello worlds" tutorial for starting. Anyway, all that you need is here https://processwire.com/docs/

as a follow up to this, i have a module for image tags, using selectize.js; 1.) install the shared js lib: https://github.com/outflux3/JquerySelectize 2.) install the image tags module https://github.com/outflux3/SelectizeImageTags i have it working on several sites without issues, but this module should be considered Alpha. Documentation is also at an early stage. please report any issues or questions here. Once these are all stable and have had some testing/documentation, they will be added to the modules directory. (note these represent the start of a series of modules that utilize selectize.js, including an awesome page select Inputfield)

Modules > Core > ProcessUser > What fields should be displayed in the page listing?

Posted. I hope that I'll be able to supply patches in the future, but this is the best I can do for now. Thanks for the guidance.

Quick FYI - I just committed support for using the Validator behind htaccess protected sites. There are new config settings for entering the username and password to be sent with the request. @tpr has just tested for me and it's working great for him, but because I am using wireHttp->get first, and then falling back to file_get_contents, I am not sure if it will work for everyone as is. Not enough time right now to test thoroughly, so let me know if anyone using htaccess protection has any problems with this new one. To quote @tpr - "I can no more hide behind htpasswd and say that "Everything is valid, trust me" :)"

@tpr - some of that was intentional, but some was a result of the last change. The latest version now cleans this up better and should look like this: or: Please confirm that it looks the same for you now too - thanks!

Well that's the main thing, figuring out a system that integrates well into PW and is simple enough. See the images below of my current newsletter page in the admin and the final outcome. There's a dedicated Newsletters page in the root page tree, newsletters are listed below them. This is useful because newsletters have their own URLs so "View in browser" is easy to implement. The subscribers have another page in the root, each subscriber is a page. They can be active or inactive, based on the page status published or not. I use simpe subscription, no confirmation emails. I do not use subscriber lists, this should be also implemented somehow. I use wireMail() for sending (with MailGun), but queing would be also nice. It would be nicer to have a new nav item in the admin "Newsletter", and move the newsletters and subscribers there. Anyway, this is what I've got, maybe these can generate some ideas.

Hi everyone I´m creating an AdminTheme based on Semantic UI framework. Here is the beta version. I 'm fixing bugs. Github here Changelog: 0.0.1 --- Fixed background color / image.

Brilliant job kongondo. Thank you so much.

Great - thanks for testing and letting me know! Back to the authorization issue - it is possible to send the username and password so it's possible to actually get the html of the page so it can be sent to the validator - let me know if you think that would be a worthwhile addition. Speaking of new functionality, I have just had an idea for a "Notes" panel. The content would be unique to each page and the idea is that it would be a place to store notes about changes that are still needed for the page. I would store the info either in a dedicated sql table, or perhaps in JSON in a text file that can be parsed on load. I know most of us make use of services like trello or similar for keeping track of tasks during development, but I am wondering if this might also be useful because the notes are available in the context of the viewed page. I am also working on a TODO panel which parses out //TODO, //FIXME etc from your php scripts. Not sure if there is too much overlap between these two panels. I know that when I use //TODO in my code it's usually about code improvements/refactoring etc, whereas I think the Notes panel would be more about content/layout/functionality changes. Anyway, I'd really appreciate hearing everyone's thoughts on whether they would find either of these useful and what the ideal approach for your workflow might be.

I'm not sure what the point of that would be (or whether it's even possible)? ..MSN is brilliant if you want a menu that matches your page tree...MB mainly caters for the opposite need....

Looks nice! Some cool ajax things going on. Could you elaborate why and how it was created? A profile is something to be reusable. When should this one be?

merci!

You don't have to learn complete php, just the parts you need to use the processwire api, e.g. for each, echo, ... etc.

Hi, in general, processwire has a very clean an "simple" API. So it has a very easy learning curve and you get result right away. I think after you got the basics of PHP it is very helpful if you just start working with it(and PW). The documentation has so many examples and codesnippets that lots of stuff can really be learned by just doing it. And the more you struggle with a specific problem, the easier it should also be for you to dig into more specific tutorials that help you advance with it. Also the community here is very helpful and friendly and even answering some rather basic PHP questions if they come up from time to time. Ok, enough written, here is also a link of nice page that might help you proceed in writing good php code: www.phptherightway.com Hope this helps you a bit to go on Greetings

Update: version 0.1.5 Changelog Added new method getMenuItems() to MarkupMenuBuilder that greatly simplifies creation of custom complex menus. Read more about it in previous (long) post.

So this is basically a recreation of a menu tutorial from W3Bits, tweaked to include the Advanced checkbox hack. Demo. Even the Advanced hack itself was tweaked: apparently this bit is causing issues with Safari, so I removed it: @-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }I found this particular configuration to work quite nicely. A previous menu I tried had a problem with the menu items staying expanded between media query breakpoints, when resizing the browser. Below is the CSS for the menu. You will notice that it is mobile-first: /* Menu from http://w3bits.com/css-responsive-nav-menu/ */ /* Note: the tutorial code is slightly different from the demo code */ .cf:after { /* micro clearfix */ content: ""; display: table; clear: both; } body { -webkit-animation: bugfix infinite 1s; } #mainMenu { margin-bottom: 2em; } #mainMenu ul { margin: 0; padding: 0; } #mainMenu .main-menu { display: none; } #tm:checked + .main-menu { display: block; } #mainMenu input[type="checkbox"], #mainMenu ul span.drop-icon { display: none; } #mainMenu li, #toggle-menu, #mainMenu .sub-menu { border-style: solid; border-color: rgba(0, 0, 0, .05); } #mainMenu li, #toggle-menu { border-width: 0 0 1px; } #mainMenu .sub-menu { background-color: #444; border-width: 1px 1px 0; margin: 0 1em; } #mainMenu .sub-menu li:last-child { border-width: 0; } #mainMenu li, #toggle-menu, #mainMenu a { position: relative; display: block; color: white; text-shadow: 1px 1px 0 rgba(0, 0, 0, .125); } #mainMenu, #toggle-menu { background-color: #09c; } #toggle-menu, #mainMenu a { padding: 1em 1.5em; } #mainMenu a { transition: all .125s ease-in-out; -webkit-transition: all .125s ease-in-out; } #mainMenu a:hover { background-color: white; color: #09c; } #mainMenu .sub-menu { display: none; } #mainMenu input[type="checkbox"]:checked + .sub-menu { display: block; } #mainMenu .sub-menu a:hover { color: #444; } #toggle-menu .drop-icon, #mainMenu li label.drop-icon { position: absolute; right: 0; top: 0; } #mainMenu label.drop-icon, #toggle-menu span.drop-icon { padding: 1em; font-size: 1em; text-align: center; background-color: rgba(0, 0, 0, .125); text-shadow: 0 0 0 transparent; color: rgba(255, 255, 255, .75); } label { cursor: pointer; user-select: none; } @media only screen and (max-width: 64em) and (min-width: 52.01em) { #mainMenu li { width: 33.333%; } #mainMenu .sub-menu li { width: auto; } } @media only screen and (min-width: 52em) { #mainMenu .main-menu { display: block; } #toggle-menu, #mainMenu label.drop-icon { display: none; } #mainMenu ul span.drop-icon { display: inline-block; } #mainMenu li { float: left; border-width: 0 1px 0 0; } #mainMenu .sub-menu li { float: none; } #mainMenu .sub-menu { border-width: 0; margin: 0; position: absolute; top: 100%; left: 0; width: 12em; z-index: 3000; } #mainMenu .sub-menu, #mainMenu input[type="checkbox"]:checked + .sub-menu { display: none; } #mainMenu .sub-menu li { border-width: 0 0 1px; } #mainMenu .sub-menu .sub-menu { top: 0; left: 100%; } #mainMenu li:hover > input[type="checkbox"] + .sub-menu { display: block; } }Below is the markup outputted using mindplay.dk's method. I found it impossible to output with MarkupSimpleNavigation or MenuBuilder. The homepage is added as the first top-level item. Notice the onclicks that make it work on iOS < 6.0. The clearfix class cf for the top ul is important. Otherwise the element will have no height (got bitten by this..). <nav id="mainMenu"> <label for='tm' id='toggle-menu' onclick>Navigation <span class='drop-icon'>▼</span></label> <input id='tm' type='checkbox'> <ul class='main-menu cf'> <?php /** * Recursive traverse and visit every child in a sub-tree of Pages. * * @param Page $parent root Page from which to traverse * @param callable $enter function to call upon visiting a child Page * @param callable|null $exit function to call after visiting a child Page (and all of it's children) * * From mindplay.dk */ echo '<li><a href="' . $pages->get(1)->url . '">Home</a></li>'; function visit(Page $parent, $enter, $exit=null) { foreach ($parent->children() as $child) { call_user_func($enter, $child); if ($child->numChildren > 0) { visit($child, $enter, $exit); } if ($exit) { call_user_func($exit, $child); } } } visit( $pages->get(1) , function(Page $page) { echo '<li><a href="' . $page->url . '">' . $page->title; if ($page->numChildren > 0) { echo '<span class="drop-icon">▼</span> <label title="Toggle Drop-down" class="drop-icon" for="' . $page->name . '" onclick>▼</label> </a> <input type="checkbox" id="' . $page->name . '"><ul class="sub-menu">'; } else { echo '</a>'; } } , function(Page $page) { if ($page->numChildren > 0) { echo '</ul>'; } echo '</li>'; } ); ?> </ul> </nav>Edit: fixed the end part, thanks er314.

I have now added a method to MarkupMenuBuilder that makes this quite easy, thanks to your challenge . @Beluga, I have used your example to make a demo using Menu Builder, thanks. @Peter, you will find full examples in Menu Builder's support forum here.

Version 1.7.3 works fine, thanks!

This could be modificated for the "Release Trailer" for PW 3....

Some of the people who are using this are not in a position to afford "proper" webdevs, which is fair. They have a different business and "a website" is just one of their marketing channels. So what these builders are competing with is Facebook, Instagram etc. (even wordpress.com) – and once these people have a proper and thriving business and their budget and needs increase – we will be gladly helping them. Right? Or to put it differently: what smartphone cameras are capable of these days is amazing. The cost of DSLR is ridiculously low. Still, people hire photographers. Who sees their business model threatened by these generators should probably rethink it.

This worked for me: I'm doing a "addHookBefore" inside the ProcessPageAdd::executeTemplate Method. public function init() { if(!$this->user->isSuperuser() && $this->user->hasRole("XXXXXXXX")) $this->addHookBefore('ProcessPageAdd::executeTemplate', $this, 'redirectParent'); } Inside the redirectParent Hook Method public function redirectParent(HookEvent $event){ //Get ID from URL $templateID = (int) $this->input->get->template_id; //Check if it's a Newsletter if($templateID == 66){ //Get the Parent Page specified by the choose_sender_2016 Pagefield in the user & newsletter Template $parent = $this->pages->get("template=newsletter-clinic, choose_sender_2016={$this->user->choose_sender_2016}"); //Check if a Parent was found if($parent->id){ //Skip the Parent Selection with a redirect $url = "./?parent_id=" . $parent->id; if($this->wire('input')->get('modal')) $url .= "&modal=1"; $this->wire('session')->redirect($url); } } }

That's not necessarily what I meant. Your solution should work too, but I think you don't need to do this extra copying. $items = $pages->find("template=product, title|body|options.title*=$freetext); E.g. if the user searched red, you can search within the fields of the product itself (e.g. title and body), aswell as in the fields of pages from the pageselector (e.g. options.title). This should be what you are looking for or did I miss something? What I meant regarding usage of 3rd party search is mainly regarding typos, result preview text and similar things that are offered e.g. when searching with google and co.

Visual Page Selector Released 31 March 2016 https://processwireshop.pw/plugins/visual-page-selector/