Создание слайдера Flexslider на MODX Revolution

Разберёмся, как создать полнофункциональный слайдер на MODX Revolution. В качестве слайдера, возьмём Flexslider.

Для управления в админке мы будем использовать компонент MIGX, который позволяет создавать мульти-поля, для вывода самого слайдера на сайт мы не будем использовать никаких сниппетов, возьмём для такой цели удобный шаблонизатор Fenom, который идёт в компоненте PdoTools.

Приступаем:

Бекенд слайдера

Установим MIGX и создадим новую TV-поле с этим типом, для примера возьмём два поля: картинка и ссылка.

Для этого заполняем следующим образом:

Вкладки формы:

[{"caption":"Image", "fields": 
  [
   {"field":"image","caption":"Изображение","inputTVtype":"image"},
   {"field":"link","caption":"Cссылка"}
  ]
}]

Разметка колонок:

[
    {"header": "Изображение", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"},
    {"header": "Ссылка", "sortable": "true", "dataIndex": "link"}
]

После этого, мы сможем добавлять наши слайды через это TV-поле

Для наглядности создайте пару слайдов (мульти-полей)

Обратите внимание, что ссылки можно указывать в таком формате, где ссылка, ID ресурса.

[[~123]]

Фронтенд слайдера

Теперь осталось всё это дело подключить и вывести, о том как подключать и установить слайдер, вы узнаете тут.

Установите pdoTools, если вы этого не сделали.

Обязательно включите поддержку Fenom в настройках PdoTools, ключ - pdotools_fenom_parser.

Это для вызова в шаблоне, если будете вызывать слайдер в чанке, то можете этого не делать.

Также установите ресайзер pThumb, для обрезки изображений и чтобы не подгонять каждый слайд под друг друга по размеру.

Вызовем наш слайдер в шаблоне или чанке:

<div id="slider" class="flexslider">
    <ul class="slides">
        {set $rows = json_decode($_modx->resource.slider, true)}
        {foreach $rows as $row}
            {set $image = $_modx->runSnippet('!pThumb', [
                'options' => 'h=300&w=500&zc=C',
                'input' => $row.image,
            ])}
            <li>
                <a href="{$row.link}">
                    <img src="{$image}"/>
                </a>
            </li>
        {/foreach}
    </ul>
</div>

Поясняю:

В переменной "$_modx->resource.slider", вместо "slider" вставляем имя нашей TV.

"$row.image" и "$row.image" - это название полей слайдера.

И не забудьте вызвать сам слайдер:

<script>
$(window).load(function() {
  $('#slider').flexslider({
    animation: "slide"
  });
});
</script>

Если кому интересно, то могу рассказать, как сделать следующие штуки, для этого напишите в комментариях и я вам напишу пост:

• При клике на слайд, открывается картинка в полном размере, для этого я бы взял Colorbox;
• Как подружить слайдер с другим источником файлов, например для менеджеров;
• Как прикрутить к слайдеру компонент FastUploadTv, для быстрого и удобного способа загрузки картинок.