MODx EVO уже далеко не новичок среди CMS, за 10 лет существования оброс различными плагинами и модулями позволяющими упростить методы организации работ с различными данными. Сегодня мы поговорим о менеджерах изображений, точнее о самом перспективном из бесплатных, по моему скромному мнению - SimpleGallery. До недавнего времени для реализации галерей я использовал модуль EvoGallery. При всех его достоинствах и недостатках, есть два момента которые меня постоянно напрягали и напоминали, что не стоит забывать о поиске альтернативы этому модулю. Первый – единый размер ресайза для всех галерей, в модуле отсутствовали стандартные методы, при помощи которых можно было бы задать отдельным галереям разные размеры, как изображений, так и превьюшек. Второй – использование flash в бекенде загрузчика изображений. Все эти недостатки компенсировала простая установка и настройка, буквально в два клика. Но время не стоит на месте, и появилась реальная альтернатива лишенная всех недостатков приведенных выше – SimpleGallery. Единственное НО – для рядового неискушенного пользователя установка может превратиться в пытку. Впервые я узнал об этой галерее от нескольких знакомых, они попросили помочь с ее установкой, так как в отличии от EvoGallery самостоятельные попытки установки у них не увенчались успехом. Забегая наперед скажу что разобравшись со всеми нюансами последующая установка не вызовет особых вопросов если скрупулезно и четко действовать пошагово. Но да, бочка дегтя в том, что для успешной интеграции галереи вам потребуется внимательность и «включить мозги», так как у разработчика отсутствует пошаговый мануал «для идиотов» по установке.

Введение в SimpleGallery

SimpleGallery  - это перспективная, легкая  и универсальная галерея в основе которой - DocLister, MODxAPI, EasyUI. Разработчиком заявлены такие возможности:

• управление картинками на странице ресурса в отдельной вкладке;
• пагинация с возможностью выбора количества картинок на странице;
• загрузка множества картинок — можно кнопкой, можно перетаскиванием (используется jquery.fileapi)
• уменьшение картинок при загрузке до значений, указанных в конфигурации сайта;
• поворот картинок в соответствии с EXIF;
• предварительная обработка на стороне клиента;
• транслитерация и присваивание уникальных имен при загрузке файлов (как в KCFinder);
• картинки можно удалять по одной, можно выделить (ctrl+click, shift+click, ctrl+a) и удалить несколько;
• картинки можно перемещать в начало/конец текущей галереи, можно перемещать в другую галерею;
• сортировка перетаскиванием (используется библиотека Sortable;
• редактирование в окошке по двойному клику (как в ms2Gallery);
• интерфейс можно перевести на разные языки, в наличии русский и английский;
• кэширование картинок в админке браузером для ускорения работы;
• система событий для обработки элементов галереи, в том числе реализована возможность принудительной обработки («обновить превью»);
• возможность менять интерфейс и логику работы плагина без правок исходников (подробности).

Более подробно о работе галереи, ее настройках вы можете прочитать на ее персональной странице SimpleGallery.  Мы же подробно остановимся на ее пошаговой установке.

Шаг 1 - Установка DocLister

Основные требования для работы данной галереи это наличие PHP 5.3, MODxAPI и DocLister. Почему PHP 5.3 поймете чуть позже, остановимся подробнее на  MODxAPI и DocLister.
DocLister это сниппет для вывода информации из различных таблиц. Изначально разрабатывался как замена сниппета Ditto, но в итоге существенно превзошел его в возможностях, гибкости и производительности. При этом в простых случаях использовать DocLister не сложнее, чем Ditto (многие параметры совпадают). Для работы DocLister требуется PHP 5.3 или выше. Собственно вопрос о минимальных требованиях на сервере версии 5.3 теперь наверно у большинства не актуален, но все таки стоит проверить параметры вашего сервера при помощи  phpinfo().
MODxAPI - попытка реализовать паттерн Data mapper. Изначально проектировалось как замена библиотеки DocManager, но в итоге оптимизирован код и заложен потенциал для создания обертки с произвольной логикой для любых таблиц. MODxAPI идет в комплекте с DocLister.

Установка:

1. Качаем DocLister с Github.
2. Разархивируйте в любую папку. Нам необходимы будут папки «assets» и «install».
3. Все что в папке «assets» копируем в соответствующие директории папки «assets» на сервере. Например, в разархивированной папке, в директории «\assets\snippets» есть три папки: «DLUsers», «DocLister», «summary», и вы их так же переносите на сервер в директорию «\assets\snippets». Не поленитесь и проверьте внимательно еще раз, все ли папки и файлы перенесли, большинство проблем были именно на этой стадии из-за невнимательности при переносе.
4. Теперь работаем с папкой «install» -  в ней лежат в соответствующих директориях сниппеты и плагины, которые нам потребуется установить, они находятся в файлах вида «название.tpl»
   Нам понадобится установить такие - плагин: MODxAPI, сниппет: DocLister.
   
   Установка плагина MODxAPI: открываем «MODxAPI.tpl» при помощи редактора Notepad++ или его аналогов, в админке создаем новый плагин «Элементы>Управление элементами>Новый плагин», заполняем строки.
   
   Вкладка «Общие»:
   Название плагина: «MODxAPI»
   Описание: «MODxAPI»
   Код плагина (php): вставляете код с файла «MODxAPI.tpl»
   
   Вкладка «Системные события»:
   Отмечаем галочкой такие события: OnWebPageInit, OnManagerPageInit, OnPageNotFound
   Сохраняем плагин.
   
   Установка сниппета DocLister: открываем «DocLister.tpl» при помощи редактора Notepad++ или его аналогов, в админке создаем новый сниппет «Элементы>Управление элементами>Новый сниппет», заполняем строки.
   
   Вкладка «Общие»:
   Название сниппета: «DocLister»
   Описание: «Snippet to display the information of the tables by the description rules. The main goal - replacing Ditto and CatalogView.»
   Код сниппета (php) вставляете код с файла «DocLister.tpl»
   Сохраняем сниппет.

Все,  установка DocLister завершена. При ручной установке стоит обратите внимание, что название плагинов и сниппетов должно быть полностью идентичным названию в файле, включая регистр.

Шаг 2 – Установка SimpleGallery

Логика установки во многом аналогична установке DocLister, но будут и свои нюансы.

Установка:

1. Качаем галерею по ссылке — github.com/Pathologic/SimpleGallery/
2. Разархивируйте в любую папку. Нам необходимы будут папки «assets» и «install».
3. Все что в папке «assets» копируем в соответствующие директории папки «assets» на сервер. Действуйте аналогично примеру приведенному при установке DocLister. Не поленитесь и проверьте внимательно еще раз, все ли папки и файлы перенесли.
4. Теперь работаем с папкой «install» -  в ней лежат в соответствующих директориях сниппеты и плагины, которые нам потребуется установить, они находятся в файлах вида «название.tpl»
   Нам понадобится установить такие плагины: sgThumb, SimpleGallery, сниппеты: sgController, sgLister, sgThumb.
   
   Установка плагина SimpleGallery: открываем «simplegallery.tpl» при помощи редактора Notepad++ или его аналогов, в админке создаем новый плагин «Элементы>Управление элементами>Новый плагин», заполняем строки.
   
   Вкладка «Общие»:
   Название плагина: «SimpleGallery»
   Описание: «Plugin to create image galleries»
   Код плагина (php): вставляете код с файла «simplegallery.tpl»
   
   Вкладка «Конфигурация»:
   Конфигурация плагина: вставляем текст который в кавычках - «&tabName=Tab name;text;SimpleGallery &controller=Controller class;text; &templates=Templates;text; &documents=Documents;text; &ignoreDoc=Ignore Documents;text; &role=Roles;text; &folder=Galleries folder;text;assets/galleries/ &thumbsCache=Thumbs cache folder;text;assets/.sgThumbs/   &w=Thumbs width;text;140 &h=Thumbs height;text;105  &customThumbOptions=Custom thumb options;text; &clientResize=Client Resize;list;No,Yes;No». Нажимаем обновить параметры –получите таблицу с настройками плагина.
   
   Вкладка «Системные события»:
   Отмечаем галочкой такие события: OnDocFormRender, OnEmptyTrash
   Сохраняем плагин.
   
   Установка плагина sgThumb: открываем «sgThumb.tpl» при помощи редактора Notepad++ или его аналогов, в админке создаем новый плагин «Элементы>Управление элементами>Новый плагин», заполняем строки.
   
   Вкладка «Общие»:
   Название плагина: «sgThumb»
   Описание: «Plugin to create thumbnails for SimpleGallery images»
   Код плагина (php): вставляете код с файла « sgThumb.tpl»
   
   Вкладка «Конфигурация»:
   Конфигурация плагина: вставляем текст который в кавычках - «&tconfig=Thumbnails Configuration;textarea;[{"template":10, "options":"w%3D960%26h%3D270%26zc%3D1%26q%3D96%26f%3Djpg", "folder":"slider"},{"template":11, "options":"w%3D760%26h%3D300%26zc%3D1%26q%3D96%26f%3Djpg", "folder":"slider"},{"template":12, "options":"w%3D90%26h%3D300%26zc%3D1%26q%3D96%26f%3Djpg", "folder":"slider"}] ». Нажимаем обновить параметры – получите таблицу с настройками плагина.
   Привязанный файл: «simplegallery/plugin.sgthumb.php»
   
   Вкладка «Системные события»:
   Отмечаем галочкой такие события: OnFileBrowserUpload, OnSimpleGalleryRefresh, OnSimpleGalleryDelete
   Сохраняем плагин.
   
   Установка сниппета sgController: открываем «sgController.tpl» при помощи редактора Notepad++ или его аналогов, в админке создаем новый сниппет «Элементы>Управление элементами>Новый сниппет», заполняем строки.
   
   Вкладка «Общие»:
   Название сниппета: «sgController»
   Описание: «use sg_site_content controller for DocLister.»
   Код сниппета (php) вставляете код с файла «sgController.tpl»
   
   Вкладка «Свойства»:
   Привязанный файл: «simplegallery/sgController.php»
   Сохраняем сниппет.
   
   Установка сниппета sgLister: открываем «sgLister.tpl» при помощи редактора Notepad++ или его аналогов, в админке создаем новый сниппет «Элементы>Управление элементами>Новый сниппет», заполняем строки.
   
   Вкладка «Общие»:
   Название сниппета: «sgLister»
   Описание: «Snippet DocLister wrapper for SimpleGallery table.»
   Код сниппета (php) вставляете код с файла « sgLister.tpl»
   
   Вкладка «Свойства»:
   Привязанный файл: «simplegallery/sgLister.php»
   Сохраняем сниппет.
   
   Установка сниппета sgThumb: открываем «sgThumb.tpl» при помощи редактора Notepad++ или его аналогов, в админке создаем новый сниппет «Элементы>Управление элементами>Новый сниппет», заполняем строки.
   
   Вкладка «Общие»:
   Название сниппета: «sgThumb»
   Описание: «Snippet for get thumbnails for SimpleGallery»
   Код сниппета (php) вставляете код с файла «sgThumb.tpl»
   Вкладка «Свойства»:
   Привязанный файл: «simplegallery/sgThumb.php»
   Сохраняем сниппет.

Все,  установка SimpleGallery завершена. При ручной установке стоит обратите внимание, что название плагинов и сниппетов должно быть полностью идентичным названию в файле, включая регистр.

Теперь кратко рассмотрим основные настройки для полноценной работы галереи.
Настройки плагина SimpleGallery отвечающие за параметры галереи в админке находятся во вкладке «Конфигурация»:

• Tab name — название вкладки;
• Controller class — имя доступного класса-контроллера;
• Templates — id шаблонов ресурсов. обязательно к заполнению (указываются через запятую – например «10,11,12»);
• Documents — то же самое, но для отдельных ресурсов (указываются через запятую – например «5,8,9»);
•  Ignore Documents — id исключаемых ресурсов (указываются через запятую – например «1,15,16»);
• Roles — id разрешенных ролей;
• Galleries folder — папка для хранения галерей;
• Thumbs cache folder — папка для превью (тех, что в админке);
• Thumbs width — ширина превью;
• Thumbs height — и высота;
• Custom thumb options — здесь при необходимости можно указать параметры phpthumb для генерации превьюшек в админке; плейсхолдеры [+w+] и [+h+] содержат значения параметров Thumbs width и Thumbs height;
• Client Resize — предварительная обработка картинок на стороне клиента.

Более подробно о синтаксисе вывода вы можете почитать у автора галереи - http://modx.im/blog/docs/2762.html

Настройки универсального и гибкого плагина sgThumb отвечающего за создание превьюшек/изображений с индивидуальными настройками находятся во вкладке «Конфигурация»:
Пример Thumbnails Configuration: «[{"template":10,"options":"w=960&h=270&zc=1&q=96&f=jpg","folder":"slider"},

{"template":11,"options":"w=760&h=300&zc=1&q=96&f=jpg","folder":"slider"},

{"template":12,"options":"w=90&h=300&zc=1&q=96&f=jpg","folder":"slider"}

]»

• template – id шаблона
• options – настройки по созданию изображений/превью,
  возможные параметры:
   w - высота,
  h  - ширина ,
  bg – цвет фона в Hex (например «bg=FFFFFF»),
  zc – кроппинг, обрезка картинки, значения: 1 если необходима обрезка, или 0 если нет - фото будет уменьшено пропорционально и приведено к высоте заданной в настройках,
  q – качество сжатия сохраняемой картинки,
  f – тип выводимого изображения
• folder – папка где будут размещаться созданные изображения/превью, в нашем случае в папке «slider», она будет расположена в папке, директория которой указана в конфигурации плагина SimpleGallery в параметре «Galleries folder»

Рассмотрим простейший пример вывода «[[sgLister? &thumbSnippet=`sgThumb` &thumbOptions=`slider`  &parents=`16` &tpl=`slider2_temlpate` &display=`6`  ]]»

• &thumbSnippet - имя сниппета, который вернет ссылку на превью,в нашем случае sgThumb
• &thumbOptions - параметры для создания превью, в нашем случае папка где будут размещаться созданные изображения/превью, должна совпадать с названием диркетории плагина sgThumb
• &parents – id документа, в котором расположена выводимая галерея
• &tpl – чанк с шаблоном вывода картинок, в чанке можно использовать такие плейсхолдеры:
  [+thumb.sg_image+], [+thumb.width.sg_image+], [+thumb.height.sg_image+] — превьюшка и ее размеры;
  [+e.sg_title+] и [+e.sg_description+]- экранируемые значения полей sg_title и sg_description, преобразованы в html-сущности чтобы не поломать случайно верстку кавычками или скобками, если же вам надо вывести html код с данных полей - [+sg_title+] и [+sg_description+];
  [+properties.имя_свойства+] — свойства картинки из поля sg_properties.
  Использовать поле [+thumb.sg_image+] можно, если при вызове добавлены параметры: &thumbSnippet; &thumbOptions. 
• &display - максимальное число документов при выборке.

Если вы внимательно и пошагово выполнили все действия - у вас гарантированно будет рабочая галерея. Более подробно  функционал и синтаксис описан автором галереи по ссылке http://modx.im/blog/docs/2762.html