Инструкция по созданию сайта на MODx. Урок 17 — Вывод слайд-шоу на главной странице с помощью сниппета Ditto

В сегодняшнем уроке мы займемся дальнейшей настройкой сайта на MODx. Давайте доведем до ума главную страницу нашего сайта и, в первую очередь, настроим jQuery слайд-шоу, которое там расположено.

Слайд-шоу будет служить для акцентирования внимания на тех моментах, которые вы считаете самыми главными, например, на предоставляемых услугах. Сделаем вывод  jQuery галереи на главной странице в виде анонса предоставляемых услуг.

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

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

Первым делом давайте посмотрим на HTML разметку, которая отвечает за вывод нашего слайд-шоу. У нас этот код вынесен в отдельный чанк GALLERY.

<div class="wrapper col2">
  <div id="featured_slide">
    <div id="featured_content">
      <ul>
       
	    <li><img src="/assets/templates/site/images/demo/1.gif" alt="" />
          <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 &raquo;</a></p>
          </div>
        </li>
		
        <li><img src="/assets/templates/site/images/demo/2.gif" alt="" />
          <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&hellip;</p>
            <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
          </div>
        </li>
		
        <li><img src="/assets/templates/site/images/demo/3.gif" alt="" />
          <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&hellip;</p>
            <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
          </div>
        </li>
		
      </ul>
    </div>
    <a href="javascript:void(0);" id="featured-item-prev"><img src="/assets/templates/site/images/prev.png" alt="" /></a> <a href="javascript:void(0);" id="featured-item-next"><img src="/assets/templates/site/images/next.png" alt="" /></a> </div>
</div>

Если проанализировать этот HTML код, вы увидите, что каждый слайд, который состоит из изображения, текста описания и ссылки на подробное прочтение представлен в виде пункта li, маркированного списка ul.

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

Давайте определимся с изображениями для нашего слайд-шоу. На данный момент у нас есть следующие страницы с услугами

Я нашел в интернете несколько изображений приблизительно подходящих под тематику каждой из этих страниц. Скачать их сможете одним архивом в конце урока в разделе с файлами к уроку.

Прикреплять изображения к страницам будем с помощью TV параметра с типом ввода «image». Можно создать для этого новый TV параметр, но так как с этим типом TV параметр уже создан, в уроке по выводу ленты новостей на главной странице, то мы будем использовать его, предварительно немного изменив. Отправляемся редактировать созданный ранее TV параметр: Элементы → Управление элементами → Параметры (TV) → img-news.

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

Изображение для ресурса. Размер для новостей — 60px на 60px, для страниц с услугами — 380px на 250px.

После этого при редактировании любого ресурса с шаблоном «2 колонки» дополнительное поле для вставки изображения будет выглядеть вот так:

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

Прикрепляем изображения для страниц с услугами.

После того, как вы выберите и прикрепите необходимые изображения отправляемся создавать шаблон Ditto для вывода слайд-шоу. Для этого находим в чанке GALLERY повторяющийся блок, который отвечает за вывод одного слайда. На его основе будем реализовывать шаблон.

<li><img src="/assets/templates/site/images/demo/1.gif" alt="" />
          <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 &raquo;</a></p>
          </div>
</li>

Заменяем статическую информацию на специальные плейсхолдеры, чтобы из статической разметки получить шаблон для Ditto:

<li>[+img-news+]
<div class="floater">
<h2>[+longtitle+]</h2>
<p>[+introtext+]</p>
<p class="readmore"><a href="[~[+id+]~]" title="Читать подробнее об этой услуге">Подробнее &raquo;</a></p>
</div>
</li>

При создании шаблона мы использовали:

Полученную конструкцию помещаем в новый чанк с именем slide-tpl:

Убедитесь, что все поля, которые будут использоваться для вывода слайд-шоу заполнены на соответствующих страницах. Не должны быть пустыми поля «Расширенный заголовок» и «Аннотация».

После того, как вы проверите заполнены ли поля отправляемся редактировать чанк GALLERY,  в который будем добавлять вызов сниппета для динамического вывода слайд-шоу.

Вызов сниппета у вас должен быть следующим:

[[Ditto? &tpl=`slide-tpl` &startID=`4` &sortDir=`ASC` ]] 

где, 

В итоге в чанке GALLERY у вас должна остаться следующая конструкция:

<div class="wrapper col2">
<div id="featured_slide">
<div id="featured_content">
<ul> [[Ditto? &tpl=`slide-tpl` &startID=`4` &sortDir=`ASC` ]] </ul>
</div>
<a href="javascript:void(0);" id="featured-item-prev"><img src="/assets/templates/site/images/prev.png" alt="" /></a> <a href="javascript:void(0);" id="featured-item-next"><img src="/assets/templates/site/images/next.png" alt="" /></a>
</div>
</div>

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

Созданные и измененные во время урока чанки и файлы:

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

Видео урок: Вывод слайд-шоу в MODx

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

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