Уроки MODx Revolution
Скачать материалы к учебному курсу - папка distr_MODx.zip
Урок 7. TV параметры MODx. Добавление изображений ресурсам
В этом уроке мы рассмотрим один из самых интересных моментов в MODx – переменные шаблона или, как их чаще всего называют, TV параметры (не путать с телевизорами, название пошло от сокращения «template variables»).
Вы уже заметили, насколько гибко можно управлять содержимым на странице и выводом самих шаблонов, так вот – это еще не все. Для каждого шаблона вы можете также добавить дополнительные поля, которые впоследствии можно выводить на странице с помощью специальных плейсхолдеров.
Использовать TV параметры будем при добавлении изображений новостей и выводе этих изображений на главной странице с кратким описанием новости.
Создаем TV параметр
1. Перейдите на вкладку Элементы и нажмите на ссылку Новый Дополнительное поле (TV).
Рисунок 7.1
2. На странице создания TV параметров заполните поля формы:
Название: img-news
Внимание: имя параметра не может содержать пробел.
Подпись: Изображение для страницы.
Описание: сопроводительный текст, который даст пользователю представление о том, где будет использоваться дополнительное поле. Описание будет отображаться на странице редактирования ресурса под заголовком TV параметра. В нашем случае: Изображение для ресурса. Для новости должно быть 60px на 60px.
Рисунок 7.2
3. Перейдите на вкладку Параметры ввода в поле Тип ввода (с помощью этого поля вы можете выбрать, какого типа будет дополнительное поле для вашего шаблона). Установите Изображение.
Рисунок 7.3
4. Перейдите на вкладку Доступно для шаблонов, здесь можно указать шаблоны, для которых необходимо создать TV-параметр. Мы помним, что для ресурсов с нашими новостями установлен шаблон 2 колонки, поэтому установите галочку рядом с ним, чтобы шаблон мог использовать созданный TV параметр.
Рисунок 7.4
5. После заполнения полей сохраните TV параметр нажатием кнопки Сохранить.
6. Ну вот и все, мы только что создали TV параметр и подключили его к шаблону 2 колонки. Отправляемся на страницу редактирования новости и смотрим, что же у нас изменилось.
Перейдите в ресурс первой новости. На вкладке Дополнительные поля (TV) появилось поле для загрузки изображения. Тут-то мы и видим заголовок и описание, которое вводили при создании TV параметра.
Рисунок 7.5
Добавляем изображения для ресурсов
7. Нажмите кнопку 
, открывается диспетчер файлов, позволяющий выбрать необходимое изображение из папки сайта или, если его еще нет, загрузить изображение в эту папку, чтобы затем выбрать.
На рисунке ниже показан внешний вид этого файлового менеджера.
Рисунок 7.6
8. Создайте папку news в каталоге assets и в нее поместите несколько изображений размером 60x60px, которые в дальнейшем будем выводить на главной странице. Щелкните правой кнопкой мыши по названию папки assets, т.к. внутри нее создаем новую папку.
Рисунок 7.7
9. Перейдите в папку news и нажмите кнопку Загрузить файлы.
Рисунок 7.8
10. Выберите все 5 изображений из папки news из файлов к уроку, которые Вы скачали в самом начале – это папка distr_MODx и нажмите Загрузить.
Рисунок 7.9
11. Файлы должны появиться в окне диспетчера файлов.
Рисунок 7.10
12. Добавьте для каждой новости по одному изображению. После добавления изображения не забывайте сохранять ресурс.
Рисунок 7.11
Вывод новостей с изображениями на главной странице
Теперь, когда изображения к новостям прикреплены, давайте попробуем вывести блоки с кратким описанием новостей и изображениями на главной странице.
Вот как выглядит блок с новостями на главной странице:
Рисунок 7.12
HTML код, отвечающий за вывод этого блока находится в чанке MAIN-CONTENT
Рисунок 7.13
Проанализировав html-разметку в чанке, мы видим, что блок новостей на главной странице оформлен в виде списка ul, и каждая новость представляет собой пункт списка li, при этом последняя новость отмечена CSS-классом last.
Для вывода новостей на главной странице будем использовать сниппет pdoResources, который входит в состав пакета pdoTools.
Создаем шаблоны pdoResources для вывода новостей
Код вывода одной новости имеет следующий вид:
<li>
<h2><img src="/assets/
<p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque congue magnis vestibulum quismodo nulla et feugiat. Adipisciniapellentum leo ut consequam ris felit elit id nibh sociis malesuada.</p>
<p class="readmore"><a href="#">Continue Reading »</a></p>
</li>
Здесь идет вывод изображения, заголовка новости, краткого описания и ссылки на полный текст новости. Берем этот код за основу нашего шаблона pdoResources и начинаем заменять статические данные на специальные теги.
Заголовок новости: [[+pagetitle]]
Краткое описание новости: [[+introtext]]
URL страницы с полным текстом новости: [[~[[+id]]]]
Изображение новости: [[+tv.img-news]]
Обратите внимание, что для вывода изображения мы используем название созданного нами TV параметра.
12. В категории Новости создайте новый чанк news-main с кодом:
<li>
<h2><img src="[[+tv.img-news]]"> [[+pagetitle]]</h2>
<p>[[+introtext]]</p>
<p class="readmore"><a href="[[~[[+id]]]]" title="[[+pagetitle]]">Читать дальше »</a></p>
</li>
Этот чанк мы будем использовать в качестве шаблона pdoResources для всех новостей на главной странице.
13. Затем создайте чанк news-main-last, который будет использоваться в качестве шаблона для последней новости, и помещаем в него:
<li class="last">
<h2><img src="[[+tv.img-news]]"> [[+pagetitle]]</h2>
<p>[[+introtext]]</p>
<p class="readmore"><a href="[[~[[+id]]]]" title="[[+pagetitle]]">Читать дальше »</a></p>
</li>
Шаблон для последней новости отличается от шаблона для остальных новостей только наличием у селектора li CSS-класса last.
14. После этого необходимо на главную страницу поместить вызов pdoResources, для этого отправляемся редактировать созданный ранее чанк MAIN-CONTENT и вместо списка ul поместите конструкцию вызова pdoResources, чтобы у Вас в чанке MAIN-CONTENT оказалось следующее содержимое (не забывайте про ID-ресурса):
<div class="wrapper col3">
<div id="container">
<div class="homepage">
<ul>
[[pdoResources? &parents=`5` &limit=`3` &tpl=`news-main` &tplLast=`news-main-last` &includeTVs=`img-news` &prepareTVs=`1`]]
</ul>
<br class="clear" />
</div>
</div>
</div>
В этой конструкции вызова сниппета мы используем следующие свойства:
&parents – указываем ID папки, с которой берутся новости, в нашем случае ID=5, у вас может быть другое число, которое вы можете увидеть в дереве документов MODx.
&limit – число отображаемых документов. В нашем случае на главной странице предусмотрен вывод трех новостей.
&tpl – указываем название чанка, который будет использоваться в качестве шаблона вывода новости. В нашем случае это шаблон news-main.
&tplLast – указываем название чанка, который будет использоваться в качестве шаблона вывода последней новости на странице. В нашем случае это шаблон news-main-last.
&includeTVs – список ТВ параметров для выборки, через запятую.
&prepareTVs=`1` – список ТВ параметров, которые нужно подготовить перед выводом. «1», что означает подготовку всех ТВ, указанных в &includeTVs
Более полный список параметров для сниппета pdoResources можно посмотреть в документации по адресу https://docs.modx.pro/
Если вы все сделали правильно, то внешний вид новостного блока на главной странице примет следующий вид:
Рисунок 7.14
Обратите внимание, что когда Вы используете созданный TV параметр в шаблоне pdoResources, то вызов осуществляется с помощью конструкции вида: [[+tv.name]], если же вы захотите вывести содержимое дополнительного поля непосредственно на странице ресурса, то конструкция вывода TV параметра будет иметь вид: [[*name]]. Это касается и всех стандартных полей, таких как [[*pagetitle]], [[*longtitle]], [[*introtext]] и других полей.
На этом урок можно заканчивать, но вы имейте ввиду, что мы привели лишь один пример использования TV параметров. Спектр их применения гораздо шире.
Рассмотрев возможные значения типов параметра, Вы, безусловно, поймете, какую функциональность несет в себе это расширение MODx. Помимо добавления изображений Вы можете прикреплять к ресурсам: текстовые поля, поля для ввода даты, поля для прикрепления файла, поле для URL, для e-mail, чекбоксы, радиокнопки, выпадающие списки, текстовые поля textarea и даже дополнительные поля с визуальным редактором.
Рисунок 7.15
Одним словом, инструмент очень мощный и Вы можете поэкспериментировать с различными TV параметрами MODx самостоятельно.
Вывод слайд-шоу на главной странице с помощью сниппета pdoResources
Настроим jQuery слайд-шоу на главной странице
Наша задача сделать так, чтобы можно было редактировать предоставленную в виде слайд-шоу информацию, не затрагивая html-разметку.
Первым делом давайте посмотрим на html-разметку, которая отвечает за вывод нашего слайд-шоу. У нас этот код вынесен в отдельный чанк GALLERY.
<div class="wrapper col2">
<div id="featured_slide">
<div id="featured_content">
<ul>
<li><img src="/assets/
<div class="floater">
<h2>About This Template !</h2>
<p>This is a W3C standards compliant Open Source free CSS template from os-templates.com OS This template is distributed under a Creative Commons Attribution-Share Alike 3.0 Unported License, which allows you to use and modify the template for both personal and commercial use when you keep the provided credit links in the footer.</p>
<p class="readmore"><a href="#">Continue Reading »</a></p>
</div>
</li>
<li><img src="/assets/
<div class="floater">
<h2>Cursus penati saccum ut curabitur nulla.</h2>
<p>Temperinte interdum sempus odio urna eget curabitur semper convallis nunc laoreet. Nullain convallis ris elis vest liberos nis diculis feugiat in rutrum. Suspendreristibulumfaucibulum lobortor quis tortortor ris sapien sce enim et volutpat sus. Urnaretiumorci orci fauctor leo justo nulla cras ridiculum…</p>
<p class="readmore"><a href="#">Continue Reading »</a></p>
</div>
</li>
<li><img src="/assets/
<div class="floater">
<h2>Cursus penati saccum ut curabitur nulla.</h2>
<p>Temperinte interdum sempus odio urna eget curabitur semper convallis nunc laoreet. Nullain convallis ris elis vest liberos nis diculis feugiat in rutrum. Suspendreristibulumfaucibulum lobortor quis tortortor ris sapien sce enim et volutpat sus. Urnaretiumorci orci fauctor leo justo nulla cras ridiculum…</p>
<p class="readmore"><a href="#">Continue Reading »</a></p>
</div>
</li>
</ul>
</div>
<a href=javascript:void(0); id="featured-item-prev"><img src="/assets/plusbusiness/
<a href=javascript:void(0); id="featured-item-next"><img src="/assets/business/
</div>
</div>
Если проанализировать этот html-код, Вы увидите, что каждый слайд, который состоит из изображения, текста описания и ссылки на подробное прочтение представлен в виде пункта li, маркированного списка ul.
Для вывода галереи мы воспользуемся уже знакомыми вам TV параметрами и сниппетом pdoResources. Изображения прикреплять к ресурсам будем с помощью TV параметра, а выводить галерею на главной странице с помощью сниппета pdoResources.
Давайте определимся с изображениями для нашего слайд-шоу. На данный момент у нас есть следующие страницы с услугами
- Создание сайтов
- Продвижение сайтов
- Разработка ПО
- Поддержка
Прикреплять изображения к страницам будем с помощью TV параметра с типом ввода image. Можно создать для этого новый TV параметр, но так как с этим типом TV параметр уже создан в уроке по выводу ленты новостей на главной странице, то мы будем использовать его, предварительно немного изменив.
15. Откройте созданный ранее TV параметр: Элементы – Дополнительные поля (TV) – img-news.
16. В поле Описание впишите текст следующего содержания:
Изображение для ресурса. Размер для новостей – 60px на 60px, для страниц с услугами – 380px на 250px.
После этого при редактировании любого ресурса с шаблоном 2 колонки дополнительное поле для вставки изображения будет выглядеть вот так:
Рисунок 7.16
Описание для дополнительного поля даст понять человеку, который будет редактировать сайт, какого размера изображение должно быть в том или ином случае.
17. Прикрепите изображения для страниц с услугами Создание сайтов, Продвижение сайтов, Разработка ПО, Поддержка в соответствии с названиями изображений (изображения расположены в папке images-slide в файлах папки distr_MODx), во время загрузки изображения создайте в файловом менеджере отдельную папку images-slide.
Рисунок 7.17
Рисунок 7.18
После того, как вы выберите и прикрепите необходимые изображения, создадим шаблон pdoResources для вывода слайд-шоу.
В чанке GALLERY есть повторяющийся блок, который отвечает за вывод одного слайда. На его основе будем реализовывать шаблон.
<li><img src="/assets/
<div class="floater">
<h2>About This Template !</h2>
<p>This is a W3C standards compliant Open Source free CSS template from OS Templates. This template is distributed under a Creative Commons Attribution-Share Alike 3.0 Unported License, which allows you to use and modify the template for both personal and commercial use when you keep the provided credit links in the footer.</p>
<p class="readmore"><a href="[[~ ~]]">Continue Reading »</a></p>
</div>
</li>
18. Ниже приведен код, в котором статическая информация заменена на специальные теги MODx, чтобы из статической разметки получить шаблон для pdoResources:
<li><img src="[[+tv.img-news]]">
<div class="floater">
<h2>[[+longtitle]]</h2>
<p>[[+introtext]]</p>
<p class="readmore"><a href="[[~[[+id]]]]" title="Читать подробнее об этой услуге">Подробнее »</a></p>
</div>
</li>
При этом:
[[+tv.img-news]] – вывод прикрепленного изображения;
[[+longtitle]] – вывод заголовка слайда, в качестве которого использовано поле «Расширенный заголовок»;
[[+introtext]] – вывод текста слайда, в качестве которого использовано поле «Аннотация».
[[~[[+id]]]] – конструкция, отвечающая за вывод URL ресурса.
Полученную конструкцию поместите в новый чанк с именем slide-tpl
Рисунок 7.19
19. Убедитесь, что все поля, которые будут использоваться для вывода слайд-шоу, заполнены на соответствующих страницах. Не должны быть пустыми поля Расширенный заголовок и Аннотация.
Рисунок 7.20
20. После того, как Вы проверите заполнены ли поля, отредактируйте чанк GALLERY, в который надо добавить вызов сниппета для динамического вывода слайд-шоу.
Вызов сниппета у вас должен быть следующим (не забывайте, что ID у Вас может быть другой):
[[pdoResources? &parents=`3` &tpl=`slide-tpl` &includeTVs=`img-news` &prepareTVs=`1` &sortdir=`ASC` &depth=`0`]]
где,
&parents=`3` – указывается ID папки, в которой сниппет будет искать ресурсы для вывода;
&tpl=`slide-tpl` – в качестве шаблона вывода слайда используется чанк slide-tpl;
&sortdir=`ASC` – указывается направление сортировки по возрастанию, для того, чтобы слайды шли в той последовательности в которой были созданы в дереве документов.
&depth=`0` – Глубина поиска дочерних ресурсов от родителя. 0 означает первый уровень (отсчет начинается с нуля).
В итоге в чанке GALLERY у вас должна остаться следующая конструкция:
<div class="wrapper col2">
<div id="featured_slide">
<div id="featured_content">
<ul>
[[pdoResources? &parents=`3` &tpl=`slide-tpl` &includeTVs=`img-news` &prepareTVs=`1` &sortdir=`ASC` &depth=`0`]]
</ul>
</div>
<a href="javascript:void(0);" id="featured-item-prev"><img src="/assets/
</div>
21. Теперь можно посмотреть на результат работы сниппета. Переходим на главную страницу сайта, и видим на ней симпатичное слайд-шоу, которое дает посетителю вводную информацию о предоставляемых услугах.
Рисунок 7.21