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

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

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

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

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

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

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

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

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

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

В верхнем меню переходим в "Приложения" - "MIGX". Переключаемся на вкладку "MIGX" и нажимаем "Добавить элемент". В поле "Name" пишем resourcealbum, нажимаем кнопку "Выполнено". В списке находим созданную конфигурацию, нажимаем правой кнопкой, выбираем "Экспорт/импорт", в текстовое поле вставляем следующий код:

json
{
  "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 поля, они так же удаляются из папки.