Typoscript: создание меню HMENU с использованием картинок из записи Страницы "resouces" - "media"

Предположим, Вы захотели сделать меню, и для каждого пункта вывести отдельную картинку над пунктом меню. Что бы сделать это можно использовать CSS, определив id для каждого меню и добавить background`ом нужную картинку. Но по моему мнению использовать штатные средства typoscript будет правильнее.
В этом нам поможет закладка "resouces" которую можно найти при редактировании страницы.
Добавьте по одному изображению для каждой страницы, которую Вы будете выводить в меню с пиктограммами.
Теперь напишем наш typoscript вівод нашего меню:

lib.menu = HMENU
lib.menu{
  special = directory
  special.value = 3 
  1 = TMENU
  1{
    expAll = 1
    noBlur = 1
    NO{
      // снимаем штатные ссылки, мы будем определять ссылки в ручную
      doNotLinkIt =1
      // вписываем весь пункт меню в тег
      wrapItemAndSub = <div class="item">|</div>
      // задаем ссылку для всего пункта меню
      allWrap.stdWrap.dataWrap = <a href="{field:alias}/"> |
      // вписываем текст из заголовка в тэг
      stdWrap.wrap = <span>|</span>
      // выводим изображение из записи медиа страницы
      beforeImg{
        import = uploads/media/
        import.field = media
        import.listNum = 0
       
      }
      // завершаем тэг ссылки
      after.wrap = |</a>
    }
    ACT =1
    ACT < .NO
    ACT{
      // добавляем класс активного пункта меню
      wrapItemAndSub  = <div class="item active">|</div>     
    }
  }
}

Ну вот, осталось добавить в вывод lib.menu и меню с пиктограммами готово!