Как создать фотогалерею FlexSliderMultiTV на MODx Evo
В данной статье-уроке рассматривается нижеприведенный пример создания адаптивной фотогалереи FlexSliderMultiTV для CMS MODx Evo.
Река Адуй. Фото 1
Текст к фотографии 1
Река Адуй. Фото 2
Текст к фотографии 2
Река Адуй. Фото 3
Текст к фотографии 3
Река Адуй. Фото 4
Текст к фотографии 4
Река Адуй. Фото 5
Текст к фотографии 5
Река Адуй. Фото 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