Мультизагрузка изображений в админке 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. Создаем конфигурацию

  1. Переходим: Приложения->MIGX->Закладка: MIGX
  2. Создаем новую конфигурацию кликом по "Добавить элемент"
    • name: resourcealbum
  3. Жмем 'Выполнено' для сохранения конфигурации
  4. Кликаем правой кнопкой мыши по созданной конфигурации и выбираем  'Экспорт/импорт'
  5. Вставляем в поле 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></h3><img src="" />`
  &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 с возможностью загрузки изображений будет отображаться надпись "Документ не сохранен! Сохраните документ!".


Теги: админка, getImageList, MIGX, Revolution, изображения

Сообщение отправлено

Закрыть