New icons for my pages

Easy way to customize your pages with own icons

Here i want to show you an easy way to add own icons to your pages and how to use them in a menu.

First i took 5 icons from famfamfam and put them to fileadmin/pageicons

then i added the following snippet to my typo3conf/extTables.php:

$TCA['pages']['columns']['module']['config']['items'][] = array('Pagetype 1', 'pagetype1', '../fileadmin/pageicons/asterisk_orange.png');
$TCA['pages']['columns']['module']['config']['items'][] = array('Pagetype 2', 'pagetype2', '../fileadmin/pageicons/award_star_bronze_1.png');
$TCA['pages']['columns']['module']['config']['items'][] = array('Pagetype 3', 'pagetype3', '../fileadmin/pageicons/award_star_silver_3.png');
$TCA['pages']['columns']['module']['config']['items'][] = array('Pagetype 4', 'pagetype4', '../fileadmin/pageicons/award_star_silver_2.png');
$TCA['pages']['columns']['module']['config']['items'][] = array('Pagetype 5', 'pagetype5', '../fileadmin/pageicons/award_star_gold_1.png');

$ICON_TYPES['pagetype1']['icon'] = '../fileadmin/pageicons/asterisk_orange.png';
$ICON_TYPES['pagetype2']['icon'] = '../fileadmin/pageicons/award_star_bronze_1.png';
$ICON_TYPES['pagetype3']['icon'] = '../fileadmin/pageicons/award_star_silver_3.png';
$ICON_TYPES['pagetype4']['icon'] = '../fileadmin/pageicons/award_star_silver_2.png';
$ICON_TYPES['pagetype5']['icon'] = '../fileadmin/pageicons/award_star_gold_1.png';

Now i see them if i edit any page properties, in options tab with "contains plugin". Easy to choose one of them. As soon you save it, you see this icon for your page in pagetree - perfect.

You can use such icons to show editors a special page for special content, or just to make your BE more colorful :)

Now lets use these settings in a normal HMENU. The field where the setting is saved is called "module", so we use a CASE object for wrapItemAndSub to use this for CSS-class. Here is the snippet:

lib.my_menu = HMENU
lib.my_menu {
  entryLevel = 0
  wrap = <ul>|</ul>
  1 = TMENU
  1.NO {
    wrapItemAndSub.cObject = CASE
    wrapItemAndSub.cObject {
      key.field = module    
      default = TEXT
      default.value = <li>|</li>
      
      pagetype1 = TEXT
      pagetype1.value = <li class="pagetype1">|</li>
      
      pagetype2 = TEXT
      pagetype2.value = <li class="pagetype2">|</li>
      
      pagetype3 = TEXT
      pagetype3.value = <li class="pagetype3">|</li>
      
      pagetype4 = TEXT
      pagetype4.value = <li class="pagetype4">|</li>
      
      pagetype5 = TEXT
      pagetype5.value = <li class="pagetype5">|</li>
    }
  }
}

And we're done. Have fun!