Познайомитися з призначенням пакета 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. Як структури цього поля вкажемо раніше створену конфігурацію. Як шаблон виберемо пункт "Шаблон для портфоліо".
MODX - TV-поле з типом введення MIGX і конфігурацією portfolio
Додавання даних в TV-поле portfolio
Відкриємо ресурс, у якого в якості шаблону обраний елемент "Шаблон для портфоліо". Після цього перейдемо на вкладку "Додаткові поля" і наповнимо TV-змінну portfolio деякими даними.
MODX MIGX - Відображення зображення портфоліо над вмістом сторінки за допомогою fancybox
Висновок даних з TV MIGX поля
Виводити дані з TV-поля (MIGX) здійснимо за допомогою сниппета getImageList. При цьому виводити дані будемо не всі відразу, а порціями по 5 штук. Для цього скористаємося сніпетів pdoPage з пакета pdoTools.
В результаті отримаємо наступний код:
Остання дія - це створення шаблону (чанка) tplPortfolioItem. на підставі якого буде формуватися кожен елемент портфоліо.
Вміст чанка tplPortfolioItem:
Тобто виводити елементи портфоліо будемо в шаховому порядку (в залежності від парності елемента). Якщо елемент непарний, то зліва зображення, а справа текст (назва роботи, її опис та ціна). Якщо елемент парний то навпаки - зображення праворуч, а текст зліва. Формування сітки виконаємо за допомогою класів фреймворка Bootstrap.
CSS-стилі, які необхідно додати до сторінці, щоб макет виглядав коректно на маленьких пристроях (xs і sm):
Виконаємо ще одну дію, а саме підключимо до сторінці fancybox (інструмент для відображення зображень в стилі lightbox, тобто знаходяться над рештою вмісту веб-сторінці).
Після цього необхідно її розпакувати і скопіювати на сайт каталог source.
Підключення fancybox на сторінку здійснюється за допомогою 2 файлів:
Активація fancybox для зображень портфоліо здійснимо за допомогою наступного скрипта:
Портфоліо з пагінацією на сторінці буде виглядати наступним чином.
MODX MIGX - Верхня частина сторінки "Портфоліо" MODX MIGX - Нижня частина сторінки "Портфоліо" (пагінація) MODX MIGX - Відображення зображення портфоліо над вмістом сторінки за допомогою fancybox