Jump to content

Dynamic template icon based on field value


Recommended Posts


On a project I'm working on I have a select options field that you can select what type of content you're posting.

It has the following options:

2=Q and A
3=Visual snippet

The assigned template has an icon (file-text-o), which is great for articles but maybe not so for galleries.

Is it at all feasible/possible to change the assigned icon based on a field value within a page? Or even append a page title in the tree with an icon based on a field value?

Link to comment
Share on other sites

One way can be to not set an default icon to the template(s) but set it manually like here with other things: https://processwire.com/talk/topic/5609-display-a-template-icon-base-on-date-field/

I use this in a project where I need to show the workflow states and the current authors shortcut. There are used 3 different icons and 3 different colors.


    public function addHookAfter_ProcessPageListRender_getPageLabel($event) {

        $page = $event->arguments('page');

        if ('aki-faq' == $page->template) {
            $iconTpl = $iconTpl1 = '<i class="icon fa fa-fw fa-file-text [_STATUS_]"> </i>';
            $iconTpl2 = '<i class="icon fa fa-fw fa-check-circle-o [_STATUS_]"> </i>';
            $iconTpl3 = '<i class="icon fa fa-fw fa-newspaper-o [_STATUS_]"> </i>';
            if ($page->editStatus > 2) $iconTpl = $iconTpl2;
            if ($page->editStatus > 5) $iconTpl = $iconTpl3;
            $icon = str_replace('[_STATUS_]', 'editStatus' . $page->editStatus, $iconTpl);

            $kuerzel = str_pad($page->aki_bearbeiter->kuerzel, 3, ' ', STR_PAD_RIGHT);
            $bearbeiter = (0 == $page->aki_bearbeiter->id || false === $page->aki_bearbeiter) ? ' <span class="akiPageListItem kuerzel warning">---</span> ' : ' <span class="akiPageListItem kuerzel">' . $kuerzel . '</span> ';

            $event->return = $icon . $bearbeiter . $event->return;
Edited by horst
  • Like 7
Link to comment
Share on other sites

Thank you horst, this is exactly what I was looking for.

For those interested, this is my working module below, which adds in icons based on an select options field.

class DynamicIcons extends WireData implements Module {

public static function getModuleInfo() {
return array(

'title' => 'Dynamic icons for the page tree based on field values',
'version' => 1,
'summary' => 'Module to change the icon on the page tree depending on field values.',
'singular' => true,
'autoload' => true,

public function init() {
        $this->addHookAfter('ProcessPageListRender::getPageLabel', $this, 'addPageListLabelItems');

    public function addPageListLabelItems($event) {
        $page = $event->arguments('page');


// Check options field for correct value
if($page->content_type == '1') {

// Add fontawesomeicon
$styleItem = "<i class=\"fa fa-file-text-o\"></i>";

// Add to pagetree
$event->return = $styleItem . $event->return;

(This just shows one options but obviously you could add in additional icons for different field values)

  • Like 9
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

  • Create New...