Custom icons in the Panel

Kirby 2 Suggestions šŸ’”
1

Hey there,

I not quite sure about this, but in some cases it might be useful to be able to set a custom icon on a per-template basis for pages that is shown next to the title in the list of pages in the panel instead of the default icon.

Iā€™m curious to hear what you think about thisā€¦ :smile:

Till

5 Likes
2

Love this idea! It would be an easy way to distinguish different ā€œtypesā€ of pages when we use different ones as children of the same page.

A puzzle piece for when we use pages solely as bricks to build a one-pager?
ā€œSectionā€ pages with a folder icon :wink: /cc @luxlogica
A cog or a DB symbol for pages used as data providers for other pages?

2 Likes
3

+1

For a recent project I did something like that. Not really intuitive but it works.
As you guys probably know you can add a panel.css like that (config.php):

c::set('panel.stylesheet', 'assets/css/panel.css');

There you can choose a different icon from the fontawesome icons like that:

a[data-helper="Folder"] i:before {
   content: "\f114";
}

As long as you know the name of the page your can use the data-helper attribute to find and style it.
Especially the folder icon is super useful for clients imho.

But I think an optional field in the blueprint would be way more intuitive. Given itā€™s already possible to set icons for fieldsā€¦

1 Like
4

+1

Definitely a cool idea.

5

Ha nice trick! I didnā€™t think about the data-helper. Itā€™s a bit fragile, if the title of the content changes the icon will disappear, and not very flexible, but it can be useful sometimes.

6

I tried to hack a quick proof of concept. How the icon is called is pretty straightforward in app/helpers.php, I see what to change in app/snippets/pages/sidebar/subpages.phpā€¦
Where Iā€™m stuck is how to get something like icon: home from the blueprint and pass the value in subpages.php.
Probably something to declare in app/lib/blueprint.php, but I really have no clue. Any idea?

7

A few days ago I created a solution: https://github.com/getkirby/panel/pull/504 (kinda because of this post, even though I didnā€™t remembered where I read it)

1 Like
8

Isnā€™t this similar to this concept: https://github.com/getkirby/panel/pull/504

2 Likes
9

Just a few seconds late :wink: :laughing:

10

Thatā€™s life :grin: and some more characters to get my 20

11

Thanks to both of you for pointing me to this PR.

Dayum! I had it almost right. blueprint::find($icon) was the missing piece.
Also I tried to set the default icon with $this->icon = a::get($this->yaml, 'icon', 'file-o'); Oh well.

Good to see itā€™s coming to core. Youā€™re too fast @distantnativeā€¦ I tackled this mainly to get a better understanding of Kirbyā€™s innards, so it was useful to me anyway :wink: Thank you.

12

This would be another way to do it - no need for the if/else statement in the helpers.php in that case. Feeling very indifferent about whether my or this way would be better :smiley:

Well, thatā€™s not sure yet. The pull request is still only a suggestion.

13

Feeling good to see it was not a dumb idea :grin:

And here it is, combined with my patch that adds a css class to invisible pages:

2 Likes