Выбор языка

  • NARDOdesign
  • NARDOdesign
  • NARDOdesign

NARDOdesign NARDOdesign NARDOdesign NARDOdesign NARDOdesign

  • В помощь вебмастеру

    | ЛИКБЕЗ |

    В помощь вебмастеру

    В данном разделе представлены статьи, раскрывающие основные моменты работы вебмастера с сайтом, а также базовые моменты при разработке сайтов

  • Полезные веб-ресурсы

    | ЗАКЛАДКИ |

    Полезные веб-ресурсы

    Обзор полезных вебресурсов для разработчика и вебмастера различной тематики

  • Уроки и мастер-классы по разработке

    | ТУТОРИАЛЫ |

    Уроки и мастер-классы по разработке

    Уроки по разработке сайтов, уроки фотошоп, графические темплейты от «NARDOdesign»

  • Шаблоны HTML и CSS

    | ТЕМПЛЕЙТЫ |

    Шаблоны HTML и CSS

    Различные HTML шаблоны, CSS, веб-верстка от «NARDOdesign»

  • JQuery, JavaScript, Mootools

    | JAVASCRIPT |

    JQuery, JavaScript, Mootools

    Различные JavaScript решения, содержащие самые популярные библиотеки на основе jQuery, Mootools, HTML5 и CSS

  • Графика и дизайн

    | ГРАФИКА |

    Графика и дизайн

    Уроки фотошоп, графические темплейты , изображения, иконки, векторные и растровые файлы, PSD, кисти и многое другое

  • Продвижение и оптимизация сайтов

    | СЕО |

    Продвижение и оптимизация сайтов

    Уроки по основам продвижения и оптимизации сайтов, продвижение сайтов, вывод в топ, поддержка позиций, SEO от «NARDOdesign»

  • Всякая всячина

    | ОФФТОП |

    Всякая всячина

    Статьи не связанным с основной тематикой моего блога

Next
  • В помощь вебмастеру
  • Полезные веб-ресурсы
  • Уроки и мастер-классы по разработке
  • Шаблоны HTML и CSS
  • JQuery, JavaScript, Mootools
  • Графика и дизайн
  • Продвижение и оптимизация сайтов
  • Всякая всячина
Previous

“Мы сделали кнопки на экране настолько хорошими, что вы будете хотеть их облизывать.”
Steve Jobs, Chairman and CEO Apple Inc.

NARDOdesign – доступно и просто о веб разработке от А до Я

Если Вас интересуют качественные и новые HTML и CSS темплейты, уникальные и свежие JavaScript решения, актуальные уроки по фотошопу и графическому дизайну, рекомендации и примеры уроков по созданию красивых и оригинальных сайтов, или Вы хотите быть в курсе последних новинок и трендов в веб разработке? Тогда Вы попали именно туда! Также не останутся в стороне вопросы связанные с продвижением сайта в поисковиках – СЕО и оптимизация. Рассмотрим основные моменты качественного наполнения сайта – копирайтинг , веб-райтинг, нейминг итд. Надеюсь у нас Вам понравиться ;)

Установка и настройка SimpleGallery для MODx EVO

08.03.2016 в 14:04 | NARDO | Теги: SimpleGallery, MODx EVO, MODx, MODxAPI, DocLister, галерея

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



blog comments powered by Disqus


КАТЕГОРИИ

В помощь вебмастеру.

В помощь вебмастеру.
В данном разделе представлены статьи, раскрывающие основные моменты работы вебмастера с сайтом, а также базовые моменты при разработке сайтов.

Полезные веб-ресурсы.

Полезные веб-ресурсы.
Обзор полезных вебресурсов для разработчика и вебмастера различной тематики.

Уроки и мастер-классы по разработке.

Уроки и мастер-классы по разработке.
Уроки по разработке сайтов, уроки фотошоп, графические темплейты от «NARDOdesign»

Шаблоны HTML и CSS.

Шаблоны HTML и CSS.
Различные HTML шаблоны, CSS, веб-верстка от «NARDOdesign»

JQuery, JavaScript, Mootools.

JQuery, JavaScript, Mootools.
Различные JavaScript решения, содержащие самые популярные библиотеки на основе jQuery, Mootools, HTML5 и CSS.

Графика и дизайн.

Графика и дизайн.
Уроки фотошоп, графические темплейты , изображения, иконки, векторные и растровые файлы, PSD, кисти и многое другое.

Продвижение и оптимизация сайтов

Продвижение и оптимизация сайтов.
Уроки по основам продвижения и оптимизации сайтов, продвижение сайтов, вывод в топ, поддержка позиций, SEO от «NARDOdesign»

Всякая всячина

Всякая всячина.
Статьи не связанным с основной тематикой моего блога.



ПОПУЛЯРНОЕ

    Подборка классных шаблонов визитных карточек. 4 Часть

    Подборка классных шаблонов визитных карточек. 4 Часть.
    Огромная подборка различных шаблонов визиток на все случаи жизни! Далее...»

    Подборка классных шаблонов визитных карточек. 5 Часть

    Подборка классных шаблонов визитных карточек. 5 Часть.
    Огромная подборка различных шаблонов визиток на все случаи жизни! Далее...»

    Подборка различных менюшек. 5 часть - вертикальные меню

    Подборка различных менюшек. 5 часть - вертикальные меню.
    Предлагаю Вашему вниманию пятую часть мега-подборки различных меню на любой вкус - здесь есть из чего выбрать! Далее...»

    Подборка различных менюшек. 4 часть - вертикальные меню

    Подборка различных менюшек. 4 часть - вертикальные меню.
    Предлагаю Вашему вниманию четвертую часть мега-подборки различных меню на любой вкус - здесь есть из чего выбрать! Далее...»

    Подборка классных шаблонов визитных карточек. 1 Часть

    Подборка классных шаблонов визитных карточек. 1 Часть.
    Огромная подборка различных шаблонов визиток на все случаи жизни! Далее...»

СЛУЧАЙНЫЕ ЗАМЕТКИ

    Подборка сайтов с качественными HTML шаблонами

    Подборка сайтов с качественными HTML шаблонами.
    Представляю Вашему вниманию огоромную подборку ресурсов с качественными HTML и CSS шаблонами – выбирайте на свой вкус. Далее...»

    Фотобанки с бесплатными фото, часть вторая

    Фотобанки с бесплатными фото, часть вторая.
    Подборка различных ресурсов посвященных фотографиям. Далее...»

    Шрифты - где взять, как встроить

    Шрифты - где взять, как встроить.
    Подробно рассмотрим где взять различные шрифты для ваших проектов, а также методы интеграции различных шрифтов в сайт. Далее...»

    Расскажем о своем сайте поисковикам

    Расскажем о своем сайте поисковикам.
    Для того чтобы сайт отображался в поиске он должен быть проиндексирован. Как этого добиться и что для этого необходимо сделать подробно рассмотрено в этой статье. Далее...»

    Подборка различных менюшек. 2  часть - горизонтальные меню

    Подборка различных менюшек. 2 часть - горизонтальные меню.
    Предлагаю Вашему вниманию вторую часть мега-подборки различных меню на любой вкус - здесь есть из чего выбрать! Далее...»



Наш выбор:


Услуги хостинга

Услуги хостинга, сервера


Доменные имена в Украине

Доменные имена в Украине




Доменные имена в Украине

Доменные имена в мире


pisture

Школа веб-разработки от NARDOdesignblog

Доступно и просто, всё о веб-разработке от А до Я

СООБЩЕСТВО

КОНТАКТЫ