вторник, 13 декабря 2011 г.

Делаем стильное меню с картинками (SlideDownBoxMenu) на TypoScript


Есть такое замечательное и оригинальное двухуровневое меню под названием SlideDownBoxMenu. Данное меню хорошо тем, что каждому пункту меню 1-го уровня сопоставляется тематическая картинка, которая делает меню интуитивно-понятным. Ну, а про прикольную popup-анимацию я уже и не говорю.



Поглядеть и познакомиться со SlideDownBoxMenu поближе можно здесь или на одном из моих заброшенных (по вине очень занятого хозяина) сайтов.

Для того, чтобы такое меню заработало на сайте Typo3 даже написан специальный экст - t3s_slidedownboxmenu. Однако, я не сторонник применять эксты там, где можно обойтись TypoScript-ом. Тем более, что верстка самого меню не так уж и сложна, но и не тривиальна.

Сверстанное меню должно иметь следующий вид:


<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Меню</span>
<span class="sdt_descr">Короткое описание</span>
</span>
</a>
</li>

<li>
<a href="#">
<img src="images/2.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Меню2</span>
<span class="sdt_descr">Короткое описание2</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Подменю1</a>
<a href="#">Подменю2</a>
<a href="#">Подменю3</a>
</div>
</li>

<li>...</li>
</ul>

Тут основная загвоздка в картинке. Но это все ерунда при наличии небольшого количества серого вещества! Привожу хорошо задокументированный рабочий вариант скрипта:


lib.slidemenu = COA
# Создаем контейнер для пунктов меню - UL
lib.slidemenu.wrap = <ul id="sdt_menu" class="sdt_menu"> | </ul>
lib.slidemenu.10 = HMENU
lib.slidemenu.10 {
  noBlur = 1
  # Берем для меню только корневые страницы сайта
  entryLevel = 0
  # Данные страницы из меню исключаем
  excludeUidList = 14,23,25
  1 = TMENU
  1 {
    noBlur = 1
    expAll=1

    NO {
  # Каждый пункт меню это  - LI
 wrapItemAndSub = <li> | </li>
  # Запрещаем Typo3 делать ссылку для данного пункта меню
  # (т.к. верстаем все сами)
  doNotLinkIt = 1
  # Ссылку делаем сами (тут только её начало)
 allWrap.stdWrap.dataWrap = <a href="{field:alias}.html"> |
  # Первой внутри ссылки будет картинка (откуда она берется описывается ниже)
 beforeImg.import = uploads/media/
  beforeImg.import.field = media
  beforeImg.import.listNum = 0
  # Перед именем страницы, согласно верстке, должна быть такая конструкция:
 before.stdWrap.dataWrap = <span class="sdt_active"></span><span class="sdt_wrap"><span class="sdt_link"> |
  # После имени страницы, согласно верстке, должна быть такая конструкция:
 after.stdWrap.dataWrap = | </span><span class="sdt_descr">{field:subtitle}</span></span></a>
    }
 
    # Для текущего пункта меню все делается аналогично. Только добавляется класс - current
    ACT = 1
    ACT {
      wrapItemAndSub = <li class="current active"> | </li>
 allWrap.stdWrap.dataWrap = <a href="{field:alias}.html"> |
 beforeImg.import = uploads/media/
  beforeImg.import.field = media
  beforeImg.import.listNum = 0
 before.stdWrap.dataWrap = <span class="sdt_active"></span><span class="sdt_wrap"><span class="sdt_link"> |
 after.stdWrap.dataWrap = | </span><span class="sdt_descr">{field:subtitle}</span></span></a>
 doNotLinkIt = 1
    }

    CUR = 1
    CUR {
      wrapItemAndSub = <li class="current active"> | </li>
 allWrap.stdWrap.dataWrap = <a href="{field:alias}.html"> |
 beforeImg.import = uploads/media/
  beforeImg.import.field = media
  beforeImg.import.listNum = 0
 before.stdWrap.dataWrap = <span class="sdt_active"></span><span class="sdt_wrap"><span class="sdt_link"> |
 after.stdWrap.dataWrap = | </span><span class="sdt_descr">{field:subtitle}</span></span></a>
 doNotLinkIt = 1
    }
 
  }
  # Верстка пунктов меню второго уровня. Тут все просто и без комментариев.
  2 = TMENU
  2 {
    noBlur = 1
    expAll=1
    wrap = <div class="sdt_box"> | </div>

    NO {
      linkWrap = |
    }

    CUR = 1
    CUR {
      linkWrap = |
 ATagParams = class="current"
    }

  }

}


Теперь о сопоставлении картинок и страниц.

Каждый начинающий тайпер наверняка видел, что страница сайта в админке имеет ряд свойств, которые разделены на закладки. Причем закладка Ресурсы/Resources часто вызывает недоумение - что это за файлы которые можно атачить к странице? Ответ: можно присоединять  любые файлы в том числе и картинки, для решения таких задач как эта (а можно, например, приатаченные картинки использовать и как фон для данной страницы).

Вот так это делается:


Все что мы здесь атачим Typo3 автоматически сохраняет в папке uploads/media/. Нумерация файлов в списке начинается с нуля. Имя поля которое содержит список имеет имя - media.
Думаю, что теперь ясны 3 магические строки скрипта:
beforeImg.import = uploads/media/
beforeImg.import.field = media
beforeImg.import.listNum = 0


Для лучшего понимания работы скрипта советую почитать мануал.

P.S. Я абсолютно не претендую на оптимальность кода и с радостью погляжу на более совершенный скрипт.

вторник, 6 декабря 2011 г.

Не работает register:newsCategoryUid


Нужно было мне получить название категории новостей по её id, а точнее по значению регистра - register:newsCategoryUid (для бредкрамба на странице единичной новости).

Делал примерно так:

20 = RECORDS
20 {
source = {register:newsCategoryUid}
source.insertData = 1
tables = tt_news_cat
conf.tt_news_cat = TEXT
conf.tt_news_cat.field = title
wrap = <li> | </li>
}

И не работает, хоть убей! После нескольких часов мук, решение все же было найдено.
В шаблон единичной новости добавил следующий HTML-код:
<div style="display:none;">###NEWS_CATEGORY###</div>

После этого, регистр сразу же начал заполняться значением, а мой запрос начал нормально отрабатывать.

Поясню, style="display:none;" написал лишь для того, чтобы на детальной странице новостей категория была скрыта, здесь она мне не нужна.

Возможно, для кого-то это и само-собой понятно, но лично я был уверен, что этот регистр tt_news заполняется всегда и при любых условиях.

О себе

Моя фотография
Вадим Гиркало
Фрилансер, веб-разработчик сайтов на базе бесплатной, мощнейшей и очень гибкой CMS системы - TYPO3.
Просмотреть профиль

Позвонить мне в Skype

TOP - 3