Иконки (изображения) вместо текста в меню на сайте (Wayfinder)
Недавно я столкнулся с проблемой - мне захотелось реализовать меню в MODx, но так, чтобы можно было использовать для отображения иконкиб картинки, а не текст. Выяснилось следующее - интеграция меню происходит посредством нескольких действий:
Вариант 1 (немного космический) -
Вызов сниппета в шаблоне страницы, выглядит это примерно так:
[!Wayfinder? &startId=`0` &rowTpl=`mam.RowTpl`!]Мне было достаточно только одного шаблона для вывода изображений в меню. &rowTpl (mam.rowTpl) - шаблон пунктов меню у меня получился такой:
<div class="img">
<a href="[+wf.link+]">
<img src="assets/images/menu/menu[+wf.menuindex+].png" alt="[+wf.linktext+]" title="[+wf.linktext+]" height="24" />
</a>
</div>
Мы создаем папку с нашими иконками. у меня это папка menu. Все иконки для Главной, Портфолио, Контактов называются menu1.png, menu2.png, menu3.png. 1, 2, 3 - это, как я понял, положение в меню.
- Скачиваем и заменяем свой wayfinder.inc.php на мой wayfinder.inc.php
- После настройки чанков, файла wayfinder.inc.php , создания иконок и загрузки их в отдельную папку на сервер, мы можем приступать непосредственно к созданию страничек (или если вы их уже создали то в шаблоне страницы, в меню, можете указать вызов самого сниппета) и кличите Wayfinder!
Вариант 2 (более приземленный и он проще) -
Создаем чанк ulTpl (его будем вызывать так: &outerTlp=`ulTpl`) (он родитель, отвечает за формирования самого контейнера меню)
В него можно поместить любую конструкцию, начиная от стандартной:
<ul>
[+wf.wrapper+]
</ul>
заканчивая сложной (ну не совсем уж она и сложная
)
<div class="menu" id="menu">
[+wf.wrapper+]</div>
wf.wrapper - отвечает как раз за вывод элементов списка и благодаря ему будет выводиться следующий чанк liTpl (&rowTpl=`liTpl`)
Чтобы вывести в нем картинку, создаем TV-параметр img-menu с типом ввода Image. Присваеваем TV-параметру шаблон, и на нужной нам страничке мы прикрепляем картинку, которая будет выводится в меню. В чанке же мы прописываем
<li[+wf.classes+]>
<a href="[+wf.linktext+]">[+wf.link+]</a><br/>
<img src="[+img-menu+]" />
</li>
Итоговый выход Wayfinder'a будет такой:
[!Wayfinder? &startId=`0` &rowTpl=`liTpl` &outerTlp=`ulTpl` !]
Вот и всё. Спасибо, что дочитали
Хм..прикольный урок. Но я столкнулся с более серьезной проблемой. Мне нужно почти весь список меню вывести текстом, а три последних пункта-иконками.(ну как обычно-карта сайта, домик и контакты)Вы случайно не посоветуете как это осуществить?
Использовать можно 2 вызова Wayfinder и параметр &excludeDocsЭтому параметру прописываете id документов, исключаемых в меню.
Также следует выводить разные шаблоны &rowTpl и &outerTpl
Это все конечно если дерево сайтов должно выглядеть так
Первое -
Второе-
Третье-
Иконка -
Иконка-
Подскажите, пожалуйста (схожая задача!), если меню выглядит так: - Первое
-Иконка
-Иконка
-Второе
-Иконка
-Третье..
То есть вперемежку - как лучше поступить?
Вам надо использовать параметр &innerRowTpl и ему уже привязывать шаблон для текущего ПОДменюу Вас он будет например
&innerRowTpl=`yours_tpl`
в этом шаблоне вы создаете TV параметр.
&innerRowTpl:
Значение по умолчанию: false
Возможные плэйсхолдеры:
- место для указания используемого CSS-класса (включает class=" ")
- содержит только название CSS-класса (не включает class=" ")
- адрес (href) для ссылки
- текст для title ссылки
- текст названия ссылки
- место для вывода подменю
- вывод уникального идентификатора (id)
- вывод дополнительных атрибутов ссылки
- идентификатор документа для текущего элемента
-количество элементов в папке
- выводит значения поля описания.
- выводит значения поля интротекста
Вопрос может быть странный,нужно создать простое меню Главная
О компании
Стоимость услуг
перед каждым пунктом должна быть иконка. Что у нас должно быть в ТV параметре вот этот вот код или я что-то не понимаю
<li><a href=""></a><br/><img src="" /></li>
Заранее благодарен за любую помощь.
Нужно использовать параметр при вызове сниппета &rowTpl<li>
<a href=""><img src="" /></a><br/>
</li>
- и есть tv параметр тип ввода image, который присвоен нужному нам шаблону. Дальше дело css.
Делайте как по уроку и посмотрите документацию.
1. Создал чанк. конструкция <ul></ul>2. ТV параметр код прописываю в поле возможные значения или в поле значения по умолчанию. Код прописываю такой <li><a href=""><img src="" /></a><br/></li>
<a href="" что я прописываю
<img src="/assets/templates/syko/images/bullet.gif" />- прописан путь до картинки это правильно или тут что-то другое. В доступе шаблонов выбираю свой шаблон? Заранее благодарен за любую помощь.
Можешь еще раз на почту ответить а то вопросы остались. Заранее благодарен.
