Создание галереи в MODx Revolution
Почти на всех сайтах MODX используется галерея изображений. В этом посте я опишу как реализовать данное решение с помощью дополнения Gallery MODX Revolution. Для асинхронной загрузки изображений я буду использовать JAIL (асинхронный jQuery загрузчик изображений) и Lazy Load для постепенной загрузки изображений.
Для того чтобы создать галерею Gallery MODX Revolution нам понадобится
- MODX Revolution;
- дополнение Gallery MODX Revolution;
- дополнение IF MODX Revolution;
- Colorbox;
- Lazyload.
Не буду объяснять как всё установить из вышеприведенного — ставьте как и где вам удобно. Я предпочитаю assets/templates/site, но для демонстраций я использую assets/templates/demo. Для простоты я просто перетащил загруженные папки и файлы в папку demo.
Итак приступим! Для создания Gallery MODX Revolution Вам необходимо:
- Загрузить на сайт Ваши изображения - менеджере MODX зайдите в Components/Gallery и загрузите ваши изображения, при этом убедитесь в том, что поставили галочку напротив active.
- Создать 3 чанка, как указанно ниже
DemoGalAlbumRowTpl
DemoGalItemThumb
DemoGalleryAlbumTpl
Для тестирования результатов вывода Gallery MODX Revolution можно использовать упрощённый шаблон, указанный ниже. Убедитесь в том, что выставлены правильные пути к файлам (проверить это можно через Firebug).
Вот пожалуй и всё. Пожалуйста, снизу можете прокомментировать данный пост.
05-10-2011 уроки MODx Revolution Gallery Виктор Матушевский
DeN
17.11.2011 08:37Замени строчку $("img„).lazyload({effect : „fadeIn”}); на $("img").lazyload({effect : "fadeIn"}); иначе не будет работать скрипт))
Viktorminator
17.11.2011 12:46Спасибо! Поправил скрипт.
rezvik
18.11.2011 03:48в Вашем demo варианте, при увеличении фото меню навигации остается активным а не прячется на заднем плане.
Lu
20.12.2011 21:57Спасибо за пост, все толково.
А кто-нибудь знает, реально сделать так, чтобы при загрузке картинок в галерею у них не менялись названия? Меня это беспокоит, хочу под гугл картинки оптимизировать сайт, да и специфика такая, что в основном идут галереи изображений.
Viktorminator
20.12.2011 22:34Можно скопировать одно изображение, посмотреть куда оно скопировалось и потом, через файловый менеджер остальные залить. Я давно так вроде делал.
Александр
17.01.2012 21:45Спасибо за статью и вообще за все статьи! Очень помогают! :)
А можно сделать так, чтобы выводилось сразу несколько галерей на странице? Я попробовал, но не вышло - получаются дубли одной и той же галереи :(
Александр
17.01.2012 23:07Ой, извиняюсь))) Я делал другой вызов сниппета из другой статьи. Там через TV подставлялась галерея и одна лишь. А вызов, который тут указан как раз отображает сразу несколько галерей.
Тогда перефразирую вопрос. Кто-нибудь знает как сделать вызов нескольких галерей, если вызывать через переменную шаблона? Я использовал такой вызов:
[[!GalleryAlbums? &toPlaceholder=`GalleryAlbums` &limit=`0` &albumCoverSort=`rank` &prominentOnly=`0` &rowTpl=`GalAlbumRowTpl` &thumbWidth=`195` &thumbHeight=`140`]]
[[!Gallery? &album=`[[*galery_name_1]]` &checkForRequestTagVar=`1` &toPlaceholder=`Gallery` &useCss=`0` &containerTpl=`GalleryAlbumTpl` &thumbWidth=`140` &thumbHeight=`100` &thumbTpl=`GalItemThumb` &imageWidth=`950` &imageHeight=`950`]]
[[+Gallery]]
Далее в переменной шаблона указываю название галереи. Пробовал делать несколько переменных шаблона, но выводятся дубли. Похоже лишь один вызов можно использовать.
Viktorminator
17.01.2012 23:25[[Gallery? &album=`1` &toPlaceholder=`Gallery`]]
[[Gallery? &album=`2` &toPlaceholder=`Gallery`]]
[[+Gallery]]
Павел
02.10.2013 21:16Вызов, который вы привели выводит только вторую галерею. В чем может быть проблема?
Людмила
22.01.2012 00:07Интересный материал, доходчиво изложено! Только у меня при щелчке, вместо увеличения, эта картинка открывается (одна на странице), не могу найти ошибку(
Людмила
23.01.2012 11:24Нашла свою ошибку! При создании чанков в поле Category нужно выбрать Gallery, а не шаблон в котором будет размещена галерея.
Александр
26.01.2012 09:06Я вставил, но результат сильно отличается от ожидаемого. Чувствую, что сам где-то недоглядел, но найти пока не могу. Сайт на тестовом хостинге:
lakrost.u-gu.ru на вкладке Фото.
Viktorminator
26.01.2012 10:24У вас вместо этого файла jquery.lazyload.mini.js внутри пусто. Скопируйте его еще раз...
Александр
26.01.2012 11:26Спасибо! Я в пути до этого файла ошибку сделал. Теперь намного лучше, но от демо еще отличается. А можно анекдот в тему?
"– Подскажите хорошую среду разработки для Java?
– Среда на следующей неделе будет очень хорошей для разработки на Java".
Борис
06.02.2012 11:26Привет автору и всем. Мне нужна в шапке галерея-крутилка-меню, как на Яндексе. Только чтоб при нажатии на картинку переходить на нужную страницу. На каком плагине это можно реализовать?
Viktorminator
06.02.2012 14:44Привет, Борис. Это реализуется не на "плагине", а с помощью jquery. Например, как здесь http://www.1stwebdesigner.com/tutorials/create-stay-on-top-menu-css3-jquery/
Алексей
15.03.2012 13:20Доброго времени, пожскажите как возможно организовать галерею подобную этой:http://www.homedistiller.ru/hd-3.htm. Тут используется Easy 2 Gallery, как я понял она для evo. Нужно организовать вставку в статью небольшую галерею, но могу разобраться как по указанному Вами пути получается не совсем то что нужно.
Viktorminator
15.03.2012 19:58Смотрите в код. 1) Там выводят галерею справа как колонку таблицы td width="140" align="right"
2) В неё вставляете вызов галереи Gallery? &album=...
3) В чанке вывода уменьшенного изображения указываете rel="colorbox", это значит, что при нажатии на ссылку с rel будет выполнятся скрипт и выводится картинка в колорбоксе
4) пропишите пути в хедере для данного скрипта script src="assets/templates/demo/colorbox/colorbox/jquery.colorbox-min.js"
5) вызовите сам скрипт $("a[rel='colorbox']").colorbox();
Если что непонятно, то смотрите этот урок. Скоро сделаю еще один для самых маленьких ;)
Алексей
16.03.2012 11:06За это буду очень благодарен. Как раз надо для самых маленьких :))
Миша
20.03.2012 15:36Здравствуйте подскажите как сделать вложенные категории ( например: общая категория в нее заходишь, а там категория1 категория 2 категория 3 и в каждой из них фотографии)
возможно ли такое?
Viktorminator
20.03.2012 15:53Сложно без картинки понять. Если это то, что я понял, то да, возможно.
Станислав
20.03.2012 18:04Здраствуйте подскажите пожалуйста в чем может быть проблема. Я захожу во вкладку Компоненты, выбираю Gallery, нажимаю создать альбом, далее пишу имя альбома, ставлю галочки Активен и Видимый, нажимаю сохранить, идет процесс сохранения, после его прекращения окошко Создать альбом не пропадает и альбом соответственно не создается
Viktorminator
20.03.2012 19:15Проверьте права на папки. Просмотрите лог ошибок модекса.
Станислав
21.03.2012 19:02Подскажите, где установить права на папки и какие именно. Журнал ошибок никаих записей по поводу моих действий по созданию галерее не прописывает
Артур
23.04.2012 11:28Подскажите как при открытии альбома *content не выводился.
Благодарю.
Eleonora Deniz
21.05.2012 18:03Доброе время суток. Плиийз, помогите разобраться с наполнением фоток в галерею. Недобросовенные айтишники, взяли деньги с меня, "сделали сайт" и кинули(( я теперь не знаю как наполнить((((((((
Я не очень поняла, как наполнять(((
Viktorminator
21.05.2012 20:12Добрый день. Наймите других, более добросовестных.
Дмитрий
23.05.2012 20:53Виктор, вопрос.
При добавлении водяного знака в чанк, в слайдере вылезает абра кадабра. Не подскажете с чем это может быть связано?
Вызов чанка следующий: [[+name]]
Viktorminator
23.05.2012 20:57Квип съел все теги. Через pastebin.com покажите ваш код.
Дмитрий
23.05.2012 22:57В общем вызов чанка такой же как и у вас DemoGalItemThumb, единственное, идет добавка:
a href="[[+image]]&fltr[]=wmt|Текст_водяного_знака|57|T|FFFFFF||100|57|0||0|" rel="colorbox" title="[[+description]]">
img class="[[+imgCls]]" src="[[+thumbnail]]&fltr[]=wmt|Текст_водяного_знака|57|T|FFFFFF||100|57|0||0|" alt="[[+name]]"
Настя
18.06.2012 22:36Здравствуйте. Обращаюсь с очередной нестандартной проблемой(мне на них везет). Когда загружаю картинки в альбом (пробовала через "загрузить элемент" и "мульти-аплоад"), пишет результат загрузки-"неудача", выделяет красным, но добавляет файл как разбитый(просто значок файлика без картинки). в чем может быть проблема?) На сайте при нажатии на этот разбитый файлик выводятся ошибки. одна из них: Strict Standards: Non-static method phpthumb_functions::GetAllFilesInSubfolders() should not be called statically, assuming $this from incompatible context in.. .
Viktorminator
18.06.2012 22:39Посмотрите лог ошибок. Попробуйте поменять права на папку, в которую пытаетесь загрузить файл.
Эдуард Сещенко
25.06.2012 20:09Добрый вечер! Все выставил один в один, а выводится миниатюры в ряд по вертикали и открываются большие по одной и в левой стороне. Не понятно, что то со стилями...? Подскажите где смотреть..
Заранее благодарен.
Антон
27.07.2012 12:27Я никак не пойму как вывод в горизонтально забацать. Что бы я не делал выводит вертикально. Если заключаю в блок, отстраиваю CSS, а она 1 фиг сама по себе вертикально. Я что то отчаялся уже.
Viktor Minator
27.07.2012 13:14float: left;
Алексей
10.08.2012 00:37Доброго времени суток, а как сделать вывод названия конкретного альбома при просмотре оного?
Сергей Беляков
16.08.2012 16:21Добрый день!
Если я правильно понял, то для каждого ресурса нужно создавать отдельную галерею?
У меня следующая ситуация: есть много ресурсов, например интернет-магазин или что-то в этом роде, на странице описания товара должно быть несколько фото, но дело в том, что товаров очень много и на каждое описание идет по 1-10 картинок, создавать для каждого товара галерею получается довольно муторно. Было бы проще, если бы можно было загружать произвольное количество картинок в дополнительный параметрах, что-то вроде param-edit в shopkeeper'е, в котором просто добавляется еще одно поле при необходимости. Можно это реализовать с помощью Gallery или может быть что-то еще посоветуете?
Саша Исаев
17.12.2012 07:34Тоже крайне интересно возможное решение, внешне оформить можно с помощью slidejs: http://slidesjs.com/examples/product/, но вот как правильно настроить TV параметры в MODx Revolution. Подскажите, пожалуйста.
Misha
08.09.2012 19:47Подскажите как реализовать постраничную навигацию? Пытаюсь через getPage не выходит... так понял в сниппет не передается значение total (количество элементов в альбоме).. если нет никакого готового решения подскажите как достать это значение... плиз.)
Viktor Minator
10.09.2012 15:06http://forums.modx.com/thread/?thread=37769&page=2
Тихон
11.09.2012 15:23Вопрос такой: как сделать при помощи этого или другого дополнения возможность увеличения фотографии расположенной в тексте, чтобы она всплывала в увеличенном виде в лайтбоксе. ну а дальше закрыл и опять текст смотришь. Это дополнение у меня не получается настроить так.
Viktor Minator
12.09.2012 11:15Берёте любой лайтбокс, например этот http://lokeshdhakar.com/projects/lightbox2/ внимательно читаете инструкцию использования и делаете.
Konstantin Baranov
13.10.2012 22:30demo чтото не работает (
Андрей Лютый
17.10.2012 15:00Подскажите, а как сделать ватермарку из изображения? чтобы он на картинку накладывал?
Viktor Minator
17.10.2012 16:36http://www.belafontecode.com/image-manipulation-with-phpthumbof-in-modx-revolution/ последние 2 пункта
Николай Хохлунов
19.10.2012 14:57скажите пожалуйста как а организовать 3 уровня, то есть альбом-альбом-картинка.
Борис Чеботков
13.03.2013 09:01Тоже хотелось бы узнать про вывод альбом-альбом-картинка
Борис Чеботков
13.03.2013 09:05Мне необходимо выводить галерею в виде папок 2012, 2013. В каждой папке должны быть свои галереи. привязка к дате создания не актуальна, т.к. галерея может наполняться в любое время (год). что-то типо:
2012:
- новый год (id1)
- 23 февраля (id2)
2013:
- новый год (id3)
- 23 февраля (id4)
володя володин
04.04.2013 19:42ссылка на демо не пашет.
и подскажите еще возможно ли реализация следующей галереи:
фотки кучей закидываю в папку , все что в ней есть автоматом выводиться в галерею...возможно не папка а яндекс диск например?
Viktor Minator
04.04.2013 19:59можно. вот здесь я так сделал http://spinaltraumalife.com/activniy-otdih
володя володин
04.04.2013 20:28просто еще не использовал галерею...как то не успел. вот и назрели вопросы)
а если планируется много альбомов, для начала 20, а в каждом фоток от 30 до 50....
что посоветуете? в плане быстроты особо интересует... Спасибо!
Николай
14.04.2013 14:47Добрый день! Мне необходимо вывести несколько галерей на одной странице. Но ничего не получается, выводятся либо дубли либо пустая страница.
Вывожу так
16.04.2013 22:40Добрый день.
Пытаюсь реализовать галерею полностью по Вашему примеру.
Подскажите ка реализовать более человечье расположение объектов в галерее чем как получилось.
Например построчное расположение по 3-4 снимка
http://yadi.sk/d/WTpQUkqI46dY0
Василий Столейков
24.04.2013 12:52Я использую стандартный плагин к галерее slimbox, никто не знает, почему там не срабатывают свойства &imageWidth и &imageHeight ?
Василий Столейков
24.04.2013 12:54Грузится полностью всё изображение и вылезает за экран.. Как его уменьшить?
Viktor Minator
25.08.2013 11:26colorbox
Витя
02.05.2013 16:19Все работает хорошо до того момента как за развертывание картинки берется colorbox, дело в том что у полноразмерной картинки нету атрибута alt, а для продвигаемого сайта это важно. Как указать колорбоксу откуда брать этот атрибут?
Игорь Шубин
07.06.2013 16:06а где код чанка DemoGalItemThumb ???
Anna
25.08.2013 07:09Здравствуйте! Подскажите пожалуйста можно ли сделать так, чтобы при клике на альбом сразу появлялся слайдер с входящими в него фотографиями?? Очень нужно, чтобы не было перехода на внутреннюю страницу альбома.
Viktor Minator
25.08.2013 11:25AJAX
Anna
25.08.2013 15:24Т.к. у нас есть Colorbox то шаблон для слайдера отдельно создавать не нужно, я правильно понимаю?
А как получить id того альбома, слайдер которого будет выводиться? только через php? я с ним совсем не дружу :/
Нет ли какого нибудь примера?
Viktor Minator
25.08.2013 17:18Итак допустим у вас выводятся альбомы, для них создаёте ссылки вида a href="?album="
То есть при нажатии у вас должен срабатывать запрос на страницу и она должна вам отдавать содержимое альбома, то бишь фотографии,
вы их принимаете и выдаёте в виде галереи. Попробуйте пройти пару уроков здесь с аджаксом и всё станет понятно.
Павел
02.10.2013 20:55Виктор, большое спасибо за статью! Все получилось. А не подскажите, как сделать, чтоб картинки из альбома сразу выводились?
И второй вопрос - как вложить это все в TV? Я создал тв galery_name (Input options- text, output - galleryitem). Галерея не выводится, в сгененированном html коде на месте галлереи пусто. Уже второй день бьюсь, не могу понять, где копать.
Viktor Minator
02.10.2013 21:35Делайте так:
0) проверьте есть ли у вас в вызове &includeTVs=`1`
1) посмотрите что у вас в базе записалось в эту ТВ
2) попробуйте записать нужное значение для вывода в getResources
3) ... другие действия
Павел Никонов
14.10.2013 17:10Виктор, спасибо. С TV разобрался - в Input надо было поставить galleryalbumlist и все заработало.
У меня еще вопрос: а можно как нибудь выудить теги ко всем изображениям к картинкам в галереи и вывести их списком? Я хочу сделать галерею, чтоб из сайдбара во фронтенде можно было нажать по тегу и на странице бы выводились картинки которые соответствую этому тегу. Идеально было бы сделать мультиселект (чтоб можно было выводить по нескольким выбранным тегам). Подскажите, как это можно реализовать.
Віктор Матушевський
14.10.2013 19:11нужно делать xPDO запрос к таблице, где содержаться данные теги и выводить их список, потом делать фильтр (селект) и вывод исходя из тега (ещё один xPDO запрос).
Віктор Матушевський
14.10.2013 19:13тест
Павел Никонов
15.10.2013 13:51Спасибо. Готовых решений, как я понимаю, в природе нет?
Я нашел сниппет gallerytag на гитхабе (https://github.com/samargulies/galleria-galleria), но он не ставится в систему. Вы работали с ним? Что можете сказать?
Павел Никонов
15.10.2013 19:41извините за кривую ссылку, писал с телефона и не то копирнул. Вот правильная: https://github.com/dshoreman/modx-gallerytag
Viktor Matushevskyi
15.10.2013 19:53Да, это дополнение как раз и содержит сниппет с xPDO запросом и выводит теги. Осталось сделать (или найти) фильтр изображений по тегу.
Сергей Бакей
29.11.2013 16:06Подскажите есть ли возможность использовать разные шаблоны для вывода всех альбомов и для вывода изображений отдельного альбома? Вариант вывода в 1 шаблоне немного не устраивает
Viktor Matushevskyi
29.11.2013 20:14Да. Я здесь так сделал spinaltraumalife.com
Алексей Измайлов
18.02.2014 14:38Блин как сделать URL картинок типа: http:://site/images/album/picture.img
У меня ссылки типа - /assets/components/gallery/connector.php?action=web/phpthumb&ctx=web&w=750&h=800&zc=0&far=&q=90&src=%2Fassets%2Fgallery%2F1%2F2.jpg
Валентин
26.03.2014 16:41Огромное спасибо за Ваш сайт,очень мне помогает делать первые шаги по необъятным просторам ModX. Сейчас занимаюсь галлереей, и есть такая проблема: генерируются миниатюры, но почему-то изображения в них не масштабируются пропорционально, а вырезается та или иная часть изображения и ставится в качестве миниатюры. В чанке для вывода миниатюры прописываю:
/ Читал мануалу от разработчика по phpThumb, что на http://phpthumb.sourceforge.net , все равно не догоняю, гдя я и что не так делаю. Пробовал и &zc убирать и разные значения far ставить....
Вызов в шаблоне галлереи выглядит так:
`
&thumbTpl=`GalItemThumb_custom`
&containerTpl=`GalleryAlbumTpl_custom`
&thumbFar=`1`
&thumbZoomCrop=`0`
&imageWidth=`800px`
В чем может быть проблема?
Валентин
26.03.2014 16:43Не вставилось: в чанке для изображения прописываю: src="&w=100&h=110&zc=0&far=1&q=90&bg=FFFFFF"
Олег Ёлгин
03.04.2014 14:25Спасибо за статью, все просто и понятно!)
У меня следующий вопрос - как вывести список альбомов по фильтру? Как я понял, у самого альбома нет поля tag, но зато есть поле year.
Как тогда сделать выборку по году? Например вывести альбомы за 2013й год(альбомы, не фотографии). Или может есть какой-то способ попроще?
Олег Ёлгин
03.04.2014 14:472 дня мучался, написал коммент и через 15 минут придумал решение)))
Использовал древовидную структуру галереи и параметр &parent=`id`
Все работает)
Андрей88
25.09.2014 15:29Здравствуйте! У меня проблема, что не пробовал все равно при клике на фото открывается не с помощью плагина, а как отдельная страница и не в окне.
Андрей88
25.09.2014 15:31Вот пример http://polycar.com.ua/123.html?galAlbum=7
Viktor Matushevskyi
25.09.2014 16:39Вот этот скрипт не подключён http://polycar.com.ua/assets/templates/demo/colorbox/colorbox/jquery.colorbox-min.js
Андрей88
25.09.2014 17:00Заработало, а что прописывать, чтобы выводились фото в превью только одного альбома, как делать вызов?
derzaiii
06.11.2014 13:59Спасибо за гайд - все получилось, правда colorbox не понравился, переделал на fancybox. Подскажите можно ли изменить ссылку на изображение - поисковики индексируют ужасный путь - мойсайт.ком/assets/components/gallery/connector.php?action=web/phpthumb&ctx=web&w=800&h=800&zc=0&far=&q=90&src=%2Fassets%2Fgallery%2F2%2F18.JPG
хотелось бы сократить его до читаемого без указания коннектора