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

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

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

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

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

Редактируем созданный источник файлов:

• прописываем значения для basepath и baseurl:

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

Вам также может потребоваться создать каталог с разрешениями на запись для 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:<h3>[[+title]]</h3><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 с возможностью загрузки изображений будет отображаться надпись «Документ не сохранен! Сохраните документ!».

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