Галерея работ в портфолио с помощью MIGX в MODX
Статья, в которой с помощью дополнения MIGX CMF MODX Revolution создадим содержимое страницы, на которой выведем примеры работ (портфолио) некоторого специалиста или организации. HTML шаблон портфолио выполним на основе сетки и классов фреймворка Twitter Bootstrap.
Познакомиться с назначением пакета MIGX и с тем, как его установить, можно в статье, в которой разобран метод удобного управления каруселью Bootstrap.
Используемы дополнения: фреймворк Twitter Bootstrap 3, библиотека jQuery, плагин jQuery fancybox, MODX-дополнения MIGX и pdoTools (для пагинации).
Создание MIGX конфигурации для портфолио
Разработку MIGX конфигурации для портфолио осуществим посредством выполнения следующих действий:
- Откроем в менеджере MODX Revolution страницу "Управление MIGX".
- Перейдём во вкладку "MIGX" и нажнём на кнопку "Добавить элемент".
- В диалоговом окне "MIGX"во вкладке "Settings" введём в поле name (имя конфигурации) значение
portfolio
. - Во вкладке "Formtabs" создадим таблицу с caption "Портфолио" и следующими полями:
- FieldName – name, Caption – Название работы.
- FieldName – image, Caption – Изображение, Input TV type - image.
- FieldName – description, Caption – Описание работы.
- FieldName – price, Caption – Цена, Input TV type - number.
- Во вкладке "Columns" определим заголовки таблицы, с помощью которой пользователь в ресурсе MODX будет осуществлять ввод данных в соответствующие поля:
- Header – Название работы, Field – name, Column width – 30.
- Header – Изображение, Field – image, Renderer - this.renderImage.
- Header – Описание, Field – description, Column width – 200.
- Header – Цена, Field – price.

Создание дополнительного поля на основе MIGX конфигурации
Создадим дополнительное поле с именем portfolio. Содержимое данного TV-поля определим как migx. В качестве структуры этого поля укажем ранее созданную конфигурацию. В качестве шаблона выберем пункт "Шаблон для портфолио".

Добавление данных в TV-поле portfolio
Откроем ресурс, у которого в качестве шаблона выбран элемент "Шаблон для портфолио". После этого перейдём на вкладку "Дополнительные поля" и наполним TV-переменную portfolio некоторыми данными.

Вывод данных из TV MIGX поля
Выводить данные из TV-поля (MIGX) осуществим с помощью сниппета getImageList
. При этом выводить данные будем не все сразу, а порциями по 5 штук. Для этого воспользуемся сниппетом pdoPage
из пакета pdoTools
.
В итоге получим следующий код:
[[!pdoPage? &element=`getImageList` &tvname=`portfolio` &tpl=`tplPortfolioItem` &limit=`5` ]] <div class="text-center"> [[!+page.nav]] </div>
Последнее действие – это создание шаблона (чанка) tplPortfolioItem
, на основании которого будет формироваться каждый элемент портфолио.
Содержимое чанка tplPortfolioItem
:
<div class="portfolio-item [[+idx:mod:is=`1`:then=`odd`:else=`even`]]"> <div class="container"> <div class="portfolio-info col-sm-6 [[+idx:mod:is=`1`:then=`col-sm-push-6`]]"> <h2 class="h3 page-header"><i class="glyphicon glyphicon-pushpin"></i> [[+name]]</h2> <p class="description">[[+description]]</p> <p class="price lead"><span class="label label-danger">Цена: [[+price]] руб.</span></p> </div> <div class="col-sm-6 [[+idx:mod:is=`1`:then=`col-sm-pull-6`]]"> <a class="fancybox" rel="gallery" href="[[+image]]" title="[[+name]]"> <img class="img-responsive" src="[[+image]]" alt="[[+name]]"> </a> </div> </div> </div> <hr>
Т.е. выводить элементы портфолио будем в шахматном порядке (в зависимости от чётности элемента). Если элемент нечётный, то слева изображение, а справа текст (название работы, её описание и цена). Если элемент чётный то наоборот - изображение справа, а текст слева. Формирование сетки выполним с помощью классов фреймворка Bootstrap.
CSS-стили, которые необходимо добавить к странице, чтобы макет выглядел корректно на маленьких устройствах (xs и sm):
@media (min-width: 768px) and (max-width: 991px) { .portfolio-info .page-header { padding-bottom: 11px; margin: 8px 0 8px; } } @media (max-width: 767px) { .portfolio-info h2 { font-size: 24px; text-align: center; } .portfolio-info .page-header { padding-bottom: 11px; margin: 8px 0 8px; } .portfolio-item .description { text-align: left; } .portfolio-item .price { text-align: center; margin-bottom: 8px; } h2 { font-size: 32px; } }
Выполним ещё одно действие, а именно подключим к странице fancybox (инструмент для отображения изображений в стиле lightbox, т.е. находящихся над остальным содержимым веб-странице).
Скачать последнюю версию fancybox можно со страницы: https://github.com/fancyapps/fancyBox.
После этого необходимо её разархивировать и скопировать на сайт каталог source.
Подключение fancybox к странице осуществляется посредством 2 файлов:
<!-- Подключение файла jquery.fancybox.css к странице--> <link href="/путь/до/jquery.fancybox.css" rel="stylesheet"> <!-- Подключение файла jquery.fancybox.pack.js к странице--> <!-- Данный файл необходимо подключить после подключения библиотеки jquery --> <script src="/путь/до/jquery.fancybox.pack.js"></script>
Активирование fancybox для изображений портфолио осуществим с помощью следующего скрипта:
<script> $(document).ready(function() { $(".fancybox").fancybox({ openEffect : 'none', closeEffect : 'none' }); }); </script>
Портфолио с пагинацией на странице будет выглядеть следующим образом.



Комментарии: 10
Доброго времени суток! Подскажите, как сделать вывод плиткой по два изображения в ряд, а не в шахматном порядке?
Добрый вечер, Александр!
Подскажите как сделать пагинацию
Ссылка на портфолио Если оборачивать через PdoPage то он открывает 1 картинку. а по ссылке стоит 1-2-3-4-5Добрый день!
Плейсхолдерpage.nav
нужно задавать некэшированным:Добрый день, Александр!
Все равно не получается дополнительные картинки показать в галерее, пагинацию поставил
Выводит галерею. показывается только первые картинки. а дополнительные (вложенные) картинки не выдает. Как сделать, что бы выдавала их тоже? Если рассматривать Галерея вложенность 3 картинкиВы мне ответите на мой вопрос по галерее ?
Нет, создавать таблицы в базе данных не требуется. Для хранения данных, используется значение TV-поля, которое добавляется к ресурсу с привязкой через шаблон. Как добавлять дополнительные поля к ресурсу можно почитать в этой статье.
MIGX позволяет также делать это и через создания таблиц, но этот момент будет изложен в других статьях по MIGX.