Галерея работ в портфолио с помощью MIGX в MODX

Статья, в которой с помощью дополнения MIGX CMF MODX Revolution создадим содержимое страницы, на которой выведем примеры работ (портфолио) некоторого специалиста или организации. HTML шаблон портфолио выполним на основе сетки и классов фреймворка Twitter Bootstrap.

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

Используемы дополнения: фреймворк Twitter Bootstrap 3, библиотека jQuery, плагин jQuery fancybox, MODX-дополнения MIGX и pdoTools (для пагинации).

Создание MIGX конфигурации для портфолио

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

1. Откроем в менеджере MODX Revolution страницу "Управление MIGX".
2. Перейдём во вкладку "MIGX" и нажнём на кнопку "Добавить элемент".
3. В диалоговом окне "MIGX"во вкладке "Settings" введём в поле name (имя конфигурации) значение portfolio.
4. Во вкладке "Formtabs" создадим таблицу с caption "Портфолио" и следующими полями:
   • FieldName – name, Caption – Название работы.
   • FieldName – image, Caption – Изображение, Input TV type - image.
   • FieldName – description, Caption – Описание работы.
   • FieldName – price, Caption – Цена, Input TV type - number.
5. Во вкладке "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>

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