Инструкция по созданию сайта на MODx. Урок 14 — TV параметры MODx. Добавление изображений ресурсам

В сегодняшнем уроке мы рассмотрим один из самых интересных моментов в MODx — переменные шаблона или, как их чаще всего называют, TV параметры (не путать с телевизорами, название пошло от сокращения «template variables»).

Вы уже заметили, насколько гибко можно управлять содержимым на странице и выводом самих шаблонов, так вот — это еще не все. Для каждого шаблона вы можете также добавить дополнительные поля, которые впоследствии можно выводить на странице с помощью специальных плейсхолдеров. Это даст вам небывалую гибкость в разработке. Итак, не будем долго останавливаться на теории и переходим непосредственно к реализации данной фишки на создаваемом нами сайте.

Использовать TV параметры будем при добавлении изображений новостей и выводе этих изображений на главной странице с кратким описанием новости.

Создаем TV параметр

Следуем на вкладку Элементы → Управление элементами → TV параметры. Нажимаем на ссылку «Новый параметр (TV)».

На странице создания TV параметров заполняем поля формы:

Имя параметра: вводим название параметра, по которому мы будем вызывать его в шаблоне. Желательно давать осмысленные названия, чтобы было легче сориентироваться при редактировании шаблонов. Для нашего случая я ввел: img-news.

Внимание: имя параметра не может содержать пробел.

Заголовок: вводим заголовок, которым будет подписано дополнительное поле при редактировании ресурса. В нашем случае: «Изображение для страницы»

Описание: сопроводительный текст, который даст пользователю представление о том, где будет использоваться дополнительное поле. Описание будет отображаться на странице редактирования ресурса под заголовком TV параметра. В нашем случае я ввел: «Изображение для ресурса. Для новости должно быть 60px на 60px».

Тип параметра: с помощью этого поля вы можете выбрать, какого типа будет дополнительное поле для вашего шаблона. Устанавливаем в «image».

Визуальный компонент: выбираем из выпадающего списка «image».

На изображении ниже вы можете увидеть, как я заполнил поля при создании TV-параметра:

Заполнение полей при создании TV-параметра

В блоке «Доступ шаблонов» указываем шаблон, для которого необходимо создать TV-параметр. Мы помним, что для ресурсов с нашими новостями установлен шаблон «2 колонки», поэтому ставим галочку рядом с ним, чтобы шаблон мог использовать созданный TV параметр.

Доступ шаблонов

После заполнения полей сохраняем TV параметр нажатием кнопки «Сохранить».

Ну вот и все, мы только что создали TV параметр и подключили его к шаблону «2 колонки». Отправляемся на страницу редактирования новости и смотрим, что же у нас изменилось. Если вы внимательно посмотрите, то на странице редактирования ресурса появилось еще одно поле, расположенное ниже визуального редактора. Тут-то мы и видим заголовок и описание, которое вводили при создании TV параметра.

Дополнительное поле

Добавляем изображения для ресурсов

При нажатии кнопки «Вставить», которая находится рядом с дополнительным полем, открывается файловый менеджер, позволяющий выбрать необходимое изображение из папки assets/images/ или, если его еще нет, загрузить изображение в эту папку, чтобы затем выбрать.

На рисунке ниже показан внешний вид кнопок этого файлового менеджера.

Кнопоки файлового менеджера

С помощью кнопки «Выберите файл» вы можете выбрать на компьютере изображение, которое с помощью нажатия на кнопку «Upload» загрузится к вам на сервер. Кнопка «Create New Folder» служит для создания дополнительных папок в папке «image».

Давайте создадим папку «news» и в нее поместим несколько изображений размером 60x60px, которые в дальнейшем будем выводить на главной странице.

Для примера я подготовил 5 изображений, которые вы можете скачать и использовать для дальнейшего прохождения урока, либо вы можете создать свои, которые подходят к вашим новостям. Добавляем для каждой новости по одному изображению.

Добавление изображений

Чтобы наглядно видеть, какое изображение добавлено к ресурсу, вы можете включить плагин «Show Image TVs», который входит в дистрибутиве MODx, но по умолчанию отключен. Для этого отправляемся на вкладку: Элементы → Управление элементами → Плагины. Нажимаем на ссылку «Show Image TVs» и на появившейся странице убираем галочку «Плагин отключен».

Включение плагина Show Image TVs

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

Внешний вид TV поля при включенном плагине Show Image TVs

Вывод новостей с изображениями на главной странице

Теперь, когда изображения к новостям прикреплены, давайте попробуем вывести блоки с кратким описанием новостей и изображениями на главной странице.

Вот как выглядит блок с новостями на главной странице:

Блок с новостями на главной странице

HTML код, отвечающий за вывод этого блока следующий:

<div class="wrapper col3">
  <div id="container">
    <div class="homepage">
      <ul>
        <li>
          <h2><img src="assets/templates/site/images/demo/60x60.gif" alt="" />Nullamlacus dui ipsum conseque loborttis</h2>
          <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 &raquo;</a></p>
        </li>
        <li>
          <h2><img src="assets/templates/site/images/demo/60x60.gif" alt="" />Nullamlacus dui ipsum conseque loborttis</h2>
          <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 &raquo;</a></p>
        </li>
        <li class="last">
          <h2><img src="assets/templates/site/images/demo/60x60.gif" alt="" />Nullamlacus dui ipsum conseque loborttis</h2>
          <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 &raquo;</a></p>
        </li>
      </ul>
      <br class="clear" />
    </div>
  </div>
</div>

Находится этот код в чанке MAIN-CONTENT.

Проанализировав предоставленнyю выше HTML разметку, мы видим, что блок новостей и на главной оформлен в виде списка ul, и каждая новость представляет собой пункт списка li, при этом последняя новость отмечена CSS-классом last.

Для вывода новостей на главной странице опять будем использовать сниппет Ditto.

Мы уже с вами использовали вывод новостей с помощью Ditto, поэтому дальнейшие действия покажутся вам знакомыми. Заострю лишь внимание на тех моментах, которые не оговаривались в уроке по созданию ленты новостей.

Первым делом создаем чанк newsline-main, в котором у нас будет храниться конструкция вызова сниппета на главной странице. В этот чанк помещаем следующую конструкцию:

[[Ditto? &parents=`5` &tpl=`news-main` &display=`3` &tplLast=`news-main-last`]]

В этой конструкции вызова сниппета мы используем следующие свойства:

  • &parents — указываем ID папки, с которой берутся новости, в моем случае ID=5, у вас может быть другое число, которое вы можете увидеть в дереве документов MODx.
  • &tpl — указываем название чанка, который будет использоваться в качестве шаблона вывода новости.
  • &tplLast — указываем название чанка, который будет использоваться в качестве шаблона вывода последней новости на странице.
  • &display — число отображаемых документов. В нашем случае на главной странице предусмотрен вывод трех новостей.

Создаем шаблоны Ditto для вывода новостей

Код вывода одной новости имеет следующий вид:

<li>
          <h2><img src="assets/templates/site/images/demo/60x60.gif" alt="" />Nullamlacus dui ipsum conseque loborttis</h2>
          <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 &raquo;</a></p>
 </li>

Здесь идет вывод изображения, заголовка новости, краткого описания и ссылки на полный текст новости. Берем этот код за основу нашего шаблона Ditto и начинаем заменять статические данные на специальные теги.

  • Заголовок новости: [+pagetitle+]
  • Краткое описание новости: [+introtext+]
  • URL страницы с полным текстом новости: [~[+id+]~]
  • Изображение новости: [+img-news+]

Обратите внимание, что для вывода изображения мы используем название созданного нами TV параметра.

После замены статических данных специальными тегами у нас получится следующий код, который мы помещаем в чанк news-main:

<li>
<h2> [+img-news+] [+pagetitle+]</h2>
<p> [+introtext+]</p>
<p class="readmore"><a href=" [~[+id+]~] " title="[+pagetitle+]">Читать дальше »</a></p>
</li>

Этот чанк мы будем использовать в качестве шаблона Ditto для всех новостей на главной странице.

Затем создаем чанк news-main-last, который будет использоваться в качестве шаблона для последней новости, и помещаем в него:

<li class="last">
<h2> [+img-news+] [+pagetitle+]</h2>
<p> [+introtext+]</p>
<p class="readmore"><a href=" [~[+id+]~] " title="[+pagetitle+]">Читать дальше »</a></p>
</li>

Шаблон для последней новости отличается от шаблона для остальных новостей только наличием у селектора li CSS-класса last.

После этого необходимо на главную страницу поместить вызов чанка newsline-main, для этого отправляемся редактировать созданный ранее чанк MAIN-CONTENT и вместо списка ul помещаем конструкцию вызова чанка, чтобы у вас в чанке MAIN-CONTENT оказалось следующее содержимое:

<div class="wrapper col3">
<div id="container">
<div class="homepage">
<ul>
{{newsline-main}}
</ul>
<br class="clear" />
</div>
</div>
</div>

Если вы все сделали правильно, то внешний вид новостного блока на главной странице примет следующий вид:

Итоговый вид новостей на главной странице

Обратите внимание, что когда вы используете созданный TV параметр в шаблоне Ditto, то вызов осуществляется с помощью конструкции вида: [+name+], если же вы захотите вывести содержимое дополнительного поля непосредственно на странице ресурса, то конструкция вывода TV параметра будет иметь вид: [*name*]. Это касается и всех стандартных полей, таких как [*pagetitle*], [*longtitle*], [*introtext*] и других полей.

На этом сегодняшний урок можно заканчивать, но вы имейте ввиду, что я привел лишь один пример использования TV параметров. Спектр их применения гораздо шире.

Рассмотрев возможные значения типов параметра, вы, безусловно, поймете, какую функциональность несет в себе это расширение MODx. Помимо добавления изображений вы можете прикреплять к ресурсам: текстовые поля, поля для ввода даты, поля для прикрепления файла, поле для URL, для e-mail, чекбоксы, радиокнопки, выпадающие списки, текстовые поля textarea и даже дополнительные поля с визуальным редактором.

Возможные типы дополнительных полей в MODx

Одним словом, инструмент очень мощный и скорее всего, мы еще будем возвращаться к TV параметрам в дальнейшем по ходу прохождения курсов по MODx. А сейчас вы можете поэкспериментировать с различными TV параметрами MODx самостоятельно.

Созданные, во время прохождения урока чанки:

  • MAIN-CONTENT (чанк с содержимым главной страницы)
  • newsline-main (вызов сниппета Ditto на главной странице)
  • news-main (шаблон для вывода новости на главной)
  • news-main-last (шаблон для вывода последней новости на главной)

Подготовленные для урока изображения:

Все описанные в уроке действия вы можете посмотреть в видео к уроку.

Видео урок: TV-параметры MODx. Добавление изображений ресурсам

Автор: Ефимов Виктор

Вы можете также посмотреть другие уроки по созданию сайта на MODx:

17.08.2010
top


blog comments powered by Disqus
Рубрики
3 месяца отличного хостинга бесплатно
Система Orphus