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 6

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...