Статья, в которой с помощью дополнения 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.

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

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

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

MODX — TV-поле с типом ввода MIGX и конфигурацией portfolio

Добавление данных в TV-поле portfolio

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

MODX MIGX — Отображение изображения портфолио над содержимым страницы с помощью fancybox

Вывод данных из 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>

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

MODX MIGX — Верхняя часть страницы «Портфолио»

MODX MIGX — Нижняя часть страницы «Портфолио» (пагинация)

MODX MIGX — Отображение изображения портфолио над содержимым страницы с помощью fancybox

Источник: itchief.ru