Скажу сразу, что данная статья предназначена для новичков.
Итак, что нам нужно, для того чтобы быстро вывести фотогалерею на странице?
1) Установите из репозитория модуль (я использую сборку от Dmi3yy). Репозиторий находится в Модули - Extras.
2) В чанке mm_rules пропишите строку
mm_widget_evogallery(4, Галерея, "1,2,3", 6);
где
4
- это id модуля, его можно посмотреть наведя мышь на название модуля
Галерея
- это название таба, тут можно писать что угодно
1,2,3
- это указание того, кто будет видеть этот таб (можно посмотреть в «Роли пользователя»)
6
- это id шаблона, к которому будет прикреплена галерея
3) Теперь выведем галерею на странице сайта. Для этого в шаблоне страницы выведем следующий код:
[]
и создадим чанк simple-list-tpl
:
4) Не забудьте установить библиотеку Fancybox из репозитория. Она нужна, чтобы открывать увеличенные фотографии в модальном окне. Но в принципе, вы можете использовать любую библиотеку, на ваше усмотрение.
Чанк с именем fancybox, вставьте в шаблон страницы, не забыв подключить JQuery.
$(document).ready(function() { $(".fancybox").fancybox(); });
5) Подправим CSS стили, чтобы добавить немного красоты.
Photo a img { padding:5px 5px 5px 5px; background-color:#FFFFFF; border:#ccc 1px solid; margin:5px 10px 5px 0;}
За вывод фотографий из фотогалереи отвечает сниппет EvoGallery. Как использовать сниппет можно прочитать в документации .
Нам понадобятся два шаблона вывода. Один для главной страницы фотогалереи, в правой колонке будет располагаться меню-список фотогалерей, в левой расположим фотографии-ссылки на галереи. Второй шаблон будет отвечать за страницу одной галереи, справа будет также располагаться меню галерей а в левой колонке кликабельные фотографии этой галереи. Чтобы было более понятно, можно посмотреть как устроены галереи на сайте okarinashop.ru .
Главная страница с галереямиСоздаем шаблон Фотогалерея главная из копии шаблона Типичка . Изменяем название чанков LEFT-COL и RIGHT-COL на LEFT-COL-GAL-MAIN и RIGHT-COL-GAL соответственно
Шаблон Фотогалерея главная
Из копии чанка RIGHT-COL
создаем чанк RIGHT-COL-GAL
и в него добавляем вызов сниппета Wayfinder
с параметрами
{{ORDER}}
[!Wayfinder? &startId=`5`
&level=`1`
!]
Акции
Движение спутника периодично. Симметрия ротора вращает колебательный гироскопический прибор,
составляя уравнения Эйлера для этой системы координат
подробнее
Мы указали идентификатор ресурса фотогалерея в параметре startId , чтобы сниппет выводил в меню ссылки только на галереи
Из копии чанка LEFT-COL
создаем чанк LEFT-COL-GAL-MAIN
и добавляем в него вызов сниппет EvoGallery
[*pagetitle*] [*content*] [!EvoGallery? &display=`galleries` &itemTpl=`gal-cat` !]
В параметре display мы указали, что хотим выводить ссылки на галереи, а не на фотографии, а в параметре itemTpl указали чанк с шаблоном вывода. Таким образом нам необходимо создать шаблон вывода ссылки ведущей на ту или иную галерею
Создаем новый чанк gal-cat
со кодом
[+pagetitle+]
- [~[+id+]~] - адрес страницы галереи
- [+title+] - заголовок фотографии, его можно написать при редактировании фотографии в модуле
- [+thumbs_dir+] - путь к директории с картинка галереи
- [+filename+] - название файла первой картики в галерее
Ресурсу Фотогалерея присваиваем шаблон Фотогалерея главная
Шаблон Фотогалерея главная присваиваем ресурсу Фотогалерея
Если Вас интересуют качественные и новые HTML и CSS темплейты, уникальные и свежие JavaScript решения, актуальные уроки по фотошопу и графическому дизайну, рекомендации и примеры уроков по созданию красивых и оригинальных сайтов, или Вы хотите быть в курсе последних новинок и трендов в веб разработке? Тогда Вы попали именно туда! Также не останутся в стороне вопросы связанные с продвижением сайта в поисковиках – СЕО и оптимизация. Рассмотрим основные моменты качественного наполнения сайта – копирайтинг, веб-райтинг, нейминг итд. Надеюсь у нас Вам понравиться;)
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.
Установка:
Нам понадобится установить такие - плагин: 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, но будут и свои нюансы.
Установка:
Нам понадобится установить такие плагины: 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»
Рассмотрим простейший пример вывода «[]»
- &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
Please enable JavaScript to view the comments powered by Disqus. blog comments powered by Disqus
.
Огромная подборка различных шаблонов визиток на все случаи жизни!
Источник: http://cstudiopro.ru/sozd-site/cms/modx-cms/sozdaem-sajt-urok14.php
EvoGallery - позволяет создавать галерею изображений на MODx Evolution.
Пример реализации EvoGallery можно посмотреть на странице Evo_Gallery .
Фотогалерея включает три альбома, которые выводятся на страницу Evo_Gallery . Т.е. для ресурса Evo_Gallery надо создать три дочерних ресурса Альбом 1, Альбом 2, Альбом 3 . См. рисунок 1.
Рисунок 1
При нажатии на миниатюру, появляется увеличенное изображение средствами скрипта FancyBox . Поэтому нам понадобится еще этот скрипт.
Инструкция по созданию такой галереи
1. Сначала скачиваем дистрибутив EvoGallery .
2. В архиве две папки: «assets» и «install». Архив надо распаковать на сервер в папку www , при распаковке подтвердить слияние папок.
Появится установка модуля MODx Gallery, которая включает следующие этапы:
- выбор языка. Русский;
- выбор параметров. Оставляете так, как есть (модуль, плагин и сниппет);
- проверка перед установкой. Соглашаемся с лицензией, жмем кнопку «Дальше»;
- результаты установки. Обратите внимание на пункт «Удалить папку и файлы программы установки с моего сайта». Обязательно олжна стоять галочка;
- установка завершена. Жмем «Закрыть», и входим в панель администратора, введя логин и пароль.
4. Скачиваем архив скрипта FansyBox . И распаковываем в папку assets / js / gallery /. См. рисунок ниже.
Рисунок 2
5. Создаем отдельный шаблон evo_gallery . В этом шаблоне в (или перед закрывающим ) вставляем следующий код:
$(document).ready(function() {
$(".fancybox").fancybox({
openEffect: "none",
closeEffect: "none"});
});
6. Создаем ресурс Evo_Gallery с шаблоном evo_gallery , на страницу которого будут выводиться фотоальбомы. Описания для ресурса могут быть такими (рис. 3).
На странице Evo_Gallery вставляем вызов сниппета EvoGallery:
Здесь использованы следующие параметры:
- &docId=`240` - id страницы, дочерние ресурсы которого являются альбомами, вставьте сюда свой id;
- &display=`galleries` - категория вывода, возможные значения: galleries, images, single;
- &itemTpl=`item-list` - шаблон вывода информации об альбоме.
Рисунок 3
8. Создаем чанк item - list с кодом:
[+longtitle+]
[+introtext+]
[+pagetitle+]
9. Создаем три дочерних ресурса Альбом 1, Альбом 2, Альбом 3 с шаблоном evo_gallery . В содержимое каждого ресурса вставляем код:
[*introtext*]
[]
Рисунок 4
10. В папке simple-list , находящийся по адресу: assets/snippets/evogallery/simple-list , есть файл tpl.item.default. txt , отвечающий за шаблон вывода одной фотографии. Нужно удалить содержимое файла, и вставить в него следующий код:
11. В шаблоне evo_gallery в вставляем таблицу стилей:
/* Галерея */
.img-all .img-gallery {width:200px; height:160px; margin:0 15px 25px 0; padding:5px;}
.img-all img {width: 195px; height: 155px;}
.img-gallery {float:left;}
.albom-gallery {clear:both; padding-bottom: 30px; padding-top: 10px;}
.albom-gallery img {float:left; padding:5px; border:1px solid #CCC; margin-right:20px; width: 170px; height: 126px;}
.albom-gallery span a {font-size:18px; font-family: Georgia, "Times New Roman", Times, serif; color: #777 ;}
.albom-gallery span a:hover {color:#999;}
12. Сейчас надо загрузить фотографии в наши альбомы. Скачиваем архив для альбомов .
Заходим в административную панель, и переходим по ссылке в меню: Модули - EvoGallery .
Кликаем по «Evo_Gallery» , потом «Альбом 1» . Кликаем по кнопке « Select Files », появляется окно выбора изображений. Из распакованных файлов находим папку «Альбом 1». Выделяем все и нажимаем кнопку «Открыть».
Рисунок 5
Если возникает ошибка с сообщением, что файл большой, следует изменить максимальный размер загрузки файла. Для этого идем по вкладкам Инструменты - Конфигурация - Максимальный размер загрузки , и устанавливаем значение в байтах, например 20000000.
Если это не помогает, то попробуйте прописать в.htaccess следующее:
php_value upload_max_filesize 20M
php_value post_max_size 20M
php_value max_execution_time 100
Это увеличит размер закачки до 20Мб, а время исполнения до 100 секунд.
Предупреждение!!!
Данный модуль фотогалереи EvoGallery имеет уязвимость, позволяющую загрузить произвольный файл (в том числе и хакерский шелл).
Поэтому после установки галереи удалите файл uploadify.php
по адресу /assets/modules/evogallery/js/uploadify/uploadify.php