Migx галерея – Как избавиться от лимита в 100 элементов в галерее с загрузкой через migx? — Хабр Q&A

Leave a Comment / Разное / By /

Содержание

MIGX создание галереи изображений или слайдера

Удобное решение, которое позволит создать галерею для определенного шаблона, если необходимо вывести небольшое число изображений. Например, можно использовать для карточки товара интернет-магазина. Не забудьте проверить, чтоб у вас был установлен компонент MIGX из официального репозитория пакетов.

Если вам необходимо загружать большое количество изображений, следуйте инструкции по созданию галереи MIGX с мультизагрузкой и источником файлов.

Создаем TV параметр, имя «gallery», название «Галерея», делаем доступным для нужного вам шаблона, тип ввода «migx». Тут нас интересуют 2 настройки:

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


[{"caption":"Галерея", "fields": [
    {"field":"image","caption":"Изображение","inputTVtype":"image"},
    {"field":"title","caption":"Название"}
  ]
}]

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


[{
  "header": "Изображение", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"
},
{
  "header": "Название", "sortable": "true", "dataIndex": "title"
}]

Мы создали 2 поля для ввода, изображение и название. В случае, если вы создаете слайдер, можно добавить дополнительные поля, например ссылку на подробное описание. Или же, вы можете убрать поле название.

Сохраняем, заходим в ресурс, который использует шаблон с нашим TV параметром, и в дополнительных полях видим таблицу. С помощью нее мы будем добавлять, редактировать и удалять наши изображения. У меня она выглядит следующим образом (поле «Название» я не использую, добавляются только изображения).

Галерея для MODX Revolution с помощью migx

Заходим в редактирование шаблона, в месте где будет выводится галерея, добавляем вызов сниппета «getImageList» (он устанавливается вместе с компонентом MIGX).

[[getImageList? &tvname=`gallery` &tpl=`gallery_item_tpl`]]

Мы указали параметры:
&tvname — имя TV поля с типом ввода migx
&tpl — чанк, который будет выводить каждую строку из нашей таблицы с галереей
Остальные параметры можно посмотреть в самом сниппете «getImageList».

Нам осталось создать чанк «gallery_item_tpl», содержимое у меня получилось такое:


<a href="[[+image]]" title="[[+title]]" rel="gallery">
	<img src="[[+image:phpthumbon=`w=200&h=150&zc=1`]]" alt="[[+title]]" />
</a>

Обратите внимание, что превью изображений уменьшаются с помощью сниппета «phpthumon», вам нужно его установить или же использовать «phpthumbof». Так же, в моем примере, используется «Fancybox» для увеличения изображений и объединения их в галерею.

Галерея MIGX и источник файлов migxResourceMediaPath


{
  "formtabs":[
    {
      "MIGX_id":1,
      "caption":"Image",
      "print_before_tabs":"0",
      "fields":[
        {
          "MIGX_id":1,
          "field":"image",
          "caption":"Image",
          "description":"",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"image",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"migx",
          "sources":"",
          "inputOptionValues":"",
          "default":"",
          "useDefaultIfEmpty":"0",
          "pos":1
        },
        {
          "MIGX_id":2,
          "field":"title",
          "caption":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a",
          "description":"",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"",
          "default":"",
          "useDefaultIfEmpty":"0",
          "pos":2
        }
      ],
      "pos":1
    }
  ],
  "contextmenus":"edit_migx||duplicate_migx||remove_migx_and_image||movetotop_migx||movetotop_bottom",
  "actionbuttons":"loadfromsource||uploadfiles",
  "columnbuttons":"",
  "filters":"",
  "extended":{
    "migx_add":"Add Image",
    "disable_add_item":1,
    "add_items_directly":"",
    "formcaption":"Image",
    "update_win_title":"",
    "win_id":"resourcegallery",
    "maxRecords":"",
    "addNewItemAt":"bottom",
    "multiple_formtabs":"",
    "multiple_formtabs_label":"",
    "multiple_formtabs_field":"",
    "multiple_formtabs_optionstext":"",
    "multiple_formtabs_optionsvalue":"",
    "actionbuttonsperrow":4,
    "winbuttonslist":"",
    "extrahandlers":"this.handleColumnSwitch",
    "filtersperrow":4,
    "packageName":"",
    "classname":"",
    "task":"",
    "getlistsort":"",
    "getlistsortdir":"",
    "sortconfig":"",
    "gridpagesize":"",
    "use_custom_prefix":"0",
    "prefix":"",
    "grid":"",
    "gridload_mode":1,
    "check_resid":1,
    "check_resid_TV":"",
    "join_alias":"",
    "has_jointable":"yes",
    "getlistwhere":"",
    "joins":"",
    "hooksnippets":"",
    "cmpmaincaption":"",
    "cmptabcaption":"",
    "cmptabdescription":"",
    "cmptabcontroller":"",
    "winbuttons":"",
    "onsubmitsuccess":"",
    "submitparams":""
  },
  "columns":[
    {
      "MIGX_id":1,
      "header":"ID",
      "dataIndex":"MIGX_id",
      "width":10,
      "sortable":"false",
      "show_in_grid":"0",
      "customrenderer":"",
      "renderer":"",
      "clickaction":"",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":"",
      "editor":""
    },
    {
      "MIGX_id":3,
      "header":"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435",
      "dataIndex":"image",
      "width":20,
      "sortable":"false",
      "show_in_grid":1,
      "customrenderer":"",
      "renderer":"this.renderImage",
      "clickaction":"",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":"",
      "editor":""
    },
    {
      "MIGX_id":2,
      "header":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a",
      "dataIndex":"title",
      "width":20,
      "sortable":"false",
      "show_in_grid":1,
      "customrenderer":"",
      "renderer":"",
      "clickaction":"",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":"",
      "editor":"this.textEditor"
    },
    {
      "MIGX_id":4,
      "header":"\u041e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d\u043e",
      "dataIndex":"published",
      "width":"",
      "sortable":"false",
      "show_in_grid":1,
      "customrenderer":"",
      "renderer":"this.renderSwitchStatusOptions",
      "clickaction":"switchOption",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":[
        {
          "MIGX_id":1,
          "name":"published",
          "use_as_fallback":1,
          "value":1,
          "clickaction":"switchOption",
          "handler":"",
          "image":"assets\/components\/migx\/style\/images\/cb_ticked.png"
        },
        {
          "MIGX_id":2,
          "name":"published",
          "use_as_fallback":"",
          "value":1,
          "clickaction":"switchOption",
          "handler":"",
          "image":"assets\/components\/migx\/style\/images\/cb_ticked.png"
        },
        {
          "MIGX_id":3,
          "name":"unpublished",
          "use_as_fallback":"",
          "value":"0",
          "clickaction":"switchOption",
          "handler":"",
          "image":"assets\/components\/migx\/style\/images\/cb_empty.png"
        }
      ],
      "editor":""
    }
  ]
}

Создание галереи с мультизагрузкой и источником файлов MIGX

Перевод оригинальной статьи Using resource-specific mediasource and multifile-uploader with MIGX. Немного переделана конфигурация для MIGX.

Создаем источник файлов

Открываем в верхнем меню пункт «Медиа» — «Источники файлов». Нажимаем «Создать новый источник файлов»:

  • Имя: ResourceMediaPath
  • Тип источника файлов: Файловая система

Сохраняем, в списке находим только что созданный источник, жмем правую кнопку, выбираем «Редактировать». Необходимо отредактировать поля «basePath» и «baseUrl», установить им значение:

[[migxResourceMediaPath? &pathTpl=`assets/resourceimages/{id}/` &createFolder=`1`]]

Необходимо в /assets/ создать директорию resourceimages и установить права на запись.

Создаем TV параметр

  • Вкладка «Общая информация»
    • Имя — resourcealbum
    • Подпись — Галерея
  • Вкладка «Параметры ввода»
    • Тип ввода — migx
    • Конфигурации — resourcealbum
  • Вкладка «Доступно для шаблонов»
    • Отмечаем шаблоны, в которых будет использоваться галерея.
  • Вкладка «Источники файлов»
    • Для нужного контекста (web по умолчанию) устанавливаем созданный в первом шаге источник файлов ResourceMediaPath (двойным кликом по соответствующему полю).

Создаем конфигурацию для MIGX

В верхнем меню переходим в «Приложения» — «MIGX». Переключаемся на вкладку «MIGX» и нажимаем «Добавить элемент». В поле «Name» пишем

resourcealbum, нажимаем кнопку «Выполнено». В списке находим созданную конфигурацию, нажимаем правой кнопкой, выбираем «Экспорт/импорт», в текстовое поле вставляем следующий код:

{
  "formtabs":[
    {
      "MIGX_id":71,
      "caption":"Изображение",
      "print_before_tabs":"0",
      "fields":[
        {
          "field":"title",
          "caption":"Заголовок",
          "MIGX_id":327,
          "pos":1
        },
        {
          "MIGX_id":329,
          "field":"description",
          "caption":"Описание",
          "description":"",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"",
          "default":"test",
          "useDefaultIfEmpty":"0",
          "pos":2
        },
        {
          "MIGX_id":425,
          "field":"image",
          "caption":"Изображение",
          "description":"",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"image",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"none",
          "sourceFrom":"migx",
          "sources":"",
          "inputOptionValues":"",
          "default":"",
          "useDefaultIfEmpty":"0",
          "pos":4
        }
      ],
      "pos":1
    }
  ],
  "contextmenus":"edit_migx||duplicate_migx||remove_migx_and_image||movetotop_migx||movetotop_bottom",
  "actionbuttons":"loadfromsource||uploadfiles",
  "columnbuttons":"",
  "filters":"",
  "extended":{
    "migx_add":"Add Image",
    "disable_add_item":1,
    "add_items_directly":"",
    "formcaption":"Изображение",
    "update_win_title":"",
    "win_id":"resourcegallery",
    "maxRecords":"",
    "addNewItemAt":"bottom",
    "multiple_formtabs":"",
    "multiple_formtabs_label":"",
    "multiple_formtabs_field":"",
    "multiple_formtabs_optionstext":"",
    "multiple_formtabs_optionsvalue":"",
    "actionbuttonsperrow":4,
    "winbuttonslist":"",
    "extrahandlers":"this.handleColumnSwitch",
    "filtersperrow":4,
    "packageName":"",
    "classname":"",
    "task":"",
    "getlistsort":"",
    "getlistsortdir":"",
    "sortconfig":"",
    "gridpagesize":"",
    "use_custom_prefix":"0",
    "prefix":"",
    "grid":"",
    "gridload_mode":1,
    "check_resid":1,
    "check_resid_TV":"",
    "join_alias":"",
    "has_jointable":"yes",
    "getlistwhere":"",
    "joins":"",
    "hooksnippets":"",
    "cmpmaincaption":"",
    "cmptabcaption":"",
    "cmptabdescription":"",
    "cmptabcontroller":"",
    "winbuttons":"",
    "onsubmitsuccess":"",
    "submitparams":""
  },
  "columns":[
    {
      "MIGX_id":1,
      "header":"ID",
      "dataIndex":"MIGX_id",
      "width":10,
      "renderer":"",
      "sortable":"false",
      "show_in_grid":1
    },
    {
      "MIGX_id":2,
      "header":"Заголовок",
      "dataIndex":"title",
      "width":20,
      "sortable":"false",
      "show_in_grid":1,
      "renderer":"",
      "clickaction":"",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":"",
      "editor":"this.textEditor"
    },
    {
      "MIGX_id":3,
      "header":"Изображение",
      "dataIndex":"image",
      "width":20,
      "renderer":"this.renderImage",
      "sortable":"false",
      "show_in_grid":1
    },
    {
      "MIGX_id":4,
      "header":"Опубликовано",
      "dataIndex":"published",
      "width":"",
      "sortable":"false",
      "show_in_grid":1,
      "renderer":"this.renderSwitchStatusOptions",
      "clickaction":"switchOption",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":[
        {
          "MIGX_id":1,
          "name":"publish",
          "use_as_fallback":"",
          "value":1,
          "clickaction":"",
          "handler":"",
          "image":"assets\/components\/migx\/style\/images\/cb_ticked.png"
        },
        {
          "MIGX_id":3,
          "name":"unpublish",
          "use_as_fallback":"",
          "value":"0",
          "clickaction":"",
          "handler":"",
          "image":"assets\/components\/migx\/style\/images\/cb_empty.png"
        }
      ],
      "editor":""
    }
  ]
}

После этого заходит в документ, который будет использовать галерею, в дополнительных полях видим таблицу и 2 кнопки:

  • Load from media source — загрузить все файлы, которые относятся к этому документу. Кнопка полезна, если вы закачиваете изображения по FTP. Для каждого из документов создается директория в assets/resourceimages/ID.
  • Upload Files — открывает диалоговое окно с загрузкой файлов в галерею.

MIGX галерея с мультизагрузкой

Для того, чтобы сделать надписи кнопок на русском языке, можно создать соответствующие записи в лексиконе. Заходим в «Управление словарями», выбираем пространство имен «migx», тема «default», язык «ru» и создаем 2 записи:

  • migx.load_from_source — Загрузить из папки
  • migx.upload_images — Загрузить с компьютера

Необходимо знать

  • Галерея корректно работает только с существующими ресурсами. Для использования с новыми ресурсами, необходимо сначала сохранить документ, чтобы ему был назначен ID.
  • При удалении изображений из таблицы TV поля, они так же удаляются из папки.

Мультизагрузка изображений в админке MODX Revolution при помощи MIGX

В этой статье содержится информация о том, как использовать динамический медиа-источник с собственной автоматически созданной папкой для каждого ресурса. Для одновременной загрузки нескольких файлов мы будем использовать диалог multiupload MODX. Все загруженные файлы будут автоматически добавлены в качестве элементов в сетку MIGX. Удаление элементов приведет к удалению файла изображения.

Шаг 1. Создаем динамический медиа-источник.

В админке переходим в раздел Медиа — Источники файлов.
Создаем новый источник файлов со следующими параметрами:
  • Имя: ResourceMediaPath
  • Тип источника файлов: Файловая система
Редактируем созданный источник файлов:

Вам также может потребоваться создать каталог с разрешениями на запись для php: assets/resourceimages/

Шаг 2. Создаем переменную (TV)

Закладка «Общая информация»
Имя: resourcealbum
Закладка «Параметры ввода»
Тип ввода: migx
Конфигурации: resourcealbum
Закладка «Доступно для шаблонов»
Отмечаем нужный шаблон, к которому будет привязана переменная
Закладка «Источники файлов»
Для вашего контекста (по умолчанию — web) укажите источник файлов ResourceMediaPath

Шаг 3. Создаем конфигурацию

Переходим: Приложения->MIGX->Закладка: MIGX
Создаем новую конфигурацию кликом по «Добавить элемент»
name: resourcealbum
Жмем ‘Выполнено’ для сохранения конфигурации
Кликаем правой кнопкой мыши по созданной конфигурации и выбираем ‘Экспорт/импорт’
Вставляем в поле Json следующий код:
{
  "formtabs":[
    {
      "MIGX_id":71,
      "caption":"Image",
      "print_before_tabs":"0",
      "fields":[
        {
          "field":"title",
          "caption":"Title",
          "MIGX_id":327,
          "pos":1
        },
        {
          "MIGX_id":329,
          "field":"description",
          "caption":"Description",
          "description":"",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"",
          "default":"test",
          "useDefaultIfEmpty":"0",
          "pos":2
        },
        {
          "MIGX_id":330,
          "field":"showBtn",
          "caption":"Show button",
          "description":{
            "field":"showBtn",
            "caption":"Show button",
            "inputTV":"showBtn"
          },
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"checkbox",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"yes==yes",
          "default":"yes",
          "useDefaultIfEmpty":1,
          "pos":3
        },
        {
          "MIGX_id":425,
          "field":"image",
          "caption":"Image",
          "description":"",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"image",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"none",
          "sourceFrom":"migx",
          "sources":"",
          "inputOptionValues":"",
          "default":"",
          "useDefaultIfEmpty":"0",
          "pos":4
        }
      ],
      "pos":1
    }
  ],
  "contextmenus":"edit_migx||duplicate_migx||remove_migx_and_image||movetotop_migx||movetotop_bottom",
  "actionbuttons":"loadfromsource||uploadfiles",
  "columnbuttons":"",
  "filters":"",
  "extended":{
    "migx_add":"Add Image",
    "disable_add_item":1,
    "add_items_directly":"",
    "formcaption":"Image",
    "update_win_title":"",
    "win_id":"resourcegallery",
    "maxRecords":"",
    "addNewItemAt":"bottom",
    "multiple_formtabs":"",
    "multiple_formtabs_label":"",
    "multiple_formtabs_field":"",
    "multiple_formtabs_optionstext":"",
    "multiple_formtabs_optionsvalue":"",
    "actionbuttonsperrow":4,
    "winbuttonslist":"",
    "extrahandlers":"this.handleColumnSwitch",
    "filtersperrow":4,
    "packageName":"",
    "classname":"",
    "task":"",
    "getlistsort":"",
    "getlistsortdir":"",
    "sortconfig":"",
    "gridpagesize":"",
    "use_custom_prefix":"0",
    "prefix":"",
    "grid":"",
    "gridload_mode":1,
    "check_resid":1,
    "check_resid_TV":"",
    "join_alias":"",
    "has_jointable":"yes",
    "getlistwhere":"",
    "joins":"",
    "hooksnippets":"",
    "cmpmaincaption":"",
    "cmptabcaption":"",
    "cmptabdescription":"",
    "cmptabcontroller":"",
    "winbuttons":"",
    "onsubmitsuccess":"",
    "submitparams":""
  },
  "columns":[
    {
      "MIGX_id":1,
      "header":"ID",
      "dataIndex":"MIGX_id",
      "width":10,
      "renderer":"",
      "sortable":"false",
      "show_in_grid":1
    },
    {
      "MIGX_id":2,
      "header":"Title",
      "dataIndex":"title",
      "width":20,
      "sortable":"false",
      "show_in_grid":1,
      "renderer":"",
      "clickaction":"",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":"",
      "editor":"this.textEditor"
    },
    {
      "MIGX_id":3,
      "header":"Image",
      "dataIndex":"image",
      "width":20,
      "renderer":"this.renderImage",
      "sortable":"false",
      "show_in_grid":1
    },
    {
      "MIGX_id":4,
      "header":"Published",
      "dataIndex":"published",
      "width":"",
      "sortable":"false",
      "show_in_grid":1,
      "renderer":"this.renderSwitchStatusOptions",
      "clickaction":"switchOption",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":[
        {
          "MIGX_id":1,
          "name":"published",
          "use_as_fallback":1,
          "value":1,
          "clickaction":"switchOption",
          "handler":"",
          "image":"assets\/components\/migx\/style\/images\/cb_ticked.png"
        },
        {
          "MIGX_id":2,
          "name":"published",
          "use_as_fallback":"",
          "value":1,
          "clickaction":"switchOption",
          "handler":"",
          "image":"assets\/components\/migx\/style\/images\/cb_ticked.png"
        },
        {
          "MIGX_id":3,
          "name":"unpublished",
          "use_as_fallback":"",
          "value":"0",
          "clickaction":"switchOption",
          "handler":"",
          "image":"assets\/components\/migx\/style\/images\/cb_empty.png"
        }
      ],
      "editor":""
    }
  ]
}

Готово, можно использовать

Теперь вы сможете создавать ресурсы-галереи, использовать пакетную загрузку изображений и синхронизировать элементы MIGX с вашими файлами. Для вывода изображений в Front-end используйте стандартные средства MIGX — getImageList:
[[getImageList?
  &tvname=`resourcealbum`
  &tpl=`@CODE:<h4>[[+title]]</h4><img src="[[+image]]" />`
  &where=`{"published":"1"}`
]]
Либо используйте внешний чанк, если предполагается обработка изображений при помощи phpthumb или что-то типа того:
[[getImageList?
  &tvname=`resourcealbum`
  &tpl=`imageTpl`
  &where=`{"published":"1"}`
]]

Все что вы видите выше, написано на основе документации.
Там все отлично описано, но.
Есть нюанс, достаточно неприятный: файлы сохраняются в папку assets/resourceimages/{id}/, но id у ресурса появится только после того, как ресурс будет сохранен. То есть если вы создадите ресурс и попытаетесь загрузить изображения — все они загрузятся в корень сайта. Это плохо. Чтобы не допустить подобного, спрячем наше поле и будем показывать его только для сохраненного документа. В тот момент, когда поле спрятано — отображаем вместо него сообщение с призывом сохранить документ. Встроенного механизма для отображения подобных сообщений в MODX нет, поэтому используем костыль:

Создаем новое TV с именем resourcealbum-fake типа checkbox, в поле «Подпись» или «Описание» размещаем нужный текст (например, «Документ не сохранен! Сохраните документ!»). Так как мы не указали никакой разметки для данного поля — при редактировании документа выведется только подпись и описание поля.

Осталось заставить админку MODX отображать поле resourcealbum-fake и прятать поле resourcealbum при создании документа (до первого сохранения) и наоборот, отображать поле resourcealbum и прятать поле resourcealbum-fake при редактировании документа.

Открываем Сервис — Настройка форм. Жмем «Создать новый профиль». Называем как нравится (gallery, например), ставим галочку «Активный», сохраняем.

На созданном профиле кликаем правой кнопкой мыши — «Редактировать». Теперь нам нужно добавить два набора правил. Жмем «Новый набор павил», действие: «Создать ресурс», шаблон: «Фотогалерея» (выбираете шаблон, к которому привязаны TV resourcealbum и resourcealbum-fake. Сохраняем.

На созданном только что правиле кликаем правой кнопкой мыши — «Редактировать». Выбираем закладку «Дополнительные поля» и снимаем галочку напротив resourcealbum.

Повторяем процедуру для поля resourcealbum-fake:

Открываем Сервис — Настройка форм. На профиле gallery кликаем правой кнопкой мыши — «Редактировать». Жмем «Новый набор правил», действие: «Обновить ресурс», шаблон: «Фотогалерея». Сохраняем.

На созданном только что правиле кликаем правой кнопкой мыши — «Редактировать». Выбираем закладку «Дополнительные поля» и снимаем галочку напротив resourcealbum-fake.

Все, теперь при создании ресурса после выбора шаблона в закладке «Дополнительные поля» вместо поля MIGX с возможностью загрузки изображений будет отображаться надпись «Документ не сохранен! Сохраните документ!».

После сохранения ресурса будет доступен инструментарий для мультизаливки файлов:

[MODx, MIGx] Документация на русском по MIGX

Здесь представлен перевод статей с rtfm.modx.com, а также добавлен из некоторых других источников. Если вы нашли ошибку или опечатку, напишите об этом в комментарии.

Что такое MIGX?

MIGX это специальный тип дополнительных полей (TV), созданный для того чтобы объединить несколько разных TV в один. Такая система объединенных полей очень сильно упрощает администрирование сайта, когда есть необходимость заполнять много информации. Поля ввода в MIGX могут быть всеми стандартными типами — Текст, цифра, выпадающий список, картинка, чекбокс и пр.

Пакет позволяет разработчику гибко настроить структуру и набор используемых полей ввода в рамках одного MIGX-поля.

Дополнение поставляется со снипппетом getImageList, который позволяет быстро и просто вывести данные из заполненного дополнительного поля MIGX

MIGX расшифровывается как MultiItemsGridtv for MODX

Как работает специльный тип дополнительных полей (TV) MIGX

MIGX позволяет хранить сложную структуру данных в едином TV-поле. Данные хранятся в формате JSON. Данная документация предполагает, что вы имеете представление о том, что такое JSON.

Создание первого TV MIGX

Заготовка для конфигурации MIGX находится в директории /core/components/MIGX/examples/. В нижеследующем примере мы будем использовать заготовку «tabs.txt». Эта документация предполагает, что у вас установленно дополнение TinyMCE.

Файл tabs.txt содержит пример реализации простой галереи изображений. Галерея будет состоять из единого элемента, который объединяет в себе одно текстовое поле с редактором (описание изображения), одно поле изображения (само изображение), и короткую строку (заголовок). Все эти данные будут храниться в одном TV-поле.

Шаг 1: Создайте TV MIGX

  • Заполните название, заголовок и все остальное как у любого другого TV-поля.
  • Укажите к какому шаблону относится TV-поле
  • Укажите тип ввода — MIGX

Шаг 2: Настроить поля ввода MIGX
Шаг 2.1: Вкладки формы

Вкладки формы определяет какие поля ввода будут предоставлены пользователю.

Скопируйте содержимое tabs.txt в поле «Вкладки формы»


[
{
    "caption":"Info",
    "fields": [
        {
            "field":"title",
            "caption":"Title"
        },
        {
            "field":"description",
            "caption":"Description",
            "inputTVtype":"richtext"
        }
    ]
},
{
    "caption":"Image",
    "fields":[
        {
            "field":"image",
            "caption":"Image",
            "inputTVtype":"image",
            "sourceFrom":"MIGX"
        }
    ]
}
]

Сейчас мы разберем этот JSON на составляющие чтобы понять что есть что.

  • Первый ключ "caption" отвечает за то какой заголовок будет у вкладки. В данном случае — "Info".
  • Второй ключ "fields" Содержит информаци о полях, доступных для редактирования в этой вкладке.
    • Первый ключ элемента fields — "field". Значение этого ключа соотвествует имени плейсхолдера при выводе данных через getImageList.
    • Второй ключ элемента fields — "caption". Это заголовок, который увидит пользователь, заполняющий данные в панели управления.
    • Третий ключ элемента fields — "inputTVtype". Позволяет указать тип TV (ДАТЬ СПИСОК)(по-умолчанию «text»)
    • Во второй вкладке мы указали "inputTVtype":"image" для того чтобы можно было загружать изображения.
    • "sourceFrom":"MIGX" — если нужно чтобы изображения брались из предустановленного в настройках TV-поля источника файлов.

Ключи для «Вкладки форм»

Ключ Описание
field Имя плейсхолдера, которое можно будет использовать в шаблоне при выводе через getImageList.
caption Заголовок для поля ввода в панели управления.
description Описание поля ввода в панели управления.
inputTVtype Используется для определения типа ввода (по-умолчанию «text»).
inputTV Название TV-поля, которые будет использовано. Например, можем создать ТВ «списко ресурсов», указать тут его название и получим список ресурсов внутри MIGX
default The default value of that field.

Шаг 2.2: Разметка колонок

Мы размечаем колонки чтобы дать пользователю общее представление о том, что содержится внутри элемента.

Скопируйте содержимое columns.txt в поле «Разметка колонок»


[
{"header": "Title", "width": "160", "sortable": "true", "dataIndex": "title"},
{"header": "Image", "width": "50", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"}
]

Ключи для «Разметки колонок»

Ключ Описание
header Название столбца
sortable Можно ли сортировать столбец?
dataIndex Поле, которое вы хотите вывести в этом столбце (значение ключа «field» из Вкладки форм)
renderer Можно использовать средства визуализации для каждого столбца. Например, для того чтобы отображить миниатюры изображений в таблице, должна быть включена функция «this.renderImage».
Возможные значения параметра renderer:
this.renderimage
this.renderImageFromHtml
this.renderPlaceholder
this.renderFirst
this.renderLimited
this.renderCrossTick
this.renderClickCrossTick
this.renderSwitchStatusOptions
this.renderPositionSelector
this.renderRowActions
this.renderChunk
ImagePlus.MIGX_Renderer
this.renderDate
this.renderOptionSelector
editor Cell Editor:
For ingrid-editing, select an Editor for this column.
this.textEditor — simple Text-input
this.listboxEditor — shows a listbox with the input-options of that field

Ввод данных

Шаг 1: Установка

Убедитесь, что вы установили MIGX, настроили MIGX TV, применили его к шаблону, и создал ресурс с этим шаблоном.

Шаг 2: Ввод данных

  1. Зайдите в ваш ресурс, а затем перейдите на вкладку «Дополнительные поля». Вы должны увидеть новое дополнительное поле.
  2. Нажмите на кнопку «Добавить»
    Заполните поля, которые вы определили в настройках дополнительного поля. Если вы не видите никаких полей, убедитесь, что заполнили поле «Вкладки формы» соблюдая синтаксис JSON (Иногда при копировании примеров вы можете вставить неразрывные пробелы вместо обычных, в таком случае JSON не будет валидным)
  3. Нажмите кнопку «Готово»
  4. Нажмите кнопку «Сохранить», чтобы сохранить ресурс

Шаг 3: Изменение данных

Щелкните правой кнопкой мыши на любом элементе. Выберите либо Update, дублировать или удалить.

Шаг 4: Упорядочивание данных

Зажмите и перетащите элемент, чтобы изменить его положение в таблице.

Вывод данных через getImageList

Отображение элементов MIGX

В комплекте с пакетом MIGX поставляется сниппет getImageList, который подходит для вывода данных из заполненного TV MIGX. Не смотря на название он может быть использован не только для вывода изображений, но для всех типов данных. Это что-то вроде getResources, но специально для MIGX.

getImageList может быть использован для организации любой структуры данных, например:

  • галерея изображений
  • слайдер с картинками или HTML
  • табличные данные
  • CSV или XML
  • Что угодно на самом деле

Пример использования getImageList

Давайте выведем изображения, которыми мы заполнили TV MIGX на шаге 2. Вставьте этот код там, где вы хотите увидеть картинки.
    [[getImageList? &tvname=`myMIGXtv` &tpl=`@CODE:<li>[[+idx]]<img src=»[[+image]]»/><p>[[+title]]</p></li> `]]

tvname — название TV-поля. tpl — шаблон вывода. В tpl вы можете указать как название чанка, так и строку кода. Убедитесь, что указали @CODE:, если решили использовать указать шаблон строчно. При использовании чанка достаточно указать только название этого чанка.

Вывод с использованием RezImgCrop:


<li>
  <img src="[[+image:rezimgcrop=`r-250`]]" alt="[[+title]]"/>
</li>

Вывод MIGX TV внутри шаблона getResources


<li>
  <a href="[[~[[+id]]]]">[[+pagetitle]]</a>  
  [[getImageList?
    &tvname=`myMIGXtv`
    &tpl=`thumbTpl`
    &limit=`1`
    &docid=`[[+id]]`
  ]]
</li>

Использование переменных из getResources в getImageList

Если вы хотите использовать переменные, поставляемые в шаблон getResources внутри шаблона getImageList вы можете передать эти данные в параметрах вызова getImageList. Вы можете задать произвольные имена этим параметрам, а вызывать их с помощью конструкции [[+property.myparam1]] в шаблоне getImageList.


[[getImageList?
    &tvname=`myMIGXtv`
    &tpl=`thumbTpl2`
    &docid=`[[+id]]`
    &limit=`1`
    &pagetitle=`[[+pagetitle]]`
    &originalResourceId=`[[+id]]`
]]


<li>
    <a href="[[~[[+property.originalResourceId]]]]">Показать еще изображения от [[+property.pagetitle]]</a>
</li>

Параметры сниппета getImageList

Ключ Описание
tvname Название дополнительного поля, которое нужно вывести
tpl Название чанка для вывода. Можно также использовать конструкции @CODE: или @FILE:. Если оставить поле пустым, то будет выведен массив (как через pront_r в php)
wrapperTpl Название чанка-обертки для результата работы сниппета. Принимает только один плесхолдер — [[+output]]. Как вывести getImageList только если он не пустой
docid ID ресурса, дополнительное поле которого нужно вывести. Пригодится при выводе в шаблоне getResources: &docid=`[[+id]]` [[*id]]
value Можно указать данные в формате JSON, вместо использования данных из TV-поля. Если указан, то docid и code{ignored} игнорируются.
limit Если не ноль, то указывает сколько выводить элементов 0
offset Кол-во элементов, которые нужно пропустить. 0
totalVar Плейсхолдер, содержащий общее количество элементов. Полезно при использовании getPage. total
randomize Укажите &randomize=`1` если хотите организовать вывод в случайном порядке 0
preselectLimit together with &randomize, this will preselect items from top to limit, for images you want to see in any case in ranomized output 5
where Отфильтровать элементы. Пример:
{"active:=":"1","rating:>":"5"}
sort Сортировка может быть по нескольким полям одновременно. Пример:
[{"sortby":"age","sortdir":"DESC","sortmode":"numeric"},
{"sortby":"name","sortdir":"ASC"}]
toPlaceholder Название плейсхолдера, в который следует поместить результат работы сниппета. К примеру есть указать &toPlaceholder=`MIGX`, то результат будет доступен в [[+MIGX]]. Примечание переводчика — почему-то этот плесхолдер не проходит проверку на пустоту. Чтобы решить эту проблему пользуйтесь wrapperTpl
toSeparatePlaceholders Разделяет результат работы сниппета на отдельные плейсолдеры. Например есть указать &toSeparatePlaceholders=`MIGX`, то результат ля каждого элемента будет сохранен в отдельном плейсхолдере: [[+MIGX.1]] [[+MIGX.2]] ……
placeholdersKeyField Применяется только в связке с &toSeparatePlaceholders. Пример: &placeholdersKeyField=`title` — получим [[+MIGX.firsttitle]] [[+MIGX.thirdtitle]] ……
outputSeparator Разделитель у элементов
toJsonPlaceholder output items as json into a placeholder, usefull when you want for example show randomized items on different places.
example: &toJsonPlaceholder=`jsonoutput` -> [[getImagelist? &value=`[[+jsonoutput]]`…………….]]
jsonVarKey example: &jsonVarKey=`MIGX_json` — this will use the value from $_REQUEST[‘MIGX_json’] as value, if any
useful together with the backend-preview-feature		 MIGX_outputvalue

Доступные плейсхолдеры в шаблоне вывода getImageList

Ключ Описание
[[+fieldname]] Подставьте вместо ‘fieldname’ заданное вами значение поля
[[+idx]] Индекс текущего элемента. Начинается всегда с 1
[[+_first]] Содержит 1 если это первый элемент
[[+_last]] Возвращает 1 если это последний элемент
[[+_alt]] Возвращает 1 для каждого второго элемента
[[+total]] Возвращает общее кол-во элементов, можно заменить ‘total’ настройкой &totalVar
[[+property.name]] Можно использовать любые переданные параметры. К примеру если вы указали &docid=`20`, то [[+property.docid]] вернет 20

Продвинутое использование

Динамическая замена шаблона

Используя &tpl=`@FIELD:` можно установить любое поле шаблоном для вывода.


[[getImageList?
 &tvname=`myMIGXtv`
 &tpl=`@FIELD:mytplfield`
]]

Если вы определили поле «mytplfield» в настройках MIGX TV, getImageList будет использовать значение этого поля как шаблон для вывода данного элемента. Шаблон внутри поле «mytplfield» должен быть точно таким же, как содержание чанка, используемого обычно в &tpl=`chankname`.

Как сделать галерею в MIGx с разными слайдами? — Хабр Q&A

Ребят, столкнулся с нестандартной задачей. Нужно сделать сложный слайдер, а не могу сообразить как это сделать, так как знаком с MIGx на уровне создания простых слайдеров с мультизагрузкой.В общем вот код слайдера
<div>
							<div>
								<img src="images/article/img.png" alt="">
							</div>
							<div>
								<div>
									<div>
										<div>1</div>/
										<div></div>
									</div>
									<div>
										<p>Вопросы развития курортной медицины обсудили на конференции в Горячем Ключе</p>
									</div>
								</div>
								<div>
									<div>
										<img src="images/article/img.png" alt="">
									</div>
									<div>
										<img src="images/article/img.png" alt="">
									</div>
									<div>
										<img src="images/article/img.png" alt="">
									</div>
									<div>
										<img src="images/article/img.png" alt="">
									</div>
									<div>
										<img src="images/article/img.png" alt="">
									</div>
									<div>
										<img src="images/article/img.png" alt="">
									</div>
									<div>
										<img src="images/article/img.png" alt="">
									</div>
									<div>
										<img src="images/article/img.png" alt="">
									</div>
									<div>
										<img src="images/article/img.png" alt="">
									</div>
									<div>
										<img src="images/article/img.png" alt="">
									</div>
									<div>
										<img src="images/article/img.png" alt="">
									</div>
									<div>
										<img src="images/article/img.png" alt="">
									</div>
									<div>
										<img src="images/article/img.png" alt="">
									</div>
									<div>
										<img src="images/article/img.png" alt="">
									</div>
									<div>
										<img src="images/article/img.png" alt="">
									</div>
								</div>
							</div>
						</div>

Дело в том, что первый слайд идет в большом размере

Вид сверстанного слайдера

Подскажите как мне нужно сделать чанк (пробывал

[[+idx:is=`1`:is=`0`:then=`<div><img src="images/article/img.png" alt=""></div>`]]
но не работает(

Заранее благодарен.

MODX Revo — Создание слайдеров при помощи MIGX (Bootstrap 3/4 carusel)

Автор Алексей На чтение 7 мин. Опубликовано

Последнее изменение поста: 22 октября 2018 в 20:00

Сегодня мы разберем как при помощи MIGX создать Bootstrap слайдер. Перед началом изучения, рекомендую сначала посетить этот урок.

Создание MIGX конфигурации

Идем в управление MIGX и добавляем новый элемент с именем slider, в поле замены пишем «Добавить слайды» и переходим на вкладку «Formtabs».

Добавляем конфигурацию

Далее идем на вкладку «Columns» и точно также заполняем значения:

добавление TV полей в конфигурацию migx

  • Fieldname – zagolovok, Caption – Заголовок.
  • Fieldname – slide, Caption – Слайд, Input TV Type – image.
  • Fieldname – opisanie, Caption – Описание.
  • Fieldname — idstranici, Caption – Укажите id документа на который ссылаться.

Заполненная таблица

Далее идем во вкладку «Columns» и точно также заполняем значения:

создание колонок для TV полей в конфигурации migx

  • Header – Заголовок, Field – zagolovok.
  • Header – Слайд, Field – slide, Renderer – this.renderImage.
  • Header – Описание, Field – opisanie.
  • Header – id документа, Field – idstranici.

Примечание: По сути мы переносим элементы с Formtabs. Да так же можете заполнять поля Column width – ширину столбцов.

Сохраняем (выполнить).

Для тех кто вообще не хочет париться, создаем пустую конфигурацию и экспортируем в нее следующий код:

{
  "formtabs":[
    {
      "MIGX_id":1,
      "caption":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u044b",
      "print_before_tabs":"0",
      "fields":[
        {
          "MIGX_id":1,
          "field":"zagolovok",
          "caption":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a",
          "description":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u043b\u0430\u0439\u0434\u0430",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"",
          "default":"",
          "useDefaultIfEmpty":"0",
          "pos":1
        },
        {
          "MIGX_id":2,
          "field":"slide",
          "caption":"\u0421\u043b\u0430\u0439\u0434",
          "description":"",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"image",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"",
          "default":"",
          "useDefaultIfEmpty":"0",
          "pos":2
        },
        {
          "MIGX_id":3,
          "field":"opisanie",
          "caption":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435",
          "description":"",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"",
          "default":"",
          "useDefaultIfEmpty":"0",
          "pos":3
        },
        {
          "MIGX_id":4,
          "field":"idstranici",
          "caption":"\u0423\u043a\u0430\u0436\u0438\u0442\u0435 id \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f",
          "description":"",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"",
          "default":"",
          "useDefaultIfEmpty":"0",
          "pos":4
        }
      ],
      "pos":1
    }
  ],
  "contextmenus":"",
  "actionbuttons":"",
  "columnbuttons":"",
  "filters":"",
  "extended":{
    "migx_add":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u044b",
    "disable_add_item":"",
    "add_items_directly":"",
    "formcaption":"",
    "update_win_title":"",
    "win_id":"",
    "maxRecords":"",
    "addNewItemAt":"bottom",
    "media_source_id":"",
    "multiple_formtabs":"",
    "multiple_formtabs_label":"",
    "multiple_formtabs_field":"",
    "multiple_formtabs_optionstext":"",
    "multiple_formtabs_optionsvalue":"",
    "actionbuttonsperrow":4,
    "winbuttonslist":"",
    "extrahandlers":"",
    "filtersperrow":4,
    "packageName":"",
    "classname":"",
    "task":"",
    "getlistsort":"",
    "getlistsortdir":"",
    "sortconfig":"",
    "gridpagesize":"",
    "use_custom_prefix":"0",
    "prefix":"",
    "grid":"",
    "gridload_mode":1,
    "check_resid":1,
    "check_resid_TV":"",
    "join_alias":"",
    "has_jointable":"yes",
    "getlistwhere":"",
    "joins":"",
    "hooksnippets":"",
    "cmpmaincaption":"",
    "cmptabcaption":"",
    "cmptabdescription":"",
    "cmptabcontroller":"",
    "winbuttons":"",
    "onsubmitsuccess":"",
    "submitparams":""
  },
  "columns":[
    {
      "MIGX_id":1,
      "header":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a",
      "dataIndex":"zagolovok",
      "width":100,
      "sortable":"false",
      "show_in_grid":1,
      "customrenderer":"",
      "renderer":"",
      "clickaction":"",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":"",
      "editor":""
    },
    {
      "MIGX_id":2,
      "header":"\u0421\u043b\u0430\u0439\u0434",
      "dataIndex":"slide",
      "width":100,
      "sortable":"false",
      "show_in_grid":1,
      "customrenderer":"",
      "renderer":"this.renderImage",
      "clickaction":"",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":"",
      "editor":""
    },
    {
      "MIGX_id":3,
      "header":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435",
      "dataIndex":"opisanie",
      "width":200,
      "sortable":"false",
      "show_in_grid":1,
      "customrenderer":"",
      "renderer":"",
      "clickaction":"",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":"",
      "editor":""
    },
    {
      "MIGX_id":4,
      "header":"id \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430",
      "dataIndex":"idstranici",
      "width":50,
      "sortable":"false",
      "show_in_grid":1,
      "customrenderer":"",
      "renderer":"",
      "clickaction":"",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":"",
      "editor":""
    }
  ],
  "category":""
}

Создание TV с конфигурацией MIGX

В дереве MODX на вкладке «Элементы», нажмите + напротив пункта «Дополнительные поля» и вводим следующее:

Создаем TV с migx конфигурацией

 

  • «Имя» — slider; «Подпись» — Слайдер.
  • Во вкладке «Параметры ввода» в «Тип ввода» выбираем migx, а в поле «Конфигурации» вводим slider.
  • Во вкладке «Доступно для шаблонов» выбираем те шаблоны, для которых будет доступен ввод в это поле.

задаем конфигурацию для TV поля

Ввод данных

Откроем документ, для которого присвоено поле slider с MIGX с конфигурацией и введём в него какие-нибудь данные.

вводим данные в tv migx

Вывод bootstrap 3 carusel на страницу

Html разметка у нас стандартная getbootstrap.com/docs/3.3/javascript/#carousel-examples, переделаем ее под MIGX и в необходимое место в шаблоне пропишем следующий код:

<div data-ride="carousel">
  <ol>
    [[getImageList? &tvname=`slider` &tpl=`tplsliderIndicator`]]
  </ol>
  <div role="listbox">
    [[getImageList? &tvname=`slider` &tpl=`tplsliderItem`]]
  </div>
  <a href="#carousel-example-generic" role="button" data-slide="prev">
    <span aria-hidden="true"></span>
    <span>Предыдущий</span>
  </a>
  <a href="#carousel-example-generic" role="button" data-slide="next">
    <span aria-hidden="true"></span>
    <span>Следующий</span>
  </a>
</div>

И создаем чанки:

tplsliderIndicator:

<li data-target="#carousel" data-slide-to="[[+idx:subtract]]" [[+idx:is=`1`:then=`class="active"`]]></li>

и чанк tplsliderItem со следующим содержимым:

<div>
  <img src="[[+slide]]" alt="[[+zagolovok]]">
  <div>
    <h4>[[+zagolovok]]</h4>
    <p>[[+opisanie]]</p>
    <a href="[[~[[+idstranici]]]]">Подробнее</a>
  </div>
</div>

Вывод bootstrap 4 carusel на страницу

Как и в предыдущем случае, берем стандартную разметку getbootstrap.com/docs/4.1/components/carousel/ и переделываем ее, в итоге получаем

<div data-ride="carousel">
    <ol>
        [[getImageList? &tvname=`slider` &tpl=`tplsliderIndicator`]]
    </ol>
    <div role="listbox">
        [[getImageList? &tvname=`slider` &tpl=`tplsliderItem`]]
    </div>
    <a href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span aria-hidden="true"></span>
        <span>Предыдущий</span>
    </a>
    <a href="#carouselExampleIndicators" role="button" data-slide="next">
        <span aria-hidden="true"></span>
        <span>Следующий</span>
    </a>
</div>

Где чанк tplsliderIndicator имеет следующий код:

<li data-target="#carouselExampleIndicators" data-slide-to="[[+idx:subtract]]" [[+idx:is=`1`:then=`class="active"`]]></li>

и чанк tplsliderItem со следующим кодом:

<div`]]">
    <div>
        <h4>[[+zagolovok]]</h4>
        <p>[[+opisanie]]</p>
        <a href="[[~[[+idstranici]]]]">Подробнее</a>
    </div>
</div>

Все!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *