Jump to content

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


Robin S
 Share

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 12
Link to comment
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
Link to comment
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
Link to comment
Share on other sites

  • 2 months later...
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.

Link to comment
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
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...