Jump to content

Release: Font Awesome Page Label (module)


Martijn Geerts
 Share

Recommended Posts

Font Awesome Page Label (almost stable version)

Yet another PageListLabel module, why?

  • Font Awesome is really awesome, hundreds of high quality icons, ready to use. (Don't we all know how cool icon fonts are.)
  • I wished to use icons in conjunction with the other PageList modules out there. (Page List Better Labels, Page List Image Label & Page List Show Page Id )
  • I wanted the possibility to style the icons individually with CSS.
  • Showing icons triggered bij template name, but can be overruled bij Page ID. (Trash Page, 404 Page not found etc.)
  • I wanted a better file or folder indication in the PageList tree.

post-577-0-13441400-1378924489_thumb.pngpost-577-0-66941000-1378926607_thumb.pngpost-577-0-56497900-1379243245_thumb.png

Download:

github

modules directory

  • Like 16
Link to comment
Share on other sites

As this Page Label module uses Javascript to insert the icons it should be compatible with most other Page List modules.

I confirm this compatibility with:

  • Page List Better Labels
  • Page List Image Label
  • Page List Show Page Id
  • Template Decorator
  • Do we have other modules.... ?

After I tried these modules I think I need the ability in this module to hide certain icons.

Say you show a image in the list (Page List Image Label), an extra icon from this module is not that nice.

  • Like 1
Link to comment
Share on other sites

Thanks for this module Martijn!

A couple minor things to mention:

You might want to limit your hook to running only when the template is 'admin'. That way it won't be attempting to insert code in regular page renders (not that it does now, but it looks to be executing on regular page renders even if it doesn't do anything). You could do that by moving your hook-attaching code to a ready() method:

public function ready() {
  if($this->page->template != 'admin') return;
  $this->addHookAfter('Page::render', $this, 'rewriteJsConfig');
  $this->addHookBefore('ProcessPageList::execute', $this, 'appendStylesScripts');
}

The other thing I wanted to mention is that you may not necessarily need to search/replace the rendered output. You can access the values that will be populated to the 'config' JS variable, anytime before render, with:

$all = $config->js(); // returns array of everything for the JS config var
$config->js('key', 'value'); // populate 'value' to variable 'key'
$value = $config->js('key'); // get existing value of 'key'

I'm not positive about what your search/replace was doing, so if I've misunderstood you can ignore this. But just wanted to pass this along in case it is applicable, as it might be more efficient to set/modify the values directly with $config->js before render, rather than search/replace after render. 

Link to comment
Share on other sites

Tnx ryan.

Had a hard fight building this module with scoping as i'm not very comfortable with OOP. 

I needed some functions to be static ( for getModuleConfigInputfields ). It was a bit of trial and error.

All points you mentioned are fixed in the latest update.

What is still unclear to me is why this module still needs a empty init() to function. 

  • Like 1
Link to comment
Share on other sites

Tnx ryan.

Had a hard fight building this module with scoping as i'm not very comfortable with OOP. 

I needed some functions to be static ( for getModuleConfigInputfields ). It was a bit of trial and error.

All points you mentioned are fixed in the latest update.

What is still unclear to me is why this module still needs a empty init() to function. 

From the module interface

/**
     * Method to initialize the module. 
     *
     * While the method is required, if you don't need it, then just leave the implementation blank.
     *
     * This is called after ProcessWire's API is fully ready for use and hooks. It is called at the end of the 
     * bootstrap process. This is before PW has started retrieving or rendering a page. If you need to have the
     * API ready with the $page ready as well, then see the ready() method below this one. 
     *
     */
    public function init();
  • Like 2
Link to comment
Share on other sites

  • 5 months later...

@Martijn, this module is great!

i just tweaked it to work with the new version of Fontawesome; 

i can send you the changes or make some gists?; just some small changes here and there to get it working with the fa- class as well as using the fa class by itself to get the icons to render; also since fa is included in the admin, no @import is necessary...

while this module might seem redundant with the core fontawesome icon capabilities, there are some situations where this module is more flexible, like with having an icon on any page (based on iD) without specifying at the template level...

also, this module is much easier for me to be able to setup a whole lot of icons at once instead of opening all the templates to make changes.. and the custom CSS file in the templates folder makes it really easy to color code or otherwise add specific styling to selected icons;

i guess if people still want this module to support IE7, there should be a different version for this, which doesn't include the fonts, and just gives you the control screen for specifying the page ids, templates and font classes..

  • Like 1
Link to comment
Share on other sites

I felt the same about redundancy for this module after Ryan released Font-Awesome for the core. I didn't event thought someone was using it besides me. I did thought about a process module around Ryans way of using icons. but my available time is limited and this will be the next half year or so. 

 

IE7 support is not needed. People with IE7 can't login in the admin. (I hope/think)

Thank you for making those changes that I should have done a long time ago !

I'll PM you.

Link to comment
Share on other sites

@Martijn, cool, i sent you my version with the changes, maybe you'll see a better way of doing some things than i did!

the only thing that was bugging me about how i did it was that i had to have the 2 classes (both fa and fa-icon-name) in the config fields in the backend; perhaps there is a cleaner way of having the module code include the default class and only have the icon class in the module config screen fields;

Also i put my css in the php/css file and not in the module - i changed the css so that the icons (color, size) match the new 2.4 theme icons.

(to sum up for anyone else wondering why this module is useful in the 2.4 version, it allows you to specify icons for any page using the ID, otherwise all pages using a certain template would have the same icon; also it simplifies specifying icons for a lot of pages and templates at once and then using the css/php file in the templates directory you can change specific icons css.)

  • Like 1
Link to comment
Share on other sites

  • 3 months later...

Hello Martijn,

i did something similar as my first attempt to a pw module. Now i discovered yours.

My module adds icons to the page actions (requires pw-dev labeled 2.4.4) and does not add js. It's a very quick and dirty module which uses the fotn icons of the wire core.

Please check it out on github and let me know if it can be useful to onyone except me.

https://github.com/pine3ree/AdminPageIcons

admin-page-icons.png

kind regards,

PS

the pw project leader and this community are the kindest i ever found in web development.

  • Like 3
Link to comment
Share on other sites

Hi pine3ree,

I had not the time and the computer to check out your module. ( Hardisk crash this week :'( , today I will bring my 'new' iMac to a Apple reseller in the hope it would not take long for them to fix. ) Fontawesome page label is developed a few weeks before Ryan introduced Fontawesome in the core so it's a little bit redundant now. I'm not sure where to go with this module.

I will definitely check out your module as soon i've time. You'll never know where this leads us. Thanks for checking out Font awesome Page label.

Link to comment
Share on other sites

Thank You Martijn....yes i'm working on my 1st site with pw (after so many years with SS) and i noticed Ryan's addition before getting back here.

The only addition left is the icons in the actions replacing the text and the mere possibility of using larger (fa-lg (+ fa-fw)) icons without touching the default admin styles, but let's hope Ryan add this little feature too, so i'll get rid of my 1st module as soon as possible.

Don't bother trying it....what you get is exaclty what you see in the screenshot, and as you can see i didn't even bother to send it to the pw web site module section.

sorry for your HD...if it's a SSD (i guess being a new mac) it would be the first time i heard one crashing ...and that makes me tremble too. If it's not, consider buyingone..it  really changes your life and the time you save from waiting will repay you soon enough.

kind regards to everyone.

Link to comment
Share on other sites

sorry for your HD...if it's a SSD (i guess being a new mac) it would be the first time i heard one crashing ...and that makes me tremble too. If it's not, consider buyingone..it  really changes your life and the time you save from waiting will repay you soon enough

I have a fusion drive in the mac, the rotating one failed. Just bad luck.

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

×
×
  • Create New...