WebDesign Master
Курсы
Создание сайта с нуля. Урок #31. Посадка галереи на MODx (MIGX + phpthumbof)

Создание сайта с нуля. Урок #31. Посадка галереи на MODx (MIGX + phpthumbof)

Всем привет, друзья! Это курс "Создание сайта с нуля", урок 31. В данном уроке мы рассмотрим создание галереи на MODX Revolution, используем нестандартный вывод картинки через phpthumbof в чанк айтема.

Создание сайта с нуля. Урок #31. Посадка галереи на MODx (MIGX + phpthumbof) - Видеоурок
Смотреть урок на YouTube
Создание контентного сайта на Jekyll от А до Я

Дополнительные материалы урока:

  • phpThumbOf Documentation: https://docs.modx.com/current/en/extras/phpthumbof

Пример поля MIGX в MODx Revolutoin:

Tabs:
[
{"caption":"Tab Title", "fields": [
{"field":"title","caption":"Name"},
{"field":"description","caption":"Description","inputTVtype":"textarea"},
{"field":"imageTV","caption":"Photo","inputTV":"imageTV"}
]}
]

Table:
[
{"header": "Name", "sortable": "true", "dataIndex": "title"},
{"header": "Photo", "width": "80", "sortable": "false", "dataIndex": "imageTV","renderer": "this.renderImage"}
]

Пример нестандартного вывода картинки в чанке посредством сниппета phpThumbOf:

<a href="[[+galleryImage]]" data-preview="[[phpthumbof? &input=`[[+galleryImage]]` &options=`&w=640&h=480&zc=1`]]"></a>

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я

Фриланс для начинающих

Я - фрилансер! Базовый курс для начинающих

Другие уроки по теме «CMS»

  • Ajax фильтр на MODx Revolution
  • Посадка типовой секции Landing Page на MODx с использованием MIGX (добавляемые поля)
  • Настройка прав доступа для контент-менеджера в MODX Revolution
  • MODX Revolution - Базовый урок
  • Как создать шаблон для WordPress. Грамотная посадка верстки на WordPress (Right Way)
  • Быстрое создание красивых сайтов на WordPress. Layers Style Kit на реальном примере

Разделы сайта:

  • Курсы
  • Инструменты
  • Веб-дизайн
  • Вёрстка
  • CMS

Полезные ресурсы:

  • Установка WSL и окружения
  • Настройка окружения без WSL
  • Настройка VS Code
  • Lazy Load Placeholder
  • Документация Gulp 4
2023 © WebDesign Master