Урок 9 Выводим галерею с помощью сниппета Ditto
На прошлом уроке мы уже провели все подготовительные работы к тому, чтобы буквально в два шага сделать нашу галерею. У нас уже есть готовые ресурсы в папке Портфолио и созданы два TV-параметра с картинками к этим ресурсам. Нам осталось только организовать вывод нашей галереи на странице Портфолио. Как вы уже, наверное, догадались, делать это мы будем с помощью сниппета Ditto. Универсальность этого сниппета позволяет решать очень многие задачи.
Создаем шаблон для вывода проектов
Давайте изучим код нашей галереи, который находится в чанке GALLERY:
<div id="gallery">
<div class="gallery_box">
<div class="gb_left">
<a href="images/gallery/image_01_b.jpg" class="pirobox" title="Project 1"><img src="/assets/templates/templatemo_250_chess/images/gallery/image_01.jpg" alt="" /></a>
</div>
<div class="gb_right">
<h5>People Website</h5>
<p>Validate <a href="http://validator.w3.org/check?uri=referer" rel="nofollow">XHTML</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer" rel="nofollow">CSS</a>. Integer sed nisi sapien, ut gravida mauris. Nam et tellus libero.</p>
<div class="button"><a href="#">Visit</a></div>
</div>
<div class="cleaner"></div>
</div>
<div class="gallery_box">
<div class="gb_left">
<a href="images/gallery/image_02_b.jpg" class="pirobox" title="Project 2"><img src="/assets/templates/templatemo_250_chess/images/gallery/image_02.jpg" alt="" /></a>
</div>
<div class="gb_right">
<h5>Design Team</h5>
<p>Mauris risus magna, blandit ac suscipit at, tristique id erat.</p>
<div class="button"><a href="#">Visit</a></div>
</div>
<div class="cleaner"></div>
</div>
<div class="gallery_box">
<div class="gb_left">
<a href="images/gallery/image_03_b.jpg" class="pirobox" title="Project 3"><img src="/assets/templates/templatemo_250_chess/images/gallery/image_03.jpg" alt="" /></a>
</div>
<div class="gb_right">
<h5>Christmas Site</h5>
<p>Etiam eu ipsum a arcu sodales consequat sit amet at orci. Nulla in luctus elit.</p>
<div class="button"><a href="#">Visit</a></div>
</div>
<div class="cleaner"></div>
</div>
</div>
Не сложно заметить, что в контейнере <div id="gallery"> несколько раз повторяется один и тот же код:
<div class="gallery_box">
<div class="gb_left">
<a href="images/gallery/image_01_b.jpg" class="pirobox" title="Project 1"><img src="/assets/templates/templatemo_250_chess/images/gallery/image_01.jpg" alt="" /></a>
</div>
<div class="gb_right">
<h5>People Website</h5>
<p>Validate <a href="http://validator.w3.org/check?uri=referer" rel="nofollow">XHTML</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer" rel="nofollow">CSS</a>. Integer sed nisi sapien, ut gravida mauris. Nam et tellus libero.</p>
<div class="button"><a href="#">Visit</a></div>
</div>
<div class="cleaner"></div>
</div>
Копируем его и вставляем в новый чанк gallery_tpl который послужит нам шаблоном, для вывода каждого проекта. Думаю, вы уже догадываетесь, что следующим шагом мы подставим в этот шаблон плэйсхолдеры Ditto:
<div class="gallery_box"> <div class="gb_left"> <a href="[+big_img+]" class="pirobox" title="[+pagetitle+]"><img title="[+pagetitle+]" src="[+small_img+]" alt="[+pagetitle+]" /></a> </div> <div class="gb_right"> <h5>[+pagetitle+]</h5> <p>[+introtext+]</p> <div class="button"><a href="[+link+]">Visit</a></div> </div>
<div class="cleaner"></div> </div>
Думаю, что объяснять произведенные замены не нужно, все должно быть понятно по аналогии с предыдущими уроками. Кроме нового TV-параметра [+link+]. Этот параметр будет содержать ссылку на проект.
Создаем TV-параметр для ссылки на проект
Давайте его создадим. Идем в Элементы >> Управление элементами >> TV-параметры и создаем новый TV-параметр link с типом ввода URL и применим его к шаблону Проект. Теперь у нас в ресурсах с шаблоном Проект появилась новая форма:
В ней мы будем размещать ссылку на готовый проект.
Выводим галерею с помощью Ditto
Осталось в чанке GALLERY сделать вызов Ditto, предварительно удалив все внутри контейнера <div id="gallery">:
<div id="gallery">
[!Ditto? &parents=`3` &tpl=`gallery_tpl` &display=`3`!]
</div>
Можно сделать вывод проектов случайным образом, просто добавив параметр &randomize=`1`. Количество отображаемых проектов регулируется параметром &display=`3`. Если этот параметр убрать, то выводиться будут все документы. Но мы лучше сделаем постраничное разбиение, для этого вызов Ditto дополняем следующими параметрами и плэйсхолдерами:
<div id="gallery">
[!Ditto? id=`gallery` &parents=`3` &tpl=`gallery_tpl` &paginate=`1` &display=`3`!]
<div class="pagination">
<p class="pages"><small>Страница [+gallery_currentPage+] из [+gallery_totalPages+]</small> [+gallery_previous+] [+gallery_pages+] [+gallery_next+]</p>
</div>
</div>
Где: id=`gallery` - в вызове Ditto, это уникальный идентификатор Ditto нужен главным образом тогда, когда необходимо использовать более одного вызова Ditto на странице, причем актуален этот параметр тогда, когда для более чем одного вызова Ditto используются глобальные плэйсхолдеры.
&paginate=`1` - включает постраничное разбиение
[+gallery_currentPage+] - глобальный плэйсхолдер, показывающий номер текущей страницы, для привязки к вызову Ditto перед всеми глобальными плэйсхолдерами ставится суффикс gallery_ соответствующий уникальному идентификатору Ditto
[+gallery_totalPages+] - показывает общее количество страниц
[+gallery_previous] - устанавливает ссылку на предыдущую страницу
[+gallery_pages+] - список страниц
[+gallery_next+] - устанавливает ссылку на следущую страницу
Добавляем стили
Осталось придать постраничному разбиению более презентабельный вид с помощью стилей. Находим в папке C:/xampp/htdocs/site/www/assets/templates/ файл templatemo_style.css и открываем его с помощью Notepad++. Это файл со стилями к нашему сайту. Добавляем в этот файл следующие стили:
.pagination a {text-decoration:underline;} /*подчеркивание ссылок*/
.pagination a:hover {text-decoration:none;} /*убрать подчеркивание ссылок при наведении*/
.pagination .ditto_currentpage {color:#fff; padding: 1px 3px; margin:2px; font-weight:bold; background: none repeat scroll 0 0 #9B9B9B; border: 1px solid #6C6C6C;} /*оформление текущей страницы: цвет текста, цвет фона, цвет и ширина границы, размер отступов, текст жирным шрифтом*/
.pagination .ditto_previous_link, .pagination .ditto_next_link{margin:0 10px;} /*отступы для ссылок «далее» и «назад»*/
.pagination .ditto_page{ padding: 2px 5px;}/* отступы для номеров страниц*/
.pages small {float: right; font-size: 12px; color: #fff; padding: 0 15px 0 0;}/* оформляем блок «Страница из »: выравниваем, размер текста, цвет текста, отступ от края */
Слева в комментариях написано какой стиль за что отвечает.
Более подробную информацию о параметрах и плэйсхолдерах Ditto читайте в документации.