Jump to content
Robin S

Use hooks to set page icons in admin menus and Page List

Recommended Posts

A couple of hooks that I have found useful in some situations...

In the admin menus the icon associated with each page is normally determined by the "icon" item in the Process module config (e.g. as set in the getModuleInfo() method). But sometimes you might want to change that icon. For example, the Lister Pro module uses the "search-plus" icon, but this is not so good when you have multiple Lister Pro instances because it makes each instance less distinct.

2019-11-01_211522.png.5c778e0472526908f2043f6562138712.png

With the hook below I can use a custom icon for the extra Lister Pro instances I have added:

// Add custom icons to Lister Pro menu items
$wire->addHookAfter('Page::getUnknown(page_icon)', function(HookEvent $event) {
	$page = $event->object;
	if($page->process == 'ProcessPageListerPro') {
		if($page->title === 'Flora species') {
			$event->return = 'leaf';
		} elseif($page->title === 'Flora images') {
			$event->return = 'picture-o';
		}
	}
});

2019-11-01_211721.png.faf857b77edfc12c61560da388e79500.png

If you change an icon in the admin menus like this you can do a Modules > Refresh to clear the menu cache and see the updated icon.

 

And for Page List you probably know that you can assign an icon to all pages that use a template in the template's "Advanced" tab. But with the hook below you can assign icons to pages more dynamically based on any properties of the page. So, for example, you could assign a warning icon to a page to alert site editors if some important field was left empty.

// Add warning icon to news items without a date
$wire->addHookAfter('Page::getIcon', function(HookEvent $event) {
	$page = $event->object;
	if($page->template == 'news_item' && !$page->date_1) {
		$event->return = 'exclamation-triangle';
	}
});

2019-11-01_212559.png.8c1f6d796868db8f0877eb3c74937944.png

  • Like 11

Share this post


Link to post
Share on other sites

There is kind of built in support for this;

- Edit the admin template and add a text field with the name "page_icon"

31224098_Screenshot2019-11-03at12_38_35.thumb.png.399f9d84fc38ab3197aaefb59d3599eb.png

- Go to the admin page tree, search for your lister pages to edit:

213872159_Screenshot2019-11-03at12_39_03.png.03c448ed0504271f288b8e865714f1d3.png

– Add the fontawesome icon name without the fa- part… Voila:

1010060592_Screenshot2019-11-03at12_39_14.thumb.png.c5f808a79ca21373d6a7fcffe583141b.png

 

Thanks to @ryan for pointing me to this solution in a support request… 🙏

  • Like 7

Share this post


Link to post
Share on other sites

In case your template already has an icon assigned per default, you might want to try this instead:

$wire->addHookBefore('Page::getIcon', function(HookEvent $event) {
	$page = $event->object;
	if($page->template == 'event' && !$page->datetimeend) {
		$page->template->icon = 'exclamation-triangle';
	} 
});

Otherwise the already defined icon shows up as text in your page listing.

2019-11-03_14-39.png.d4c6500b251b0de5c7db19cbd9d865de.png

  • Like 2

Share this post


Link to post
Share on other sites

I can highly recommend @kixe's PageIcon module. It adds page_icon as a global field with a FontIconPicker input field. Works great for one-off changes, e.g. specific listers or module pages in the setup dropdown. For dynamic icons (warnings, etc.), the hook is the best solution.

  • Like 3

Share this post


Link to post
Share on other sites

@d'Hinnisdaël  I'm attempting to use the PageIcon module to show page icons on the front end through MarkupSimpleNavigation. Although it appears PageIcon is only for backend use. Do you know of a solution to this?

Share this post


Link to post
Share on other sites
5 hours ago, J_Szwarga said:

I'm attempting to use the PageIcon module to show page icons on the front end through MarkupSimpleNavigation. Although it appears PageIcon is only for backend use. Do you know of a solution to this?

Are you accessing it through $page->page_icon? That should give you the icon code.

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.

×
×
  • Create New...