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