Modx - портфоліо за допомогою migx, ит шеф

Познайомитися з призначенням пакета 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.

В результаті отримаємо наступний код:

Остання дія - це створення шаблону (чанка) tplPortfolioItem. на підставі якого буде формуватися кожен елемент портфоліо.

Вміст чанка tplPortfolioItem:

Тобто виводити елементи портфоліо будемо в шаховому порядку (в залежності від парності елемента). Якщо елемент непарний, то зліва зображення, а справа текст (назва роботи, її опис та ціна). Якщо елемент парний то навпаки - зображення праворуч, а текст зліва. Формування сітки виконаємо за допомогою класів фреймворка Bootstrap.

CSS-стилі, які необхідно додати до сторінці, щоб макет виглядав коректно на маленьких пристроях (xs і sm):

Виконаємо ще одну дію, а саме підключимо до сторінці fancybox (інструмент для відображення зображень в стилі lightbox, тобто знаходяться над рештою вмісту веб-сторінці).

Після цього необхідно її розпакувати і скопіювати на сайт каталог source.

Підключення fancybox на сторінку здійснюється за допомогою 2 файлів:

Активація fancybox для зображень портфоліо здійснимо за допомогою наступного скрипта:

Портфоліо з пагінацією на сторінці буде виглядати наступним чином.

MODX MIGX - Верхня частина сторінки "Портфоліо" MODX MIGX - Нижня частина сторінки "Портфоліо" (пагінація) MODX MIGX - Відображення зображення портфоліо над вмістом сторінки за допомогою fancybox

Схожі статті