Jump to content
kongondo

Menu Builder

Recommended Posts

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 by kongondo
  • Like 5

Share this post


Link to post
Share on other sites

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:

post-894-0-96244200-1428532537_thumb.png

to this:

post-894-0-30909900-1428532340_thumb.png

post-894-0-39168000-1428532341_thumb.png

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

post-894-0-57603500-1428532342_thumb.png

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

  • Like 5

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. 

  • Like 1

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

mj-screenshot.jpgHi 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!

mj-screenshot.jpg

Share this post


Link to post
Share on other sites

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  O0  ;)

Edited by kongondo

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

@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();
  • Like 1

Share this post


Link to post
Share on other sites

@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 :D

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:

post-894-0-07917500-1429010068_thumb.png

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.

  • Like 1

Share this post


Link to post
Share on other sites

@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!

  • Like 1

Share this post


Link to post
Share on other sites

@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 :-)

Share this post


Link to post
Share on other sites

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

post-894-0-40656700-1429184802_thumb.png

Firefox

post-894-0-48869200-1429184803_thumb.png


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 by kongondo
  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by kongondo
  • Like 4

Share this post


Link to post
Share on other sites

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.

unclean-markup.jpg

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

@Torsten,

Have a look at the option current_class_level documented here.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Macrura
      PrevNextTabs Module
      Github: https://github.com/outflux3/PrevNextTabs
      Processwire helper modules for adding page navigation within the editor.
      Overview
      This is a very simple module that adds Previous and Next links inline with the tabs on the page editor. Hovering over the tab shows the title of the previous or next page (using the admin's built in jqueryUI tooltips.)
      Usage
      This module is typically used during development where you or your editors need to traverse through pages for the purpose of proofing, flagging and/or commenting. Rather than returning to the page tree or lister, they can navigate with these links.
      Warnings
      If you are using PW version 2.6.1 or later, the system will prevent you from leaving the page if you have unsaved edits.
      For earlier versions, to avoid accidentally losing changes made to a page that might occur if a user accidentally clicks on one of these, make sure to have the Form Save Reminder module installed.
      http://modules.processwire.com/modules/prev-next-tabs/
    • By Gadgetto
      SnipWire - Snipcart integration for ProcessWire
      Snipcart is a powerful 3rd party, developer-first HTML/JavaScript shopping cart platform. SnipWire is the missing link between Snipcart and the content management framework ProcessWire.
      With SnipWire, you can quickly turn any ProcessWire site into a Snipcart online shop. The SnipWire plugin helps you to get your store up and running in no time. Detailed knowledge of the Snipcart system is not required.
      SnipWire is free and open source licensed under Mozilla Public License 2.0! A lot of work and effort has gone into development. It would be nice if you could donate an amount to support further development:

      Status update links (inside this thread) for SnipWire development
      2020-03-21 -- SnipWire 0.8.5 (beta) released! Improves SnipWires webhooks interface and provides some other fixes and additions 2020-03-03 -- SnipWire 0.8.4 (beta) released! Improves compatibility for Windows based Systems. 2020-03-01 -- SnipWire 0.8.3 (beta) released! The installation and uninstallation process has been heavily revised. 2020-02-08 -- SnipWire 0.8.2 (beta) released! Added a feature to change the cart and catalogue currency by GET, POST or SESSION param 2020-02-03 -- SnipWire 0.8.1 (beta) released! All custom classes moved into their own namespaces. 2020-02-01 -- SnipWire is now available via ProcessWire's module directory! 2020-01-30 -- SnipWire 0.8.0 (beta) first public release! (module just submitted to the PW modules directory) 2020-01-28 -- added Custom Order Fields feature (first SnipWire release version is near!) 2020-01-21 -- Snipcart v3 - when will the new cart system be implemented? 2020-01-19 -- integrated taxes provider finished (+ very flexible shipping taxes handling) 2020-01-14 -- new date range picker, discount editor, order notifiactions, order statuses, and more ... 2019-11-15 -- orders filter, order details, download + resend invoices, refunds 2019-10-18 -- list filters, REST API improvements, new docs platform, and more ... 2019-08-08 -- dashboard interface, currency selector, managing Orders, Customers and Products, Added a WireTabs, refinded caching behavior 2019-06-15 -- taxes provider, shop templates update, multiCURL implementation, and more ... 2019-06-02 -- FieldtypeSnipWireTaxSelector 2019-05-25 -- SnipWire will be free and open source Plugin Key Features
      Fast and simple store setup Full integration of the Snipcart dashboard into the ProcessWire backend (no need to leave the ProcessWire admin area) Browse and manage orders, customers, discounts, abandoned carts, and more Multi currency support Custom order and cart fields Process refunds and send customer notifications from within the ProcessWire backend Process Abandoned Carts + sending messages to customers from within the ProcessWire backend Complete Snipcart webhooks integration (all events are hookable via ProcessWire hooks) Integrated taxes provider (which is more flexible then Snipcart own provider) Useful Links
      SnipWire in PW modules directory SnipWire Docs (please note that the documentation is a work in progress) SnipWire @GitHub (feature requests and suggestions for improvement are welcome - I also accept pull requests) Snipcart Website  
      ---- INITIAL POST FROM 2019-05-25 ----
       
    • By horst
      Croppable Image 3
      for PW 3.0.20+
      Module Version 1.2.0
      Sponsored by http://dreikon.de/, many thanks Timo & Niko!
      You can get it in the modules directory!
      Please refer to the readme on github for instructions.
       
      - + - + - + - + - + - + - + - + - + - NEWS - 2020/03/19 - + - + - + - + - + - + - + - + - + - 
      There is a new Version in the pipe, that supports WebP too: 
       
      - + - + - + - + - + - + - + - + - + - NEWS - 2020/03/19 - + - + - + - + - + - + - + - + - + - 
       
       
      -------------------------------------------------------------------------
       
      Updating from prior versions:
       
      Updating from Croppable Image 3 with versions prior to 1.1.7, please do this as a one time step:
      In the PW Admin, go to side -> modules -> new, use "install via ClassName" and use CroppableImage3 for the Module Class Name. This will update your existing CroppableImage3 module sub directory, even if it is called a new install. After that, the module will be recogniced by the PW updater module, what makes it a lot easier on further updates.
      -------------------------------------------------------------------------
       
      For updating from the legacy Thumbnail / CropImage to CroppableImage3 read on here.
       
      -------------------------------------------------------------------------
       
    • By Robin S
      Inspired by a recent question.
      Image Crop Ratios
      Allows preset aspect ratios to be defined per image field for the ProcessWire image crop tool.
      The module adds a select dropdown to the crop tool. Choose an aspect ratio and the crop area will be fixed to that ratio.
      Screencast

      Installation
      Install the Image Crop Ratios module.
      Configuration
      Default aspect ratios for all image fields can be defined in the module config. Aspect ratios for specific image fields can be defined on the Input tab of the field settings. You can override the ratio settings in template context if needed. Insert a hyphen as the first item in the ratio settings unless you want to force a ratio to be applied to the crop tool. The hyphen represents a blank option that allows a free crop area to be drawn. Usage
      Click the "Crop" link on the details view of an image thumbnail. Click the "Crop" icon at the top of the editor window. Choose an option from the "Ratio" select dropdown.  
      https://github.com/Toutouwai/ImageCropRatios
      https://modules.processwire.com/modules/image-crop-ratios/
×
×
  • Create New...