Recommended Posts

Breadcrumb Dropdowns

Adds dropdown menus of page edit links to the breadcrumbs in Page Edit.

bd

Installation

Install the Breadcrumb Dropdowns module. The module requires ProcessWire >= v3.0.83 and AdminThemeUikit.

There is a checkbox option in the module config that determines if the breadcrumb dropdowns will include pages that the user does not have permission to edit.

Features/details

  • The module adds an additional breadcrumb item at the end for the currently edited page. That's because I think it's more intuitive for the dropdown under each breadcrumb item to show the item's sibling pages rather than the item's child pages.
  • In the dropdown menus the current page and the current page's parents are highlighted in a crimson colour to make it easier to quickly locate them in case you want to edit the next or previous sibling page.
  • Unpublished and hidden pages are indicated in the dropdowns with similar styling to that used in Page List.
  • If the option to include uneditable pages is selected then those pages are indicated by italics with a reduced text opacity and the "not-allowed" cursor is shown on hover.
  • There is a limit of 25 pages per dropdown for performance reasons and to avoid the dropdown becoming unwieldy.
  • If the current user is allowed to add new pages under the parent page an "Add New" link is shown at the bottom of the breadcrumb dropdown.
  • If the currently edited page has children or the user may add children, a caret at the end of the breadcrumbs reveals a dropdown of up to the first 25 children and/or an "Add New" link.

Overriding the listed siblings for a page

If you want to override the siblings that are listed in the dropdowns you can hook the BreadcrumbDropdowns::getSiblingsmethod and change the returned PageArray. For most use cases this won't be necessary.

Incompatibilities

This module replaces the AdminThemeUikit::renderBreadcrumbs method so will potentially be incompatible with other modules that hook the same method.

 

https://modules.processwire.com/modules/breadcrumb-dropdowns/
https://github.com/Toutouwai/BreadcrumbDropdowns

  • Like 10

Share this post


Link to post
Share on other sites

Looks awesome, but just got this on attempting to install:

image.thumb.png.f3d8021d5a85161144fdc1225d73e3f0.png

  • Like 1

Share this post


Link to post
Share on other sites
'requires' => 'ProcessWire>=3.0.83, AdminThemeUikit',

 

  • Like 1

Share this post


Link to post
Share on other sites

I see you have a limit=25 which is a great idea, but I am wondering whether it would also make sense to order by modified date descending? I am just thinking about blog siblings as an example.

Share this post


Link to post
Share on other sites

Fatal error: Uncaught Error: Call to a member function siblings() on null in C:\inetpub\wwwroot\site\modules\BreadcrumbDropdowns\BreadcrumbDropdowns.module:97

This happen if you have AdminThemeBoss module installed (https://github.com/noelboss/AdminThemeBoss)

Share this post


Link to post
Share on other sites
56 minutes ago, adrian said:

Looks awesome, but just got this on attempting to install

Hmm, it's installing as expected here. The "requires" setting I've used looks like it conforms to the example given in the Module documentation. Any ideas why it might not be working in your case?

16 minutes ago, adrian said:

I see you have a limit=25 which is a great idea, but I am wondering whether it would also make sense to order by modified date descending? I am just thinking about blog siblings as an example.

I use the "AddNewChildFirst" option in AdminOnSteroids for blog/news items and the dropdowns work well with that. But I get your point and will look at implementing something that honours the "sort settings for children" on the parent page/template. And add a note to the readme about the 25 item limit.

 

19 minutes ago, matjazp said:

This happen if you have AdminThemeBoss module installed (https://github.com/noelboss/AdminThemeBoss)

Yes, very likely will not be compatible with that module as AdminThemeBoss already modifies the breadcrumbs.

  • Like 1

Share this post


Link to post
Share on other sites
10 minutes ago, Robin S said:

But I get your point and will look at implementing something that honours the "sort settings for children" on the parent page/template.

@adrian, it seems that the $page->siblings() method used in the module already sorts by the sort field defined on the parent page or template. Do you have that set for your blog items parent?

  • Like 1

Share this post


Link to post
Share on other sites

Is the module using Ajax or adds the dropdowns to the markup in advance?

Share this post


Link to post
Share on other sites
2 minutes ago, tpr said:

Is the module using Ajax or adds the dropdowns to the markup in advance?

There's no AJAX involved - unless you had a crazy number of parents the number of pages rendered in the menus isn't that many and it's better to have the dropdowns appear instantly I think.

Share this post


Link to post
Share on other sites
1 minute ago, Robin S said:

@adrian, it seems that the $page->siblings() method used in the module already sorts by the sort field defined on the parent page or template. Do you have that set for your blog items parent?

Sorry, I didn't actually test it on a blog page tree - it was more of a theoretical question/consideration. So long as siblings() sorts automatically everything should be good.

 

24 minutes ago, Robin S said:

Hmm, it's installing as expected here. The "requires" setting I've used looks like it conforms to the example given in the Module documentation. Any ideas why it might not be working in your case?

This is weird - it has that error when installing it via class name, but it works fine when installing from an uploaded zip. Can you reproduce the issue when installing via class name?

Share this post


Link to post
Share on other sites
5 minutes ago, adrian said:

This is weird - it has that error when installing it via class name, but it works fine when installing from an uploaded zip. Can you reproduce the issue when installing via class name?

FYI, Got the same error when installing via class name.

  • Like 1

Share this post


Link to post
Share on other sites
29 minutes ago, adrian said:

This is weird - it has that error when installing it via class name, but it works fine when installing from an uploaded zip. Can you reproduce the issue when installing via class name?

Yes, it is weird. I think it must be an issue with the modules directory as the "requires" condition looks legit to me. I remember @Macrura struck something like this before with his Selectize modules - maybe he knows more about it?

For now I've removed the entire "requires" condition so the module is at least installable by classname from the directory. Will raise a GitHub issue on the PW repo if it's looking like it is a definite bug with the modules directory.

  • Like 2

Share this post


Link to post
Share on other sites

@Robin S 'requires' => 'ProcessWire>=3.0.83, AdminThemeUikit' doesn't work for you?

  • Like 2

Share this post


Link to post
Share on other sites
2 hours ago, matjazp said:

'requires' => 'ProcessWire>=3.0.83, AdminThemeUikit' doesn't work for you?

Ah, yes, that does work. Thanks, I didn't realise your earlier comment was a suggestion to change to the string syntax.

I will raise an issue for Ryan to take a look at as the array syntax is the one that's shown in the documentation example.

Share this post


Link to post
Share on other sites

Nice work @Robin S thanks you.

 

Just saying, it works on my side with AdminThemeBoss 😊

 

bc.png.a4850c9d364db6c4d7b46f3f24b7cc9b.png

  • Like 2

Share this post


Link to post
Share on other sites

Great module! I'm working on compatibility with AdminThemeBoss.

I'd suggest adding the following css, because the default theme has a font-size on <a> inside the breadcrumb:

.uk-breadcrumb  >li {
        font-size: .875rem;

}

I personally would not even include the title because it's there twice with the page title…

Also, I get an error when clicking on the arrow after the tree and then the root page:

1058662691_ScreenShot2018-07-18at11_47_25.thumb.png.ff272e33ca95dd0a25dc191b9d3ed009.png

  • Like 2

Share this post


Link to post
Share on other sites
25 minutes ago, Noel Boss said:

I'd suggest adding the following css, because the default theme has a font-size on <a> inside the breadcrumb of 0.825rem

Good spotting, thanks.

26 minutes ago, Noel Boss said:

I personally would not event include the title because it's there twice with the page title

That's explained in the readme:

Quote

The module adds an additional breadcrumb item at the end for the currently edited page. That's because I think it's more intuitive for the dropdown under each breadcrumb item to show the item's sibling pages rather than the item's child pages.

 

26 minutes ago, Noel Boss said:

Also, I get an error when clicking on the arrow after the tree and then the root page

Thanks, should be fixed in v0.1.1. The Home page is a special case that the module should leave alone because the Home page has no siblings to appear in a dropdown. I'm thinking that this is the error that @matjazp mentioned earlier, which actually isn't related to AdminThemeBoss. Although the modules are probably still incompatible if the "extended breadcrumb" option is activated in AdminThemeBoss.

Share this post


Link to post
Share on other sites
1 minute ago, Robin S said:

The module adds an additional breadcrumb item at the end for the currently edited page. That's because I think it's more intuitive for the dropdown under each breadcrumb item to show the item's sibling pages rather than the item's child pages.

Just my suggestion: Display the dropdown on hover over the elements … consistent behaviour like the top menu, then you don't even need the triangles anymore and also not the last item…

Share this post


Link to post
Share on other sites
3 minutes ago, Noel Boss said:

Display the dropdown on hover over the elements

Make that optional in module config, I personally prefer to click 😅

  • Like 3

Share this post


Link to post
Share on other sites
3 minutes ago, Noel Boss said:

Display the dropdown on hover over the elements

I did consider that but decided that show on click is preferrable and I'll stick with that. The original request that inspired this module references the Windows Explorer behaviour that shows dropdowns on click, and I wouldn't want to see menus flying out if my mouse happens to pass over the breadcrumb on the way to the main menu.

  • Like 2

Share this post


Link to post
Share on other sites
1 hour ago, Robin S said:

I'll stick with that

Please again consider this change. It would also allow you to add a dropdown for the children of the currently edited page (the one I suggested to remove 😉 ).  You could add a slight delay for the hover – this way one gets not distracted.

To add visual clarity to the behaviour one could turn the angle down – if preferred, one can keep the click target to these angles:

908605726_ScreenShot2018-07-18at14_22_43.png.24c65ad7b129ad8babe44c98a3fab38c.png

  • Like 1

Share this post


Link to post
Share on other sites
On 7/18/2018 at 6:28 AM, flydev said:

Make that optional in module config, I personally prefer to click 😅

I agree ... more than a preference, I think it's mandatory due to touch screen devices without pointers.. maybe the optional is add or not the hover effect

Share this post


Link to post
Share on other sites

Hey @Robin S - could you please take a look at this? I am seeing it if I try to edit a page that I don't have permission to edit. I am using AdminRestrictBranch, but I expect it might happen regardless of this. Let me know if you need any help reproducing. Thanks!

image.thumb.png.bc22a18766790ec0e613f87530d44e10.png

  • Like 1

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 BitPoet
      MediaLibrary
      Update: MediaLibrary can now be found in the official module list.
      Out of necessity, I've started to implement a simple media library module.
      The basic mechanism is that it adds a MediaLibrary template with file and image fields. Pages of this type can be added anywhere in the page tree.
      The link and image pickers in CKEditor are extended to allow quick selection of library pages from dropdowns. In the link picker this happens in the MediaLibrary tab, where you can also see a preview of the selected image. In the image picker, simply select a library from the dropdown at the top, everything else is handled by standard functionality.
      I've put the code onto github. This module is compatible with ProcessWire 3.
      Steps to usage:
      Download the module's zip from github (switch to the pw3 branche beforehand if you want to test on PW 3.x) and unpack it into site/modules Click "Modules" -> "Refresh" in the admin Click "Install" for MediaLibrary For testing, create a page with the MediaLibrary template under home (give it an expressive title like 'Global Media') and add some images and files Edit a differnt page with a CKEditor field and add a link and an image to see the MediaLibrary features in action (see the screencap for details) Optionally, go into the module settings for MediaLibrary Note: this module is far from being as elaborate as Kongondo's Media Manager (and doesn't plan to be). If you need a feature-rich solution for integrated media management, give it a look.
      Feel free to change the settings for MediaFiles and MediaImages fields, just keep the type as multiple.
      There are some not-so-pretty hacks for creating and inserting the correct markup, which could probably be changed to use standard input fields, though I'm a bit at a loss right now how to get it to work. I've also still got to take a look at error handling before I can call it fit for production. All feedback and pointers are appreciated (that's also why I post this in the development section).

      Edit 09.03.2016 / version 0.0.4: there's now also a "Media" admin page with a shortcut to quickly add a new library.

      Edit 01.05.2016:
      Version 0.0.8:
      - The module now supports nested media libraries (all descendants of eligible media libraries are also selectable in link/image picker).
      - There's a MediaLibrary::getPageMediaLibraries method you can hook after to modify the array of available libraries.
      - You can switch between (default) select dropdowns or radio boxes in the module configuration of MediaLIbrary to choose libraries.
      Edit 10.10.2018:
      Version 0.1.3:
      - Dropped compatibility for ProcessWire legacy versions by adding namespaces
      - Allow deletion of libraries from the Media overview admin page
      - Added an option to hide media libraries from the page tree (optionally also for superusers)
    • By mjut
      Hello!
      I am trying to get some extra css-file into my admin templates. I managed to modify my admin.php to this:
      <?php namespace ProcessWire; require($config->paths->adminTemplates . 'controller.php'); echo "<link rel='stylesheet' type='text/css' href='" . $config->urls->templates . "css/admin.css'>"; By doing so, the css <link> is added to the very end of each parsed admin-html. (right AFTER the closing </body> tag.)
      That causes some trouble. e.g. the page tree is not displaying any more. Although, other pages are working - like the edit form of a page.
      My question: is there a correct way of adding my extra css to the admin area?
      Thanks for you help!
      Stephan
       
    • By Robin S
      This module corrects a few things that I find awkward about the "Add New Template" workflow in the PW admin. I opened a wishlist topic a while back because it would good to resolve some of these things in the core, but this module is a stopgap for now.
      Originally I was going to share these as a few standalone hooks, but decided to bundle them together in a configurable module instead.
      Add Template Enhancements
      A module for ProcessWire CMS/CMF. Adds some efficiency enhancements when adding or cloning templates via admin.

      Features
      Derive label from name when new template added: if you like to give each of your templates a label then this feature can save some time. The label can be added automatically when templates are added in admin, in admin/API, or not at all. There are options for underscore/hyphen replacement and capitalisation of the label. Edit template after add: when adding only a single template, the template is automatically opened for editing after it is added. Copy field contexts when cloning: this copies the field contexts (a.k.a. overrides such as column width, label and description) from the source template to the new template when using the "Duplicate/clone this template?" feature on the Advanced tab. Copy field contexts when duplicating fields: this copies the field contexts if you select the "Duplicate fields used by another template" option when adding a new template. Usage
      Install the Add Template Enhancements module.
      Configure the module settings according to what suits you.
       
      https://github.com/Toutouwai/AddTemplateEnhancements
      https://modules.processwire.com/modules/add-template-enhancements/
    • By quickjeff
      Hi Guys,
      Right now, I am using parents as breadcrumbs but I have pages under a parent page just to keep things organized. The pages are called in other areas of the site. 
      I am trying to create user path history breadcrumbs.
      Meaning: If the user clicked a link to the page, it will show the path he took. Has anyone done this? Would love to see who has before I dive in.
      Thanks. 
    • By Mike Rockett
      As I mentioned in this issue, I've create a new textformatter for ParsedownExtraPlugin, which adds some oomph to your markdown.
      Repo: Parsedown Extra Plugin
      Unlike the built-in textformatter for Parsedown and Parsedown Extra, this should be used when you want to use Extra with additional configuration/customisation.
      Some examples:
      ### Test {.heading} - A [external link](https://google.com/){.google} with `google` as a class that opens in a new tab if the config property is set. - [Another link](/page){target=_blank} that opens in a new tab even though it isn't external. ```html .html <p>Test</p> ``` There's some config options available to you, such as setting attributes on all/external images and links, setting table and table-cell alignment classes, adjusting footnote classes and IDs, adding <code> attributes to their parent <pre> elements, and changing the <code> class if your syntax highlighter does not use language-*.
      I was thinking about adding the ability to make links open in a new tab by appending a plus to the link syntax, but only external links should be opening in a new tab anyway. Further, this would add extra, unnecessary processing time.
      Please let me know if you bump into any problems. ☺️