Инструкция по созданию сайта на MODx. Урок 21 — Реализация галереи изображений

Внимание: содержимое этого урока устарело. Галереи на MODx Evo удобнее создавать с помощью Evogallery.

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

На самом деле для реализации галереи в MODx предусмотрено несколько готовых решений в виде дополнительных модулей и плагинов: maxigallery, Easy 2 Gallery, MiniGallery и другие. Но все они предназначены для узкого применения, и их использование накладывает определенные ограничение на разработчиков. Если говорить откровенно, то я мало себе представляю сайт на MODx в котором может использоваться для реализации галереи какое-нибудь из готовых решений без редактирования, настройки и «допиливания» под свои нужды. Зачастую, как раз эта настройка галереи, изменение ее внешнего вида и занимает почти все время, затрачиваемое на прикручивание галереи в MODx. При этом функционал готовых решений довольно скудный и не всегда позволяет добиться требуемого результата.

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

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

Ну что, поехали.

В начале остановимся на основных моментах в создании галереи на MODx:

  • Галерея изображений будет расположена в дереве сайта.
  • Загрузка изображений будет реализована с помощью TV параметров.
  • Для альбомов галереи будет создан отдельный шаблон с именем «Галерея».
  • Вывод всех существующих альбомов в галерее будет осуществлен с помощью сниппета Ditto.
  • Создание миниатюр загруженных изображений возьмет на себя плагин TVimageResizer.
  • Проверку прикреплено ли изображение к странице будем осуществлять с помощью плагина Phx.

Итак, первым делом создадим шаблон, который будем использовать для страниц с альбомами. Для этого отправляемся на вкладку Элементы →Управление элементами→ Шаблоны. Выбираем для редактирования какой-нибудь из уже созданных ранее шаблонов, например, «Во всю ширину» и дублируем его с помощью кнопки «Сделать копию». После этого создастся новый шаблон с именем «Duplicate of Во всю ширину», который мы и будем дальше изменять при создании шаблона для альбомов галереи. В первую очередь изменим название шаблона на «Галерея», а в поле «Описание» впишем «шаблон для галереи».  На этом новый шаблон можно пока оставить. Мы еще вернемся к его редактированию позже.

Созданный шаблон для вывода галереи

После создания нового шаблона в дереве ресурсов MODx создаем страницу «Галерея» и несколько дочерних документов для нее. Дочерние документы будут в дальнейшем ничем иным, как альбомами с изображениями. 

Галерея в дереве документов

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

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

В качестве примера я создам 10 TV параметров. Желательно их объединить в одну группу под названием «Галерея изображений».

Выбор шаблона для TV параметра

Имена TV параметров могут быть любыми, я назвал так:  img-gallery1 ... img-gallery10. Для всех создаваемых TV параметров из выпадающего списка тип ввода выберите «image». В поле заголовок вписываете любое понятное вам имя, например:  «Изображение 1», «Изображение 2»  и так далее. 

Пример заполнения полей при создании TV параметра

После создания TV параметров при редактировании ресурса с шаблоном «Галерея» у вас появятся дополнительные поля для прикрепления всех 10 изображений:

Дополнительные поля для прикрепления изображений

Прикрепляемых изображений, как вы понимаете, может быть больше.

Генерация миниатюр для галереи в MODx

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

Автоматизировать создание миниатюр нам поможет плагин TVimageResizer. С его помощью вы сможете создать уменьшенную копию заданных размеров для каждого прикрепленного изображения.

Первым делом скачайте последнюю стабильную версию плагина TVimageResizer с оффициального сайта MODx. После того, как скачанный архив будет у вас на компьютере мы приступаем к его установке. 
Примечание: на момент написания последней стабильной версией плагина был «TVimageResizer 1.8-release».

Создайте папку с именем  «tvimageresizer» в каталоге  ...assets/plugins/ и распакуйте в эту папку содержимое скачанного архива. После этого в администраторской панели MODx необходимо создать новый плагин. Чтобы сделать это перейдите на вкладку Элементы → Управление элементами → Плагины  и выберите из списка «Создать плагин».

На вкладке «Общие» поля заполняем следующим образом:

Название плагина: TVimageResizer.

Описание: Плагин для создания миниатюр TV параметров.

Код плагина (php): require_once("../assets/plugins/tvimageresizer/TVimageResizer.inc.php");

Обратите внимание: в поле «Код плагина (php)» не надо добавлять конструкцию <?php ?>, указывающую что это PHP. В это поле необходимо сразу вписать необходимый вам код.

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

Вкладка Общие при создании плагина MODx

На вкладке «Конфигурация» в поле «Конфигурация плагина» вставляем следующий код:

&tv_ids=TV IDs;string; &th_width=Width;int;150 &th_height=Height;int;110 &prefix=Prefix;string;t_ &crop=Cropping;list;yes,no;yes &rcorner=Corners percentage of clipping;int;0 &watermark=Watermark image path (png);string;0 &copyrighttext=Copyright text;string;0 &save_o_name=Save only name;list;yes,no;no &quality=Quality;int;85 &resize_checked=Resize checked;list;yes,no;no

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

Для редактирования доступны следующие поля с настройками конфигурации:

  • TV IDs — идентификаторы TV параметров, для которых можно будет создать миниатюры. Указываются через запятую. Если пусто, то возможность создавать миниатюры будет для всех TV параметров с типом ввода Image.
    Примечание: идентификаторы TV параметров указываются в скобках рядом с именем параметра на странице Элементы → Управление элементами → Параметры (TV).
  • Width — ширина создаваемой копии картинки. 
  • Height — высота создаваемой копии картинки. 
  • Prefix — префикс для имени созданной картинки.
    Примечание: в качестве префикса могут быть использованы только символы латинского алфавита. 
  • Cropping — обрезать картинки (создавать точно по указанным размерам).
  • Corners percentage of clipping — скруглять углы (размер угла в процентах).
  • Watermark image path (png) —  накладывать водяной знак (путь до PNG-картинки). 
  • Copyright text — наложить текст на картинку. 
  • Save only name — сохранять в поле только имя файла картинки. Можно использовать для создания картинки со ссылкой на большое изображение.
    Примечание: при включении этой настройки в значении TV параметра будет храниться не путь к изображению а только имя, например, «name.jpg».
  • Quality — качество изображения (размер сжатия).
  • Resize checked — изменение размера по умолчанию включено
    Примечание: если этот параметр выставлен в «No», то для создания уменьшенной копии необходимо будет выставить чекбокс «resize» для необходимых TV параметров.

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

  • Оставьте пустым поле TV IDs, чтобы для любого изображения прикрепленного с помощью TV можно было создать уменьшенную копию.
  • Укажите значения высоты и ширины миниатюры, подходящие для вашего дизайна (я указал Width 200, Height 150).
  • В качестве префикса для создаваемых миниатюр в нашем случае я указал «mini_».
  • Значение параметра Cropping выставьте «Yes».
  • Значение параметра Save only name выставьте «Yes».
  • Значение Resize checked выставьте «No», чтобы миниатюра генерировалась не для всех изображений, а для тех, для которых вы установите галочку «Resize».

Вкладка Конфигурация при создании плагина MODx

После того, как вы установили все необходимые вам настройки, следуем на вкладку «Системные события» и обязательно устанавливаем галочки OnBeforeDocFormSave и OnDocFormRender.

Системные события для плагина MODx

С указанными настройками плагин «TVimageResizer» будет генерировать уменьшенные копии изображений размером 200px на 150px с префиксом в названии файла «mini_». При этом генерироваться миниатюры будут не для всех изображений, прикрепленных с помощью TV, а только для тех TV параметров, которые указаны в поле TV IDs.

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

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

Чекбокс resize для TV параметра

Чтобы создалась миниатюра обязательно выставьте галочку «Resize» для всех изображений в альбомах.

Примечание: описание возможных настроек плагина TVimageResizer  вы сможете найти в файле readme_ru.txt, вложенном в архив с плагином. Еще могу вам посоветовать периодически следить за появлением новых версий TVimageResizer, так как плагин постоянно обновляется и совершенствуется. Например, совсем скоро выйдет стабильная версия, в которой для каждого прикрепленного изображения можно будет создавать несколько уменьшенных копии различных пропорций и размеров. При этом копии разных размеров будут раскладываться в разные автоматически созданные папки, названия которых вы сможете указать в настройках конфигурации плагина.

Вывод прикрепленных изображений в шаблоне «Галерея»

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

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

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

В начале сделаем вывод этих изображений, а затем добавим JavaScript эффект при открытии, и с помощью CSS зададим необходимое расположение на странице.

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

Сейчас там находится такая конструкция:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN" dir="ltr">
{{HEAD}}
<body id="top">
{{HEADER}}
{{BREADCRUMB}}
<div class="wrapper col3">
<div id="container">
<h1>[*longtitle*]</h1>
[*content*]
<br class="clear" />
</div>
</div>
{{FOOTER}}
</body>
</html>

Вывод содержимого страницы нам в этом случае не нужно, так как в области содержимого будут выводиться миниатюры-ссылки на прикрепленные фотографии.

Поэтому удаляем из шаблона «Галерея» тег отвечающий за вывод содержимого страницы  [*content*] и на его место вставляем конструкцию с выводом изображений:

<p>[*introtext*]</p>

<a href="assets/images/gallery/[*img-gallery1*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery1*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение"  /></a>

<a href="assets/images/gallery/[*img-gallery2*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery2*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение"  /></a>

<a href="assets/images/gallery/[*img-gallery3*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery3*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение"  /></a>

<a href="assets/images/gallery/[*img-gallery4*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery4*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение" /></a>

<a href="assets/images/gallery/[*img-gallery5*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery5*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение"/></a>

<a href="assets/images/gallery/[*img-gallery6*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery6*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение" /></a>

<a href="assets/images/gallery/[*img-gallery7*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery7*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение" /></a>

<a href="assets/images/gallery/[*img-gallery8*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery8*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение" /></a>

<a href="assets/images/gallery/[*img-gallery9*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery9*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение" /></a>

<a href="assets/images/gallery/[*img-gallery10*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery10*]" width="200" height="150"alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение" /></a>

Как вы видите мы просто выводим миниатюры в качестве ссылок на оригинальное изображение. И миниатюры и оригинальные изображения находятся в директории  assets/images/gallery. Так как в TV параметре мы сохраняем только название файла прикрепляемого изображения (параметр «Save only name»), то при добавлении префикса «mini_» мы получаем название файла миниатюры.

Тег [*introtext*] используется для вывода описания альбома. Т.е. в качестве описания будет выводиться текст вписанный в поле «Аннотация» при редактировании страницы.

Описание шаблона в поле Аннотация

Если вы уже прикрепили изображения, то внешний вид страницы с выбранным шаблоном «Галерея» будет следующим:

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

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

Давайте сейчас немного изменим внешний вид галереи, для этого добавим несколько CSS классов: каждую ссылку поместим в отдельный контейнер с CSS классом class="img-gallery", а весь блок с фотографиями поместим в контейнер с классом class="img-all".

<p>[*introtext*]</p>

<div class="img-all">

<div class="img-gallery">
<a href="assets/images/gallery/[*img-gallery1*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery1*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение"  /></a>
</div>

<div class="img-gallery">
<a href="assets/images/gallery/[*img-gallery2*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery2*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение"  /></a>
</div>

<div class="img-gallery">
<a href="assets/images/gallery/[*img-gallery3*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery3*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение"  /></a>
</div>

<div class="img-gallery">
<a href="assets/images/gallery/[*img-gallery4*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery4*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение" /></a>
</div>

<div class="img-gallery">
<a href="assets/images/gallery/[*img-gallery5*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery5*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение"/></a>
</div>

<div class="img-gallery">
<a href="assets/images/gallery/[*img-gallery6*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery6*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение" /></a>
</div>

<div class="img-gallery">
<a href="assets/images/gallery/[*img-gallery7*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery7*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение" /></a>
</div>

<div class="img-gallery">
<a href="assets/images/gallery/[*img-gallery8*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery8*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение" /></a>
</div>

<div class="img-gallery">
<a href="assets/images/gallery/[*img-gallery9*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery9*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение" /></a>
</div>

<div class="img-gallery">
<a href="assets/images/gallery/[*img-gallery10*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery10*]" width="200" height="150"alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение" /></a>
</div> 

</div> 

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

Для этого добавляем в CSS файл assets/templates/site/styles/layout.css следующую конструкцию:

/* -------------Gallery-----------------*/
.img-all .img-gallery{ width:200px; height:150px; float:left; margin:0 15px 25px 0; padding:5px; border:1px solid #CCC;}

После добавления стилей, внешний вид галереи примет следующий вид:

Внешний вид галереи после подключения CSS стилей

Как видите, выглядит уже вполне неплохо.

Примечание: если решите изменить размеры, генерируемых миниатюр в настройках плагина TVimageResizer, не забудьте внести изменения в шаблон «Галерея», где мы жестко прописывали высоту и ширину миниатюр и в CSS файле.

Сейчас давайте добавим JavaScript эффект для галереи, чтобы при нажатии на миниатюру увеличенное изображение отображалось не просто в новом окне, как это происходит сейчас, а эффектно раскрывалось поверх текущего окна. Для этого можно воспользоваться любым JS решением будь то LightBox, LightBox2, FancyBoxjsImageBox, thickBox, LightWindow, LightView или любой другои известный вам скрипт для отображения изображений и галерей.

Я предлагаю в нашем случае использовать FancyBox. Скачайте последнюю версию с официального сайта.

На момент написания статьи это version: 1.3.4 [прямая ссылка для скачивания архива].

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

Я объясню как подключить Fancybox к нашей галерее.

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

Загруженные файлы Fancybox

После этого нам необходимо подключить все необходимые скрипты и стили Fancybox к шаблону, как вы помните файлы со скриптами и стилями подключаются внутри тега <head>, который мы в одном из первых уроков вынесли в отдельный чанк {{HEAD}}. Чтобы не подгружать лишние файлы для тех страниц, на которых они не используются мы не будем изменять содержимое этого чанка. Давайте создадим еще один новый {{HEAD-GALLERY}}, который будем подключать в шаблоне «Галерея» вместо чанка {{HEAD}}.

Содержимое чанка {{HEAD-GALLERY}} будет следующим:

<head>
<base href="[(site_url)]" />
<title>[*pagetitle*] | [(site_name)]</title>
<meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)]" />
<meta name="keywords" content=" [*keywords*]" />
<meta name="description" content ="[*description*]"/>
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="/assets/templates/site/styles/layout.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/assets/templates/site/gallery/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="/assets/templates/site/gallery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/templates/site/gallery/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script> !window.jQuery && document.write('<script src="/assets/templates/site/gallery/jquery-1.4.3.min.js"><\/script>'); </script>
<script type="text/javascript">
$(document).ready(function()
{ $("a[rel=example_group]").fancybox({ 'transitionIn' : 'none', 'transitionOut' : 'none', 'titlePosition' : 'over', 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { return '<span id="fancybox-title-over">Фотография ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>'; } }); });
</script>
</head>

Как вы видите, в этом чанке мы подключаем не только стили необходимые для корректного отображения нашего сайта, но и добавляем скрипты и стили необходимые для работы галереи. Эти скрипты будут подключаться только для страниц с альбомами, так как только эти страницы будут иметь шаблон «Галерея».

Конечно же, не забываем после создания нового чанка в шаблоне «Галерея» вместо {{HEAD}} указать вызов {{HEAD-GALLERY}}:

Подключение нового чанка для шаблона Галерея

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

rel="example_group"

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

<div class="img-gallery">
<a rel="example_group" href="assets/images/gallery/[*img-gallery1*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery1*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение" /></a>
</div>

Если вы верно указали пути к стилям и скриптам Fancybox, прописали для всех ссылок на изображения rel="example_group", то фотографии галереи будут эффектно открываться поверх текущей страницы с применением  JavaScript. 

Открытие фотографии с Fancybox эффектом

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

Сейчас многие из вас могут задаться вопросом: Что же будет с галереей, если из прописанных в шаблоне 10 или допустим 20 изображений некоторые не будут прикреплены с помощью TV параметров к альбому? Ну и вправду… не в каждом же альбоме обязательно иметь одинаковое количество изображений.

А вот что будет в этом случае можно посмотреть ниже:

Битая картинка в гелерее

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

Плагин  PHx — очень мощное функциональное решение, которое позволит более гибко и комфортно работать с шаблонами и  TV параметрами в MODx. Подробно описывать его возможности в этом уроке я не буду, более подробную информацию об этом плагине при желании вы сможете получить из Wiki учебника о MODx

Я лишь ограничусь тем его функционалом, который пригодится нам в работе.

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

Установка плагина PHx: 

  1. Скачайте последнюю версию плагина с официального сайта MODx
  2. Создайте папку с именем «phx» в директории /assets/plugins 
  3. Распакуйте содержимое архива в созданную папку  «phx»
  4. Создайте новый плагин в администраторской панели MODx. Элементы → Управление элементами →Плагины → Создать плагин. При создании, в поле «Название плагина» укажите PHx; в область «Код плагина (php)» скопируйте содержимое файла phx.plugin.txt, который лежит в скачанном архиве; на вкладке «Системные события» установите галочку «OnParseDocument».

После выполнения приведенных выше действий сохраняемся и на этом можно считать, что плагин PHx у вас успешно установлен.

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

[+phx:if=`[*img-gallery1*] `:is=``:then=``:else=`
<div class="img-gallery"><a rel="example_group" href="assets/images/gallery/[*img-gallery1*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery1*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение" /></a>
</div>
`+]  

Эта конструкция проверяет, заполнен ли TV параметр [*img-gallery1*], и если он пуст, то ничего не выводим (if=`[*img-gallery1*] `:is=``:then=``);

если же с помощью этого TV параметра прикреплено изображение, то выводим его в шаблоне (else=`Код вывода изображения`).

Таким образом, мы обрезаем пустые TV параметры и в альбоме будут выводиться только те фотографии которые прикуплены к нему, а итоговый код шаблона «Галерея» примет следующий вид:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN" dir="ltr">
{{HEAD-GALLERY}}
<body id="top">
{{HEADER}}
{{BREADCRUMB}}
<div class="wrapper col3">  
<div id="container">
<h1>[*longtitle*]</h1>
<p>[*introtext*]</p>

<div class="img-all">[+phx:if=`[*img-gallery1*] `:is=``:then=``:else=`<div class="img-gallery"><a rel="example_group" href="assets/images/gallery/[*img-gallery1*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery1*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение"  /></a></div>`+]  

[+phx:if=`[*img-gallery2*] `:is=``:then=``:else=`<div class="img-gallery"><a rel="example_group" href="assets/images/gallery/[*img-gallery2*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery2*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение"  /></a></div>`+]  

[+phx:if=`[*img-gallery3*] `:is=``:then=``:else=`<div class="img-gallery"><a rel="example_group" href="assets/images/gallery/[*img-gallery3*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery3*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение"  /></a></div>`+]  

[+phx:if=`[*img-gallery4*] `:is=``:then=``:else=`<div class="img-gallery"><a rel="example_group" href="assets/images/gallery/[*img-gallery4*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery4*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение" /></a></div>`+]

[+phx:if=`[*img-gallery5*] `:is=``:then=``:else=`<div class="img-gallery"><a rel="example_group" href="assets/images/gallery/[*img-gallery5*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery5*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение"/></a></div>`+]

[+phx:if=`[*img-gallery6*] `:is=``:then=``:else=`<div class="img-gallery"><a rel="example_group" href="assets/images/gallery/[*img-gallery6*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery6*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение" /></a></div>`+]

[+phx:if=`[*img-gallery7*] `:is=``:then=``:else=`<div class="img-gallery"><a rel="example_group" href="assets/images/gallery/[*img-gallery7*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery7*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение" /></a></div>`+]

[+phx:if=`[*img-gallery8*] `:is=``:then=``:else=`<div class="img-gallery"><a rel="example_group" href="assets/images/gallery/[*img-gallery8*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery8*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение" /></a></div>`+]

[+phx:if=`[*img-gallery9*] `:is=``:then=``:else=`<div class="img-gallery"><a rel="example_group" href="assets/images/gallery/[*img-gallery9*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery9*]" width="200" height="150" alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение" /></a></div>`+]

[+phx:if=`[*img-gallery10*] `:is=``:then=``:else=`<div class="img-gallery"><a rel="example_group" href="assets/images/gallery/[*img-gallery10*]" target="_blank"><img src="assets/images/gallery/mini_[*img-gallery10*]" width="200" height="150"alt="Изображение из альбома [*longtitle*]" title="Нажмите чтобы посмотреть увеличенное изображение" /></a></div> `+]

</div> 
<br class="clear" />  
</div></div>
{{FOOTER}}
</body>
</html>

Если вам понадобится больше изображений в каждом альбоме, просто зарезервируйте под них место в этом шаблоне, предварительно создав дополнительные TV параметры с типом ввода «image».

Вывод созданных альбомов на странице

Теперь остался последний штрих: необходимо реализовать вывод созданных албомов на странице «Галерея».

Для каждого альбома мы будем выводить следующие данные:  

  • Миниатюру (будет использована миниатюра первого прикрепленного изображения [*img-gallery1*])
  • Название альбома (тут по вашему желанию можно использовать поля либо заголовок страницы [*pagetitle*], либо расширенный заголовок [*longtitle*]).
  • Описание альбома (в качестве описания будет использовано поле «Аннотация» [*introtext*]).

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

  • имя чанка: albom-gallery; 
  • описание: вывод блока со ссылкой на альбом на странице галереи; 
  • содержимое: в область содержимого поместите следующую конструкцию

<div class="albom-gallery">
<a href="[~[+id+]~]" ><img src="assets/images/gallery/mini_[+img-gallery1+]" width="200" height="150" alt="Альбом [+longtitle+]" title="Нажмите чтобы открыть альбом" /></a>
<span><a href="[~[+id+]~]" >[+longtitle+]</a></span>
<p>[+introtext+]</p>
<p><a href="[~[+id+]~]">Смотреть альбом →</a><p>
</div>

Как видите, в качестве обложки альбома мы использовали миниатюру первого загруженного изображения. Можно указать это в поле «Описание» TV параметра с именем img-gallery1, тогда при добавлении изображений в альбом мы увидим это предупреждение.

Описание первого изобаржения

После создания шаблона для Ditto, отправляемся на страницу «Галерея» и в поле «Cодержимое ресурса» вставляем вызов сниппета Ditto с помощью конструкции:

[[Ditto? &tpl=`albom-gallery` &sortDir=`ASC` ]]

В параметр &tpl передаем имя чанка-шаблона, который мы только что создали.

Внешний вид страницы примет следующий вид:

Внешний вид страницы без стилей

Чтобы немножко облагородить внешний вид страницы, давайте добавим CSS стили для классов, указанных в шаблоне-чанке albom-gallery. Вы можете располагать эти блоки с помощью CSS как угодно на странице, я приведу один из возможных вариантов.

Добавляем в CSS файл assets/templates/site/styles/layout.css следующую конструкцию:

.albom-gallery{ clear:both; padding-top:20px;}
.albom-gallery img{float:left; padding:5px; border:1px solid #CCC; margin-right:20px;}
.albom-gallery span a{ font-size:18px; font-family: Georgia, "Times New Roman", Times, serif; color: #777 ;}
.albom-gallery span a:hover{ color:#999;}

После добавления стилей внешний вид страницы с альбомами будет приблизительно следующим:

Внешний вид страницы с альбомами

При нажатии на изображение, название альбома или на ссылку «Смотреть альбом» мы переходим со страницы с альбомами к просмотру изображений.

Создание галереи закончено и я хотел бы сделать еще пару исправлений на сайте:

1. Изменим название пункта меню «Контактная информация» на «Контакты», чтобы после добавления нового пункта «Галерея» главное меню не сползало под логотип.

Для этого при редактировании ресурса «Контактная информация» в поле Пункт меню впишем «Контакты».

Пункт меню

2. Так как мы используем плагин «TVimageResizer» с включенным параметром Save only name (сохраняем только имя файла картинки), то лучше будет отключить плагин  «Show Image TVs» на вкладке Элементы → Управление элементами → Плагины → Show Image TVs 

Отключение плагина

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

Файлы и чанки урока:

Видео урок: реализация галереи изображений на системе MODx

Видео-урок: создание галереи в MODx. Часть 1

Размер: 6 мб. Длительность: 5 минут

Видео-урок: создание галереи в MODx. Часть 2

Размер: 26 мб.  Длительность: 5 минут

Видео-урок: создание галереи в MODx. Часть 3

Размер: 10 мб.  Длительность: 5 минут

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

Подпишитесь на обновления в блоге. Спасибо.

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

16.02.2011
top


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