Menu Builder

[kongondo]

Update: version 0.0.7

• Merged changes from last version in dev to master
• MenuBuilder now fully speaks your language, thanks to this post by @bbeer. Added multilingual capabilities and options to both the process and markup modules. 
• In relation to above, added option 'default_title' to MarkupMenuBuilder. This option allows you to control whether to display MB saved menu item titles/labels in your navigation versus the actual/current titles of the pages listed in the navigation. The default => 0 means display the saved values (e.g. useful when you've altered the labels/titles). However, in some cases, e.g. in multilingual environments, you may want your navigation labels to change depending on the chosen/user language. In such a case, users will be presented with labels that match their language (assuming of course your pages have titles for different languages). To use the option specify 'default_title' => 1. Works for both menus and breadcrumbs

Any issues, please let me know, thanks.

IMPORTANT

I forgot to add that currently, for multilingual sites, you can only pass an array | id | page to render() and renderBreadcrumbs() but NOT a not a menu page name | title (will throw an error for superusers and display nothing for all others). This is because there is no way MarkupMenuBuilder can know whether the string you are passing to it is the name of the menu page in English, Dutch or Arabic, etc. It cannot fall back on the current user language as well since the front-end of your site can be surfed in several languages. Neither can it fall back on the default language since a menu could have been created in a different language from the default. Hence, the only foolproof way to get and render menus in such environments is by array of menu items or menu id or menu page. Unless somebody shows me a workaround, its going to stay this way. I hope this is not too much of an inconvenience to ML devs 

Edited March 27, 2015 by kongondo

[kongondo]

Update: version 0.0.8

• Added an 'include_children' feature, thanks to ideas by @dazzyweb.
• Added sister options 'm_max_level' and 'b_max_level' that control how deep to fetch descendants if using 'include_children'. Default is 1 (i.e. only include immediate children); 2 means go up to grandchildren, etc.
• As part of ideas above, also added a 'current_class_level' that lets you specify how high up the ancestral tree to apply a 'current_class'. This is like an 'active parents' setting. The default setting is 1. A value of 2 means apply class to current item and its parent; 3 means apply to the item, its parent and grandparent, etc. Only applies to menus (not breadcrumbs).
• Added a permission 'menu-builder-include-children' in relation to above 'include_children' feature (this permission is required to set and use the feature).

This is currently in the dev branch only. Please thoroughly read the updated docs about these new features (especially the first) before attempting to use them. Although covered in the docs, I would like to repeat this here: Use the 'include_children' feature with caution. You can end up unwittingly including hundreds of child pages in your menu! Currently there are no code-checks in place to prevent such a situation (difficult to impose an arbitrary figure) so we leave this to your better judgement. Also note that the setting cannot be applied to a menu item made up of your 'homepage'.

If you enable the 'include_children' feature (it is off by default), your main settings, PageAutocomplete/AsmSelect and menu item advanced settings will change from this:

to this:

and your menu output to something like this...(from only two items in the visual Menu Builder)

Please test and let me know if there are any issues. Thanks.

[kongondo]

There's a slight bug in the application of the current_class_level across non-native (included children) items, their natural parents and the Menu Builder parents of those natural parents. Filed an issue to remind me. To illustrate:

Home

About (not PW-naturally related to included children)

Natural Parent

Included Child 1

Included Grand Child 1

 

If we set 'current_class_level' to 4, it should be applied up to and including 'About'. Currently, it stops at 'Natural Parent' but it should include this item's Menu Builder parent, i.e. 'About'. A level of 5 should go all the way to 'Home' but it doesn't atm.

[kongondo]

Quick heads-up I have been forgetting to mention. This discussion reminded me about it. There are cases where you need 'dummy links', 'divider menu items', 'non-clickable menu items',  etc,  You can easily achieve that by creating 'External Menu items' and assigning # as the URL. 

[kongondo]

Update: version 0.0.9
 
Fixed the issue whereby 'current_class_level' was not being correctly applied in cases where 'current_class' is applied beyond included children into native MB menu items.
 
In dev branch for now.

[markoj]

Hi kongondo, 

I am new to PW, coming from Modx Evolution. 

I am currently building a menu for my website using the "MarkupSimpleNavigation" module, you can see it in the screenshot below.

The "Blog" is an external link, so I slapped an extra <ul><li><a href>  manually after the module's render code. The problem is that I don't want "Blog" to be that last item in the menu.

That lead me to find "Menu Builder" instead since it gives you the option of having menu items that are not within the PW site itself.....but I don't see a way to use images like in the "MarkupSimpleNavigation" module.

Here's a piece of the code I used for the screen shot, in the "MarkupSimpleNavigation" options:

'item_tpl' => '<a href="{url}"><img src="{gallery_preview_image}" class="img-responsive"><h1>{title}</h1></a>',

In Modx Evo, I would end up using Ditto to handle this kind of thing.

Is there a way I can do this with "Menu Builder" ?   Or another work around?  

Any help would be appreciated!

[kongondo]

Hi markoj,
 
First welcome to PW and the forums!
 
Yes, that's possible. MB allows you to 'allow HTML in menu items title'. See that option when editing your menu under the tab 'main'. You would need to be a superuser or have the permission 'menu-builder-allow-markup' in order to set and use that option.
 
Secondly, your 'Ditto' in this case would be Hanna Code: 
https://processwire.com/talk/topic/3745-hanna-code
http://mods.pw/4b
 
Install the module.
 
Otherwise, if you included your whole HTML in your menu item's title in MB, it won't look pretty and the HTML will be rendered. The <h1> would be especially ugly there ..
 
I don't know where your images will be coming from but in this example, I assume they are saved in some page with an image field called 'img'
 
OK, once you've installed HC module (taking care to follow all the instructions, create a Hanna Code of type PHP. Let's call it 'test'. Add the following code to it. This is just example code;

$p = wire('pages')->get(1317);
#$out = $p->img->first()->size(0,50)->url;
$out = $p->img->eq(0)->size(0,50)->url;
$out = "<img src='$out'>";
echo $out;

Here we assume your images are stored in a field called 'img' and that field allows multiple images. We assume that field is populated in a page with ID 1317. We are also grabbing the first image and resizing it. Save the HC.

Head over to MB (assuming you've installed the module). Create a menu and enable 'allow HTML...' as I described above. Add at least one menu item to your menu. Enter something the below in your menu item's title. We assume the title is called 'Blog'.

[[test]]<span>Blog</span>

Here we use span for convenience, otherwise <h1> will be rendered in the menu title drag and drop handle (hacky I know). We'll replace the <span> with <h1) at runtime.

In your template file you could render your menu as follows:

//get MB
$menu = $modules->get('MarkupMenuBuilder');
$out = $menu->render('My Menu Title', $options);//holds rendered menu

//get hanna code
$hanna = $modules->get('TextformatterHannaCode');	
//render the [[test]] HC + replace <span> with <h1>
echo $hanna->render(str_replace('span', 'h1', $menu->render($m, $options)));

See MB's documentation about what you can pass to $options (e.g. you may not wish to use <ul> and <li> in your menu.

This is just a quick example. Maybe things could be done better..

....And you probably want to edit this menu yourself...clients will probably be confused with [[test]]Blog   

Edited April 13, 2015 by kongondo

[Soma]

With MSN you just create a dummy page for the external link and add a text or url field to your template like 'ext_url' and then use {ext_url|url} in your item_tmpl.

[kongondo]

There you go...two for the price of one

[markoj]

kongondo and Soma thanks for your quick replies!   I read them when you posted and am still working on it (a lot to learn about PW still).

@Soma    - Your solution worked perfect, maybe it's for a new thread, but now that I have the dummy page to use as an external link, how can I make that one link open a blank page, and keep the internal links normal (self) ?

@kongondo   - I am still working on your solution... I got hung up on wrapping my head around Hanna Code and using it like I would a "chunk" in modx evo, thanks for that tip. 

So my page structure is like this:

-Home

  -Fashion

  -People

  -Travel

  -Product

  -Blog (this child has an external link and I would like it to open a blank window target)

  -Me

Each of those child pages have an images field called "gallery_preview_image".

You suggested:

$p = wire('pages')->get(1317);
#$out = $p->img->first()->size(0,50)->url;
$out = $p->img->eq(0)->size(0,50)->url;
$out = "<img src='$out'>";
echo $out;

Is there a way to make the first line "get" one image dynamically from each child's  "gallery_preview_image" image field as the images are not all stored in one place. Each image corresponds to its menu item and page.

Sorry if these questions are more about PW and retrieving images than the module itself, but I gotta wrap my head around some these concepts first and then get to the rest of your instructions. I do get the swapping of <span> hack though. 

[Soma]

@markoj There's plenty of options to handle opening link in new window. But you shouldn't. http://www.smashingmagazine.com/2008/07/01/should-links-open-in-new-windows/

If you still insist. You can for example use jQuery.

$("a[href^='http://']").prop("target", "_blank");

Or a hook with MSN to modify item string:

https://github.com/somatonic/MarkupSimpleNavigation#hook-for-custom-item-string-new-in-120

$nav = $modules->get("MarkupSimpleNavigation");

function myItemString(HookEvent $event){
    $child = $event->arguments('page'); // current rendered child page
    // any logic with $child possible here
    if($child->ext_url){
        // set the return value of this hook to a custom string
        $event->return .= "<a href='$child->ext_url' target='_blank'>$child->title</a>";
    }
}

// setup the hook after on "___getItemString($class, $page)" method
$nav->addHookAfter('getItemString', null, 'myItemString');
echo $nav->render();

[kongondo]

@markoj,

You can pass attribute=value pairs to HC. There is a nice example here: https://processwire.com/talk/topic/1182-module-image-tags/#entry40015

In my example, I assumed you were including 'Blog' as an external page. There is an option in MB to open external links in new tabs if you insist on using it

OK, back to your question...In the following example, we pass a title to HC to find a page with that title and return its first image from an image field called 'gallery_preview_image'. To test this, use this code to import the HC code....(see the import button when viewing your list of HCs).

!HannaCode:images:eyJuYW1lIjoiaW1hZ2VzIiwidHlwZSI6IjIiLCJjb2RlIjoiXC8qaGNfYXR0clxucz1cIlwiXG5oY19hdHRyKlwvXG48P3BocFxuXG4kc2VsID0gJHMgPyBcInRpdGxlPSRzLCB0ZW1wbGF0ZT1tZW51X2ltYWdlXCIgOiAnJztcblxuaWYgKCRzZWwpIHtcblxuICAgICRwID0gd2lyZSgncGFnZXMnKS0+Z2V0KCRzZWwpO1xuICAgICRpbWFnZSA9ICRwLT5nYWxsZXJ5X3ByZXZpZXdfaW1hZ2UtPmZpcnN0KDApLT51cmw7XG4gICAgJGltYWdlID0gXCI8aW1nIHNyYz0nJGltYWdlJz5cIjtcblxufVxuXG5lbHNlIHtcblxuICAgICRpbWFnZSA9ICcnO1xufVxuXG5lY2hvICRpbWFnZTsifQ==/!HannaCode

That should give you code like this (plus populate your HC's attributes field in the Basics tab with s)

<?php

$sel = $s ? "title=$s, template=menu_image" : '';

if ($sel) {

    $p = wire('pages')->get($sel);
    $image = $p->gallery_preview_image->first(0)->url;
    $image = "<img src='$image'>";

}

else {

    $image = '';
}

echo $image;

Then, in your MB pass your menu item's page's titles to HC like so:

I haven't included your 'Blog' page in this example but you can do that easily. However, irrespective of whether it is an external (i.e. non-PW page) or internal, its image will have to live somewhere on your site.

[markoj]

@Soma   I agree with avoiding new window links, the reason I was going use that for the blog is because my blog is a tumblr blog that doesn't have a way back to my site.... well now it does, I spent some time customizing my tumblr template to have the same branding and menu as my website, so now they are all self links.

I just made my first Processwire site live!  www.markojokic.com

The home page menu is made with MarkupSimpleNavigation ->

I made a dummy page for the external blog link, whose template uses a URL Field for my tumblr link (ext_url). Each child page has an images field called "gallery_preview_image". Both of these were taken care of easily in the "item_tpl" line below, which is one of the options for MB. 

That little piece: {ext_url|url}  uses the ext_url field if it exists, if not then just regular url.  (Am I right about that?)

'item_tpl' => '<a href="{ext_url|url}"><img src="{gallery_preview_image}" class="img-responsive">
<h1>{title}</h1></a>',

This ended up being a simpler option than MB since my page tree is straight forward, other than the one external link.

@kongondo I actually built the menu out in MB as well, and I realized that it is for more specific needs. I really liked being able to add pages regardless of my site structure. I will be coming back to it for other sites I plan to build.

Thanks both for the assistance/lessons. Honestly I am not ready for the depth of all of the answers I got, but I am pretty sure I will be referring back to this thread in the future for reference, and to try some of the more advanced concepts out.

My head's spinning after redoing my whole site in Processwire over the past few days, but I am loving it!

[kongondo]

@markoj,

Glad you got it sorted. Yes, MB caters for some very specific needs.

Btw, if you haven't seen it already, there is an intro to PW for those with a similar CMS background to yours

[David Karich]

The current version produces an unclean markup.

[kongondo]

Post Edited: See below; I now see the issue and working to fix it asap...

I am not seeing that here at all. By current version, are you referring to the dev version 0.0.9? 

Here's what I see in Chrome and Firefox...

Chrome

Firefox

Edit:

OK, Now I see it in "view source"...Web devs are prettifying it I guess. I am baffled by this one. Let me investigate, thanks.

Edited April 16, 2015 by kongondo

[Soma]

Maybe you should look at source and not inspect with dev tools cause those show generated source by the browser != code sent from server.

[kongondo]

@Soma...Yes, I have. See my edited post above ....we posted at the same time...

[kongondo]

Update: version 0.1.0

• Cleaned-up HTML output by MarkupMenuBuilder, thanks to @David Karich ( + added tab indentation for cleaner markup). Note that for included children things may not always align up properly with their parent/native MB menus
• Merged all latest changes in dev to master

Edited April 17, 2015 by kongondo

[David Karich]

Update: version 0.1.0

• Cleaned-up HTML output by MarkupMenuBuilder, thanks to @David Karich ( + added tab indentation for cleaner markup). Note that for included children things may not always align up properly with their parent/native MB menus
• Merged all latest changes in dev to master

Thank you for the update. One small thing I've seen yet: In the hyperlinks single quotes are used. The breadcrumb navigation unfortunately has still the dirty markup.

[kongondo]

@David...Thanks for reminding me! I forgot the breadcrumbs!!! Will work on this.  + the quotes...

[Torsten Baldes]

Sorry to bother you, but i have a question regarding the current menu item.

I know, you discussed this with dazzyweb, but i couldn't the right answer.

I have a projects overview page with multiple projects underneath. I just want to include the overview page in my menu and not all the projects. But i want to mark the parent page (project overview) as current, when i'm on a child page (project detail).

Is this possible? How would i do that?

Thanks!

[kongondo]

@Torsten,

Have a look at the option current_class_level documented here.

[Torsten Baldes]

yeah, i've set it to 4 (just to make sure it's high enough), but the parent item is only marked current, when i include the children (include_children => 1).

but, with these settings the childpages are also included in the html of the menu, which i don't want.

here are my settings:

$menuOptions = array(
                    'current_class' => 'current',
                    'include_children' => 1,//show 'natural' MB non-native descendant items as part of navigation
                    'm_max_level' => 1,//how deep to fetch 'include_children'
                    'current_class_level' => 4,//how high up the ancestral tree to apply 'current_class'
             ); 

thanks!

[hansv]

As a newbie I discovered Menu Builder.  Thankx kogondo for this piece of art.

I have a multilingual question.  I read this forum-topic and the 'Readme' of this module.  For multilangual I can not use the menu title or menu name, but where can I find the menu ID to render my menu?

Thanks