Kirby3 panel add active class (for CSS) to sections layout card item

Kirby 3
1

Hi all,

Is there a way to add a current ‘.active’ class on a layout card if you’re on that given url / page in the panel? In my blueprint, I have a section for all work pages that acts like a quick nav at the top of each work page:

columns:
  - width: 1/3
    sticky: true
    sections:
      workNav:
        type: pages
        templates:
          - work
          - work-category
        parent: kirby.site
        layout: cards
        size: tiny
        sortable: false
        create: false

When I’m in the panel on a /work or /work-category page, I just want to highlight which layout card is active. I could easily do this with JS, but this doesn’t play nice since Kirby3 is built on Vue.js, so when the panel changes the router, the JS gets stomped until you do a hard refresh, which is why I’m trying to see if there’s an easy CSS solution?

Thanks!

2

You need a custom section to achieve this.

3

Cool, had a feeling this was the case…hah!

To add a simple navigation (really just a mini breadcrumb) of these few work pages by template, think I can achieve this with the sections extensions plugin:

Or do I need to go deeper into the whole npm run build stuff? I’m a little intimidated by this hah:

Thanks for all of your help @texnixe :+1:

4

Hi @texnixe! I took on this challenge and am using this tutorial: https://getkirby.com/docs/cookbook/extensions/first-panel-section

I got all the way up to Step 09 (The blueprint with the final section definition) and am wondering how to build links from dynamically created pages. The example only shows hard-coded links in the blueprint, but I have a work-category.yml blueprint that has any amount of pages the user can add, so how would I get a collection of the work-category items in my blueprint?

columns:
  - width: 1/3
    sticky: true
    sections:
      links:
        type: links
        headline: Work Links
        layout: list
        links:
          query: site.children.published.filterBy('intendedTemplate', 'work-category')

Thanks! :woozy_face: :+1:

My goal here is to display is mini inline nav like this:

Quick Nav: Work / Work Category 01 / Work Category 02 / etc.

5

The example section has some hardcode stuff defined in the blueprint. In your case, you would have to use a method that returns the query results, for example like in the pagesdisplay plugin or more concrete: https://github.com/rasteiner/k3-pagesdisplay-section/blob/master/src/PagesDisplaySection.php#L19, or a custom api endpoint that returns the results.

1 Like
6

Sweet! Thanks for the example - I will base off of this, eliminate the stuff I don’t need (add, sortable, etc). Let you know if I get it to work, this little sub-nav is just a “nice-to-have” thing I’m trying to learn.

7

Well, I just noticed, that since I updated to Kirby 3.4 the pagesdisplay plugin is throwing an error now:

The section “categoryPages” could not be loaded: Cannot access array element pages with arguments

I tried removing the plugin and reinstalling it, no luck. :confused: Should I revert back to 3.5.5?

8

I took out my custom section plugin entirely too, and nothing in my blueprint files have changed. Only thing now that has changed was the Kirby update…

@rasteiner would you have any thoughts on this error?

Here’s my blueprint using pages(‘work’) like site.pages according to your documentation.

categoryPages:
  type: pagesdisplay
  headline: Published
  status: listed
  sortable: false
  image: page.heroImage.toFile
  empty: {{ page.title }} has no published projects yet...
  query: pages('work').children.filterBy('Selectcategory', page.slug)

Thanks!!

9

Sorry @texnixe and @rasteiner - I noticed one other thing ever since I upgraded to 3.4, none of my pages list items have the icon: page anymore, so are the pages not being recognized??

In a page blueprint:
icon: page

The page icon used to be displayed next to the page title:

image
image722×606 6.43 KB

But now the icons are gone!?

image
image848×606 5.99 KB

10
1 Like
11

Thanks for the heads up @cadars!

Regardless of the image / icon issue, I went back to Kirby 3.5.5 and @rasteiner’s pagesdisplay works totally fine again, so I guess I’ll just stick to this version of Kirby… :sweat_smile:

12

Hello! :slight_smile:

Some context
Kirby 3.4 introduced the functionality to run methods accessed through arrays in queries (and the objects that seem “global”, like pages or site, are actually members of an array that the query engine uses as “starting point”. Before this update, the query engine would simply ignore the arguments passed to array elements (like, for example, ('work') passed to pages).

So, Kirby 3.3 actually runs this query:

pages.children.filterBy('Selectcategory', page.slug)

(and pages.children gives you all children of all first level pages, including those under your ‘work’ page, but also all others)

The problem
Kirby 3.4 really tries to run your original query:

pages('work').children.filterBy('Selectcategory', page.slug)

but pages is not a method, it’s just the collection of first level pages.

Therefore the error message:

Cannot access (the) array element “pages” with arguments

You probably intended to use page('work').children.
Unfortunately that doesn’t work either because in the context of my plugin, page is not the globally defined kirby function page(), but the “current page” in the panel.

Solution
Change your query to

site.find('work').children.filterBy('Selectcategory', page.slug)

or

pages.find('work').children.filterBy('Selectcategory', page.slug)

or

pages.get('work').children.filterBy('Selectcategory', page.slug)

or something like those

1 Like
13

Wow, thank you @rasteiner! This all makes sense, appreciate the examples :sunglasses:

I’ll try this out with Kirby 3.4 later today.

Edit: Updated back to Kirby 3.4 just now :zap:

@rasteiner this totally worked, thanks!!
pages.find('work').children.filterBy('Selectcategory', page.slug)

And thank you @cadars - image: false to image: icon did the trick!