Как создать фотогалерею FlexSliderMultiTV на MODx Evo

В данной статье-уроке рассматривается нижеприведенный пример создания адаптивной фотогалереи FlexSliderMultiTV для CMS MODx Evo.


  • Река Адуй. Фото 1

    Река Адуй. Фото 1

    Текст к фотографии 1

  • Река Адуй. Фото 2

    Река Адуй. Фото 2

    Текст к фотографии 2

  • Река Адуй. Фото 3

    Река Адуй. Фото 3

    Текст к фотографии 3

  • Река Адуй. Фото 4

    Река Адуй. Фото 4

    Текст к фотографии 4

  • Река Адуй. Фото 5

    Река Адуй. Фото 5

    Текст к фотографии 5

  • Река Адуй. Фото 6

    Река Адуй. Фото 6

    Текст к фотографии 6



1. В системе должен быть установлен сниппет MultiTV, если он у Вас не установлен, инструкцию можно прочитать здесь, и на этой же странице можно скачать дистрибутив сниппета.

2. Скачать дистрибутив галереи FlexSliderMultiTV можно здесь.

3. Установите FlexSliderMultiTV через PackageManager. Как установить PackageManager и скачать дистрибутив можно здесь.

4. В ходе установки установщиком были созданы чанки flexslider-css и flexslider-js, а также tv-параметр flexslider.

5. Создайте шаблон FlexSliderMultiTV. В код шаблона вставьте следующие конструкции:

- в <head> добавьте {{flexslider-css}}

- перед закрывающим </body> добавьте {{flexslider-js}}

6. Назначьте tv-параметр flexslider созданному шаблону FlexSliderMultiTV.

7. Создайте ресурс с шаблоном FlexSliderMultiTV для вывода фотогалереи. Добавьте в этот ресурс вызов сниппета MultiTV:

[[multiTV? &tvName=`flexslider` &display=`all`]]

8. Внизу ресурса должна появиться группа tv-параметров для данной галереи. Можно исправить английские имена на русские.

Для этого откройте файл flexslider.config.inc.php из папки assets/tvs/multitv/configs и внесите изменения. Не забудьте проверить кодировку файла. При необходимости преобразуйте ее в UTF-8. В блокноте Notepad++ это делается командой Кодировки – Преобразовать в UTF-8. При другой кодировке русские символы в админке могут исказиться.

Результат на рисунке ниже.

9. Добавьте несколько изображений и тексты в поля. Фото можно скачать здесь. 

10. Обновите страницу, на которой должна быть выведена галерея. 

11. Стили оформления галереи правим в файле flexslider.css из папки assets/templates/common/js/flexslider.

Источники:
http://www.tattoocms.it/extras/multitvs/flexslider-multitv-for-modx-evolution.html
https://github.com/Nicola1971/FlexSlider-MultiTV#readme