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 MoritzLost
      This is a new module that provides a simple solution to clearing all your cache layers at once, and an extensible interface to perform various cache-related actions.
      The simple motivation behind this module was that I was tired of manually clearing caches in several places after deploying a change on a live site. The basic purpose of this module is a simple Clear all caches link in the Setup menu which clears out all caches, no matter where they hide. You can customize what exactly the module does through it's configuration menu:
      Expire or delete all cache entries in the database, or selectively clear caches by namespace ($cache API) Clear the the template render cache. Clear out specific folders inside your site's cache directory (/site/assets/cache) Refresh version strings for static assets to bust client-side browser caches (this requires some setup, see the full documentation for details). This is the basic function of the module. However, you can also add different cache management action through the API and execute them through the module's interface. For this advanced usage, the module provides:
      An interface to see all available cache actions and execute them. A system log and logging output on the module page to see verify what the module is doing. A CacheControlTools class with utility functions to clear out different caches. An API to add cache actions, execute them programmatically and even modify the default action. Permission management, allowing you granular control over which user roles can execute which actions. The complete documentation can be found in the module's README.
      Beta release
      Note that I consider this a Beta release. Since the module is relatively aggressive in deleting some caches, I would advise you to install in on a test environment before using it on a live site.
      Let me know if you're getting any errors, have trouble using the module or if you have suggestions for improvement!
      In particular, can someone let me know if this module causes any problems with the ProCache module? I don't own or use it, so I can't check. As far as I can tell, ProCache uses a folder inside the cache directory to cache static pages, so my module should be able to clear the ProCache site cache as well, I'd appreciate it if someone can test that for me.
      Future plans
      If there is some interest in this, I plan to expand this to a more general cache management solution. I particular, I would like to add additional cache actions. Some ideas that came to mind:
      Warming up the template render cache for publicly accessible pages. Removing all active user sessions. Let me know if you have more suggestions!
      Links
      https://github.com/MoritzLost/ProcessCacheControl ProcessCacheControl in the Module directory

    • By joshua
      This module is (yet another) way for implementing a cookie management solution.
      Of course there are several other possibilities:
      - https://processwire.com/talk/topic/22920-klaro-cookie-consent-manager/
      - https://github.com/webmanufaktur/CookieManagementBanner
      - https://github.com/johannesdachsel/cookiemonster
      - https://www.oiljs.org/
      - ... and so on ...
      In this module you can configure which kind of cookie categories you want to manage:

      You can also enable the support for respecting the Do-Not-Track (DNT) header to don't annoy users, who already decided for all their browsing experience.
      Currently there are four possible cookie groups:
      - Necessary (always enabled)
      - Statistics
      - Marketing
      - External Media
      All groups can be renamed, so feel free to use other cookie group names. I just haven't found a way to implement a "repeater like" field as configurable module field ...
      When you want to load specific scripts ( like Google Analytics, Google Maps, ...) only after the user's content to this specific category of cookies, just use the following script syntax:
      <script type="optin" data-type="text/javascript" data-category="statistics" data-src="/path/to/your/statistic/script.js"></script> <script type="optin" data-type="text/javascript" data-category="marketing" data-src="/path/to/your/mareketing/script.js"></script> <script type="optin" data-type="text/javascript" data-category="external_media" data-src="/path/to/your/external-media/script.js"></script> <script type="optin" data-type="text/javascript" data-category="marketing">console.log("Inline scripts are also working!");</script> The type has to be "optin" to get recognized by PrivacyWire, the data-attributes are giving hints, how the script shall be loaded, if the data-category is within the cookie consents of the user. These scripts are loaded asynchronously after the user made the decision.
      If you want to give the users the possibility to change their consent, you can use the following Textformatter:
      [[privacywire-choose-cookies]] It's planned to add also other Textformatters to opt-out of specific cookie groups or delete the whole consent cookie.
      You can also add a custom link to output the banner again with a link / button with following class:
      <a href="#" class="privacywire-show-options">Show Cookie Options</a> <button class="privacywire-show-options">Show Cookie Options</button> This module is still in development, but we already use it on several production websites.
      You find it here: https://github.com/blaueQuelle/privacywire/tree/master
      Download: https://github.com/blaueQuelle/privacywire/archive/master.zip
      I would love to hear your feedback 🙂
      Edit: Updated URLs to master tree of git repo
       
    • By David Karich
      Admin Page Tree Multiple Sorting
      ClassName: ProcessPageListMultipleSorting
      Extend the ordinary sort of children of a template in the admin page tree with multiple properties. For each template, you can define your own rule. Write each template (template-name) in a row, followed by a colon and then the additional field names for sorting.
      Example: All children of the template "blog" to be sorted in descending order according to the date of creation, then descending by modification date, and then by title. Type:
      blog: -created, -modified, title  Installation
      Copy the files for this module to /site/modules/ProcessPageListMultipleSorting/ In admin: Modules > Check for new modules. Install Module "Admin Page Tree Multible Sorting". Alternative in ProcessWire 2.4+
      Login to ProcessWire backend and go to Modules Click tab "New" and enter Module Class Name: "ProcessPageListMultipleSorting" Click "Download and Install"   Compatibility   I have currently tested the module only under PW 2.6+, but think that it works on older versions too. Maybe someone can give a feedback.     Download   PW-Repo: http://modules.processwire.com/modules/process-page-list-multiple-sorting/ GitHub: https://github.com/FlipZoomMedia/Processwire-ProcessPageListMultipleSorting     I hope someone can use the module. Have fun and best regards, David
    • By dimitrios
      Hello,
      this module can publish content of a Processwire page on a Facebook page, triggered by saving the Processwire page.
      To set it up, configure the module with a Facebook app ID, secret and a Page ID. Following is additional configuration on Facebook for developers:
      Minimum Required Facebook App configuration:
      on Settings -> Basics, provide the App Domains, provide the Site URL, on Settings -> Advanced, set the API version (has been tested up to v3.3), add Product: Facebook Login, on Facebook Login -> Settings, set Client OAuth Login: Yes, set Web OAuth Login: Yes, set Enforce HTTPS: Yes, add "https://www.example.com/processwire/page/" to field Valid OAuth Redirect URIs. This module is configurable as follows:
      Templates: posts can take place only for pages with the defined templates. On/Off switch: specify a checkbox field that will not allow the post if checked. Specify a message and/or an image for the post.
      Usage
      edit the desired PW page and save; it will post right after the initial Facebook log in and permission granting. After that, an access token is kept.
       
      Download
      PW module directory: http://modules.processwire.com/modules/auto-fb-post/ Github: https://github.com/kastrind/AutoFbPost   Note: Facebook SDK for PHP is utilized.


×
×
  • Create New...