Вибір мови

  • 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

01.01.1970 в 03:00 | 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


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»

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

Всяка всячина.
Статті не пов'язаних з основною тематикою мого блогу.



ПОПУЛЯРНЕ

    Підбірка класних шаблонів візитних карток. 3 Частина

    Підбірка класних шаблонів візитних карток. 3 Частина.
    Величезна підбірка різних шаблонів візиток на всі випадки життя! Далі...»

    Підбірка класних шаблонів візитних карток. 1 Частина

    Підбірка класних шаблонів візитних карток. 1 Частина.
    Величезна підбірка різних шаблонів візиток на всі випадки життя! Далі...»

    Добірка класних шаблонів візитних карток. 6 Частина

    Добірка класних шаблонів візитних карток. 6 Частина.
    Величезна добірка різних шаблонів візиток на всі випадки життя! Далі...»

    Добірка класних шаблонів візитних карток. 5 Частина

    Добірка класних шаблонів візитних карток. 5 Частина.
    Величезна добірка різних шаблонів візиток на всі випадки життя! Далі...»

    Підбірка класних шаблонів візитних карток. 4 Частина

    Підбірка класних шаблонів візитних карток. 4 Частина.
    Величезна підбірка різних шаблонів візиток на всі випадки життя! Далі...»

ВИПАДКОВІ НОТАТКИ

    WebAsyst, встановлення за замовчуванням різних валют для адміністратора і користувачів

    WebAsyst, встановлення за замовчуванням різних валют для адміністратора і користувачів.
    Сьогодні розглянемо як у WebAsyst зробити так щоб основна валюта в адмінці відрізнялася від основної валюти у клієнтської частини сайту. Далі...»

    Створення візитки у темних тонах

    Створення візитки у темних тонах.
    Крок за кроком розглянемо приклад створення візитки за допомогою Adobe Photoshop Далі...»

    Добірка різних слайдерів. Частина 3

    Добірка різних слайдерів. Частина 3.
    Пропоную до вашої уваги третю частину добірки слайдерів на будь-який смак. Усі слайдери надані у статті як мінімум умовно безкоштовні і доступні для завантаження. Сподіваюся ви знайдете щось для себе нове! Далі...»

    Добірка класних шаблонів візитних карток. 6 Частина

    Добірка класних шаблонів візитних карток. 6 Частина.
    Величезна добірка різних шаблонів візиток на всі випадки життя! Далі...»

    Підбірка класних шаблонів візитних карток. 1 Частина

    Підбірка класних шаблонів візитних карток. 1 Частина.
    Величезна підбірка різних шаблонів візиток на всі випадки життя! Далі...»



Наш вибір:


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

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


Доменні імена в Україні

Доменні імена в Україні




Доменні імена у світі

Доменні імена у світі


pisture

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

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

СПІЛЬНОТА

КОНТАКТИ