Галерея с помощью MIGX

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

Для чего?

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

Реализовать это можно с помощью MIGX. Конечно, там будут свои недостатки, но для небольших проектов самое то. В итоге будет это:

  • Динамический источник файлов
  • Автоматом будет создавать папку для каждого ресурса.
  • Возможность загрузки сразу нескольких файлов
  • Все загруженные файлы будут автоматом добавлены  в качестве элементов MIGX
  • При удаление элементов изображения будут удаляться из папки тоже

И так начнем.

Для начала создадим конфигурацию MIGX.

  • Переходим в MIGX -> Вкладка MIGX -> Добавить элемент. В поле "Name" впишем "resourcegallery" и нажимаем "Выполнено"
  • Затем кликаем правой кнопкой мыши по только что созданной конфигурации "resourcegallery" -> Экспорт/Импорт. И вставляем приведенный ниже код в поле "Json"
  • Теперь нужно создать источник файлов Медиа -> Источники файлов -> Создать новый источник файлов. Имя на ваше усмотрение, например "resources" Тип источника файлов - файловая система. Параметры:
  • basePath = [[!migxResourceMediaPath? &pathTpl=`assets/images/res/{id}/` &createFolder=`1` ]]
  • basePathRelative = Да
  • baseUrl = [[!migxResourceMediaPath? &pathTpl=`assets/images/res/{id}/` &createFolder=`1`]]
  • baseUrlRelative = Да
  • allowedFileTypes = у меня пусто
  • imageExtensions = jpg,jpeg,png,gif
  • thumbnailType = PNG
  • thumbnailQuality = 90
  • skipFiles = .svn,.git,_notes,nbproject,.idea,.DS_Store
  • Теперь создаем новое ТВ (Дополнительное поле) и назначаем его для нужного нам шаблона. Имя нашего тв будет "gallery". На вкладке параметры ввода указываем:
  • Тип ввода "migx"
  • Конфигурации "resourcegallery"
  • На вкладке источник файлов указываем наш созданный источник "resources"

Собственно все, уже должно работать. Не забудьте создать саму папку для ресурсов, у меня она называется "res" и лежит "assets/images/res/". т.е то что мы указали в basePath и baseUrl.

И еще

Кнопка "Load from mediasource" будет загружать в migx картинки находящиеся по адресу "assets/images/res/id папки текущего ресурса". т.е можно находясь на нужном нам ресурсе загрузить картинки с помощью источника файлов а затем нажав на эту кнопку они подгрузяться в migx.

А кнопка "Upload Files" будет сразу загружать картинки с помощью загрузчика Modx.

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

  • migx.load_from_source
    • Пространство имен migx
    • Тема default
    • Язык ru
    • Значение "Импорт из файловой системы"
  • migx.upload_images
    • Пространство имен migx
    • Тема default
    • Язык ru
    • Значение "Загрузить файлы"

Вывод на той-же(текущей) странице

    [[getImageList? 
      &tvname=`gallery`
      &tpl=`@CODE: <img src="[[+image]]" alt="[[+title]]">`
      &where=`{"published":"1"}`
    ]]

Вывод в другом месте с помошью pdoTools например

    [[getImageList? 
      &tvname=`gallery`
      &docid=`[[+id]]`
      &tpl=`@CODE: <img src="[[+image]]" alt="[[+title]]">`
      &where=`{"published":"1"}`
    ]]

Тут мы дополнительно передаем "docid" т.е id ресурса с которого нужно выводить изображения.


Комментарии (4)


  • Radik 05 ноября 2017, 22:16 #
    +1
    Все супер! но появилась проблема, иногда когда загружаю фото с Upload Files не создается новая папка и все картинки загружаются в корень сайта
    • Петр 05 ноября 2017, 22:45 #
      +1
      В источнике файлов заполнил поля basePath и baseUrl?
    • Владислав 05 марта 2018, 03:02 #
      0
      Здравствуйте!
      следовал Вашей инструкции
      в итоге после загрузки
      фотографии не отображаются на сайте, хотя загружаются
      не поможете?
      • Петр 12 марта 2018, 10:50 #
        0
        Проверьте правильно ли отображаются пути к изображениям.

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