Что такое Gallery ?
Gallery modx revo – это динамичное приложение для MODx Revolution. Оно позволяет Вам быстро и удобно создавать галереи картинок, сортировать и маркировать их, отображать их на фронтэнде («лицевой» части сайта, которую видят простые посетители)230, Вашего сайта различными способами.
Требования
• MODx Revolution 2.0.0-rc-2 или более поздняя версия
• PHP5 или более поздняя версия
История и информация Gallery modx revo
Приложение Gallery было написано Шоном МакКормиком (Shaun McCormick) как динамичный компонент и впервые вышло 5 февраля 2010 года.
Разработка и отчет об ошибке
Приложение хранится и разрабатывается на GitHub.
Использование
Сниппет Gallery modx revo можно вызвать так:
Сниппеты Gallery modx revo
В пакете Gallery есть 3 сниппета: один называется «Галерея», который отображает альбомы или ярлыки. Второй – это сниппет «Альбомы галереи» - отображает список альбомов; третий – «Элементы галереи» - отображает единичный элемент галереи.
Gallery
GalleryAlbums
GalleryItem
Настройки системы
Вы можете сменить место хранения картинок для Gallery, изменив следующие настройки:
gallery.files_path Абсолютный путь к папке, в которой хранятся картинки
gallery.files_url Доступный URL-адрес, при помощи которого Вы можете достичь gallery.files_path
В версии 1.3.0 Вы можете активировать управлять TinyMCE для описания элементов Gallery. Доступны следующие настройки:
Ключ |
Описание |
gallery.use_richtext |
Установите «Да», чтобы активировать интеграцию TinyMCE. Обратите внимание, что у Вас должно быть установлено приложение TinyMCE. |
gallery.tiny.width |
Ширина текстового редактора в пикселях или процентах. |
gallery.tiny.height |
Высота текстового редактора в пикселях или процентах. |
gallery.tiny.buttons1/2/3/4/5 |
Кнопки, которые будут отображаться в разных рядах (от 1 до 5). Если оставить пустым, останутся основные настройки TinyMCE. |
gallery.tiny.custom_plugins |
Разделенный запятыми список плагинов для загрузки. Если оставить пустым, останутся основные настройки TinyMCE. |
gallery.tiny.theme_advanced_blockformats |
Форматы блоков, для использования в выпадающем окне. Если оставить пустым, останутся основные настройки TinyMCE. |
gallery.tiny.theme_advanced_css_selectors |
CSS селекторы, которые можно выбирать. Если оставить пустым, останутся основные настройки TinyMCE. |
Использование пользовательских TV (переменные шаблона)
В приложении Gallery существуют пользовательские TV ввода и вывода для управления картинками на бэкэнде(административная часть сайта, которую не видят простые посетители). Вы можете кадрировать, изменять размеры, вращать изображение и многое другое. Пожалуйста, простите следующую статью, чтобы узнать больше об использовании TV:
• Setting Up the GalleryItem TV
Плагины приложения Gallery
Это приложение позволяет Вам отображать галерею изображений при помощи пиктограмм картинок на фронтэнде сайта или при помощи плагинов jQuery. Вы можете ввести имя плагина в сниппет Gallery. На данный момент, доступен только плагин для Galleriffic.
Менеджер приложения Gallery
Приложение выпускается с пользовательской страницей менеджера (можно увидеть в верхнем меню компонентов), на которой Вы можете управлять альбомами. Так же Вы можете создавать новые альбомы, давать им имя и использовать это имя в сниппете Gallery для быстрого доступа к нужному альбому. После создания альбома, кликните правой кнопкой мыши, чтобы обновить его и управлять изображениями, связанными с этим альбомом.
Вы можете использовать четыре вида загрузки изображений. Это может быть загрузка единичного элемента (по желанию с текстом, содержащим теги форматирования; смотрите системные настройки, описанные выше), множественная загрузка, пакетная загрузка с поиском папок в файловой системе и импортом найденных картинок и zip-загрузка, при помощи которой можно разархивировать zip-файлы.
Медиа-ресурс приложения Gallery
Приложение выпускается с пользовательским Медиа-ресурсом, благодаря которому можно отображать альбомы и их элементы в левой частви менеджера программы. Просто создайте новый медиа-ресурс с типом «Альбомы галереи», а приложение сделает все остальное.
Примеры
Образец строки исходного текста для галереи Galleriffic и альбома «Мой альбом».
Захватите первые 10 фотографий, обозначенные как «Развлечение»
Захватите все фотографии в альбоме «Мой альбом», обозначенные как «Синие»
Сниппет Gallery
Этот сниппет отображает «галерею» изображений из альбома, из ярлыка или обоих.
Свойства
Имя | Описание | Значение по умолчанию |
album | Загрузит элементы только из заданного альбома. Можно указать имя или ID альбома. | |
tag | Загрузит только элементы только с данным ярлыком. | |
plugin | Имя плагина, который нужно использовать для отображения на фронтэнде сайта. Прочтите раздел «Плагины» ниже. | |
thumbTpl | Чанк для использования в качестве tpl для каждой из пиктограмм. | galItemThumb |
containerTpl | Чанк для заключения ввода в оболочку. | |
toPlaceholder | Если настроено, установит вывод подстановщика с заданным значением и вызов сниппета ничего не покажет. | |
placeholderPrefix | Если не установлен подстановщик, добавит префикс к свойствам имя/id/описание/общее текущего альбома с заданным префиксом. | gallery. |
thumbWidth | Ширина созданной пиктограммы в пикселях. | 100 |
thumbHeight | Высота созданной пиктограммы в пикселях. | 100 |
thumbZoomCrop | Использовать или нет увеличение и кадрирование пиктограммы. | 1 |
thumbFar | Соотношение размеров phpThumb с пиктограммой. Создается изображение с размером, заданным "w" (ширина) и "h"(высота), значение которых обязательно должно быть установлено. Значения обозначают выравнивание: L=left (левое), R=right (правое), T=top (верхнее), B=bottom (нижнее), C=center (по центру). Установите BL (нижнее левое), BR (нижнее правое), TL (верхнее левое), TR (верхнее правое) для пейзажных и портретных изображений. | C |
thumbQuality | Качество созданной пиктограммы (от 0 до 100). | 90 |
thumbProperties | JSON параметры для ввода в phpThumb в качестве свойств пиктограммы. | |
imageWidth | Если используется плагином, то обозначает максимальную ширину текущего изображения. | 500 |
imageHeight | Если используется плагином, то обозначает максимальную высоту текущего изображения. | 500 |
imageZoomCrop | Использовать или нет увеличение и кадрирование изображения. | |
imageFar | Соотношение размеров phpThumb с изображением. | |
imageQuality | Если используется плагином, качество изображения – от 0 до 100. | 90 |
imageProperties | JSON параметры для ввода в phpThumb в качестве свойств изображения. | |
sort | Поле, по значению которого будет происходить сортировка. Вы так же можете выбрать "rand" для случайной сортировки. | rank |
dir | Направление, в котором нужно сортировать изображения. | ASC |
limit | Если установить значение не равное нулю, будет отображаться только Х(указанное количество) изображений. | 0 |
start | Индекс, с которого начинается захват изображений, если установлен лимит. Похож на порядок SQL стартовым оператором. | 0 |
showInactive | Если значение верное, отображает так же неактивные изображения. | false |
albumRequestVar | Можно использовать для определения варианта запроса для поиска фильтром альбома, используя в связке с checkForRequestAlbumVar=`true`. Можно использовать для фильтра по имени или ID. | galAlbum |
checkForRequestAlbumVar | Если найден вариант запроса со свойством albumRequestVar (по умолчанию galAlbum), то это значение будет использовано как свойство альбома для сниппета. | false |
tagRequestVar | Можно использовать для определения варианта запроса для поиска фильтром дескрипторов, используя в связке с checkForRequestTagVar=`true`. | galTag |
checkForRequestTagVar | Если найден вариант запроса со свойством tagRequestVar (по умолчанию galTag), то это значение будет использовано как свойство дескриптора для сниппета. | false |
useCss | Если верно, то будет использоваться CSS, предоставленные сниппетом Gallery. Установите значение «0», чтобы не загружать CSS, предоставленные сниппетом Gallery. | 1 (true) |
itemCls | CSS класс для каждого из элементов. | gal-item |
activeCls | CSS класс, который нужно добавить к элементу, если он активен. | gal-item-active |
linkToImage | Делать прямую ссылку на изображение для каждой пиктограммы или на элемент галереи – пользовательский URL-адрес. | 0 |
linkAttributes | HTML-характеристики для А дескриптора в tpl (файле шаблона) элемента. | |
imageAttributes | HTML-характеристики для дескриптора изображения в tpl (файле шаблона) элемента. | |
Чанки приложения Gallery
В приложении задействованы два чанка. Их соответствующие параметры в Gallery:
- thumbTpl – чанк для каждого из отображаемых элементов
- containerTpl – по желанию. Если установлен, заключит содержимое в оболочку чанка
Плагины
Приложение Gallery позволяет Вам отображать галереи изображений напрямую через пиктограммы на фронтэнде сайта или при помощи плагинов jQuery. Вы можете ввести имя плагина в свойствах сниппета Gallery (&plugin).
Имейте ввиду, что плагин Galleriffic изменит свойство `thumbTpl` на `gallerifficThumbTpl`, а свойство `containerTpl` на `gallerifficContainerTpl`.
Примеры
Отображает галерею фотографий в альбоме «Мой альбом»:
Отображает галерею фотографий в альбоме «Разное», но использует чанк под названием 'truckThumb' для пиктограмм:
Отображает галерею фотографий в альбоме «Круто» и использует плагин Galleriffic :
Захватывает только три фотографии из альбома «Машины» и вставляет в подстановщик "gallery":
<div class="my-gallery">
</div>
Используя &thumbProperties, установите вывод пиктограмм в 90 процентном качестве jpg вместо png:
Чанк Gallery контейнер
Этот чанк используется, когда &containerTpl установлен в сниппете Gallery.
Внимание! Рекомендуем не использовать это свойство и просто заключить в оболочку вывод Вашего ресурса или чанка; это даст Вам большую свободу действий в будущем.
Значение по умолчанию
Для чанка &containerTpl значение по умолчанию не задано; если не указанно особое значение, то вывод не будет заключен ни в одном контейнере.
Доступные подстановщики
Имя | Описание |
thumbnails | Созданные пиктограммы |
album_name | Имя текущего альбома |
album_description | Описание текущего альбома |
Чанк, отображающийся в сниппете Gallery со свойством &thumbTpl.
Значение по умолчанию
<div class="
<code></code>
"> <a href="
<code>documentation/gallery/?gt%3B%5B%5B%2BimageGetParam%5D%5D=%5B%5B%2Bid%5D%5D<%3B%2Fcode>%3B%0D%0A%3C%2Fpre%3E%3Cpre%3E>%3B%5B%5B%2BalbumRequestVar%5D%5D=%5B%5B%2Balbum%5D%5D<%3B%2Fcode>%3B%0D%0A%3C%2Fpre%3E%3Cpre%3E>%3B%5B%5B%2BtagRequestVar%5D%5D=%5B%5B%2Btag%5D%5D</code>
"> <img class="
<code></code>
"src="
<code></code>
"alt="
<code></code>
"/> </a> </div>
Доступные подстановщики
Имя | Описание |
Name (имя) | Имя элемента |
Filename (имя файла) | Базовое имя файла элемента |
Filesize (размер файла) | Размер файла для элемента |
Thumbnail (пиктограмма) | URL-адрес на полученную пиктограмму для указанного элемента |
Image (изображение) | URL-адрес на полученное изображение для указанного элемента |
image_absolute (начальное изображение) | Фактический URL-адрес изображения (вместо пиктограммы/подстановщиков изображения, которые используются в phpthumb, основанном на свойствах сниппета). |
Description (описание) | Описание элемента |
Mediatype (медиатип) | Медиатип элемента. На данный момент, это просто 'image' (изображение) |
Createdon (создано в…) | Отметка времени, в которое был создан данный элемент |
Createdby (создано…) | ID пользователя, создавшего данный элемент |
Active (активный) | Показывает активен ли элемент. Может быть со значением «1» или «0». |
Tags (метки) | Список меток, связанных с данным элементом |
cls | значение свойства &itemCls на сниппете Gallery Значение по умолчанию - 'gal-item' |
linkToImage (ссылка на изображение) | Дает прямую ссылку на изображение. Не добавляет подстановщик «imageGetParam» к параметрам запроса. Значение по умолчанию – «1» |
imageGetParam (параметры получения изображения) | GET param для использования в случае добавления GET param к ссылке для сниппета Gallery. Значение по умолчанию - 'galItem' |
albumRequestVar (запрос) | GET param для связки со сниппетом Gallery. Если кликать по изображению, оно останется в выбранном альбоме с заданным сниппетом |
Album (альбом) | Отображение текущего альбома |
Сниппет «Альбом галереи»
Этот сниппет отображает список альбомов. По умолчанию захватывает только важные альбомы.
Вы можете установить отображение пиктограммы для каждого альбома и изображения в альбоме, установив свойство "rowTpl" в "galAlbumRowWithCoverTpl" или используя в Вашем пользовательском rowTpl.
Свойства
Имя | Описание | Значение по умолчанию |
rowTpl | Чанк для каждого ряда альбомов | galAlbumRowTpl |
sort | Поле, по значению которого нужно производить сортировку | createdon |
dir | Направление, в котором нужно производить сортировку | DESC |
limit | Если задано не нулевое значение, ограничит количество взвратных результатов | 10 |
start | Индекс, с которого начинаются результаты | 0 |
toPlaceholder | Если не пустой, установит вывод к подстановщику с заданным значением | |
showInactive | Если установлено значение «1», отобразит так же неактивные галереи | 0 |
showAll | Если установлено значение «1», отобразит все альбомы, все зависимости от родительского документа | 1 |
showName | Если установлено значение «0», скроет название альбома | 1 |
parent | Захватывает только альбомы с родительским альбомом с данным ID. Не забудьте установить значение «0» для showAll, иначе он просто не будет работать | 0 |
prominentOnly | Если установлено значение «1», будут отображаться только альбомы с пометкой «Важный» | 1 |
albumCoverSort | Поле для использования при сортировке для получения обложки альбома. Чтобы получить первое изображение, используйте значение "rank" (ранг). Чтобы получить случайное изображение, используйте значение "random" (случайный) | rank |
albumCoverSortDir | Направление при сортировке для получения обложки альбома. Может быть восходящим и нисходящим | ASC |
thumbWidth | Ширина пиктограммы для обложки альбома | 100 |
thumbHeight | Высота пиктограммы для обложки альбома | 100 |
thumbZoomCrop | Использовать или нет увеличение и кадрирование для пиктограммы обложки альбома | 1 |
thumbFar | Соотношение сторон для phpThumb с пиктограммой обложки альбома | С |
thumbQuality | Качество пиктограммы обложки альбома (от 1 до 100) | 90 |
thumbProperties | JSON параметры для ввода в phpThumb в качестве свойств пиктограммы альбома. | |
albumRequestVar | Если checkForRequestAlbumVar установлен как «Верно» на сниппете Gallery, будет искать запрос с данным именем для выбранного альбома | |
prominentOnly | Если установлено значение «1», будут отображаться только альбомы с пометкой «Важный» | true |
Чанки альбомов галереи
В приложении задействован только один чанк. Его соответствующий параметр в Gallery:
- rowTpl – чанк для каждого из отображаемых альбомов.
Примеры
Охватывает список из первых 10 активных, «важных» альбомов:
Захватывает 10 «важных» альбомов, выбранных буквенно-цифровой сортировкой:
Захватывает 3 недавно использованных альбома, вне зависимости от важности и устанавливает в подстановщик 'albums':
Отображает 3 недавно использованных альбома со случайной обложкой:
<code></code>
Используя &thumbProperties, установите вывод пиктограмм в 90 процентном качестве jpg вместо png:
<code></code>
Чанк rowTpl
Этот чанк используется для каждого альбома, который повторяется в сниппете GalleryAlbums
Значение по умолчанию
<li
<code></code>
><a href="
<code>documentation/gallery/?%5B%5B%2BalbumRequestVar%5D%5D=%5B%5B%2Bid%5D%5D</code>
">
<code></code>
</a></li>
Доступные подстановщики
Имя |
Описание |
id |
ID альбома |
name |
Название альбома |
parent |
Родительское ID альбома. Значение по умолчанию «0» |
description |
Описание альбома |
createdon |
Отметка времени, в которое был создан данный альбом |
createdby |
ID пользователя, создавшего данный альбом |
rank |
Ранг или порядок, в котором сортируются альбомы |
active |
Есть ли у данного альбома отметка «Активный». Может быть значение «1» или «0» |
prominent |
Есть ли у данного альбома отметка «Важный». Может быть значение «1» или «0» |
albumRequestVar |
Параметр albumRequestVar, введенный в сниппет GalleryAlbums. Значение по умолчанию - galAlbum |
image |
Ссылка на изображение, определенная в сниппете GalleryAlbums |
Когда Вы используете подстановщик изображения в шаблоне как ресурс для метки изображения, он не подчиняется свойствам пиктограммы, описанным в сниппете. Но не переживайте, Вы можете добавить свойства самостоятельно, и они фактически станут вызовом для phpthumb. Допустим, Вы хотите создать пиктограмму с размерами 240x160, увеличением и кадрированием. Для этого сделайте следующее:
<img src="
<code>&w=240&h=160&zc=1"alt="</code>
"/>
Сниппет «GalleryItem (Элемент галереи)»
Сниппет GalleryItem отображает единичный элемент галереи.
Свойства
Имя | Описание | Значение по умолчанию |
id | ID элемента для отображения | |
toPlaceholders | Если верно, установит свойства элемента в подстановщики. Если неверно, использует свойство tpl для вывода чанка | 1 |
toPlaceholdersPrefix | По желанию. Добавит префикс к подстановщику, установленному сниппетом. Работает только тогда, когда значение подстановщика верно | galitem |
tpl | Чанк для использования, если значение toPlaceholders неверно | galItem |
albumTpl | Имя чанка для каждого альбома, включенного в список элемента | galItemAlbum |
albumSeparator | Сепаратор для каждого альбома, включенного в список элемента | , |
albumRequestVar | Запрос, используемый при связке альбомов | galAlbum |
tagTpl | Имя чанка для каждого дескриптора, включенного в список элемента | galItemTag |
tagSeparator | Сепаратор для каждого дескриптора, включенного в список элемента | ,&nsbp; |
tagSortDir | Направление, в котором нужно сортировать дескрипторы, включенные в список элемента | DESC |
tagRequestVar | Запрос, используемый при связке дескрипторов | galTag |
thumbWidth | Максимальная ширина полученной пиктограммы, в пикселях | 100 |
thumbHeight | Максимальная высота полученной пиктограммы, в пикселях | 100 |
thumbZoomCrop | Использовать или нет увеличение и кадрирование для пиктограммы | 1 |
thumbQuality | Качество пиктограммы. Может быть от 0 до 100 | 90 |
thumbFar | Значение "far" для phpThumb пиктограммы, для увеличения с соотношением сторон | С |
thumbProperties | JSON параметры для ввода в phpThumb в качестве свойств пиктограммы. | |
imageWidth | Максимальная ширина полученного изображения | 500 |
imageHeight | Максимальная высота полученного изображения | 500 |
imageZoomCrop | Использовать или нет увеличение и кадрирование для изображения | 0 |
imageQuality | Качество изображения от 0 до 100 | 90 |
imageFar | Значение "far" для phpThumb изображения, для увеличения с соотношением сторон | С |
imageProperties | JSON параметры для ввода в phpThumb в качестве свойств изображения. |
Подстановщики по умолчанию
Когда значение toPlaceholders установлено на «1», GalleryItem автоматически устанавливает подстановщики для этого элемента. По умолчанию в них есть префикс 'galitem', но Вы можете его изменить в параметре toPlaceholdersPrefix. Вот список этх подстановщиков:
Имя | Описание |
name | Имя элемента |
filename | Имя файла элемента. Оно будет зависимо от пути, который обычно можно обозначить как assets/components/gallery/files/ (массивы/компоненты/галерея/файлы) |
description | Описание элемента |
mediatype | Медиатип элемента. На данный момент, это просто 'image' (изображение) |
createdon | Отметка времени, в которое был создан данный элемент |
createdby | ID пользователя, создавшего данный элемент |
active | Показывает, активен ли элемент. Может быть со значением «1» или «0». |
albums | Список альбомов, содержащих данный элемент |
tags | Список меток, связанных с данным элементом |
url | Если указан, URL-адрес элемента |
Чанк «GalleryItem(Элементгалереи)»
В приложении задействованы три чанка. Их соответствующие параметры в Gallery:
- tpl – чанк для использования, если значение toPlaceholders равно «0»
- albumTpl – чанк для каждого из альбомов, перечисленных в элементе
- tagTpl - чанк для каждого из дескрипторов, перечисленных в элементе
Примеры
Отображает элемент с ID 12, но только, если он существует:
<code> </code>
Отображает элемент с ID 23, но с использованием чанка под названием «Фото»:
<code></code>
Отображает элемент с ID 432 с использованием чанка под названием «Фото», но разделяет дескрипторы, связанные с ним, вертикальной линией ("|"):
<code></code>
Чанк «GalleryItem's albumTpl»
Чанк, используемый для каждого альбома, связанного с элементом, извлекаемым сниппетом GalleryItem при помощи свойства &albumTpl.
Значение по умолчанию
<code><span class="gal-item-album"><a href="documentation/gallery/?="></a></span></code>
Доступные подстановщики
Имя | Описание |
id | ID альбома |
name | Название альбома |
parent | Родительское ID альбома. Значение по умолчанию «0» |
description | Описание альбома |
createdon | Отметка времени, в которое был создан данный альбом |
createdby | ID пользователя, создавшего данный альбом |
rank | Ранг или порядок, в котором сортируются альбомы |
active | Есть ли у данного альбома отметка «Активный». Может быть значение «1» или «0» |
prominent | Есть ли у данного альбома отметка «Важный». Может быть значение «1» или «0» |
albumRequestVar | Параметр albumRequestVar, введенный в сниппет GalleryAlbums. Значение по умолчанию - galAlbum |
GalleryItemPagination
Предлагает подстановщики для базовой навигации (предыдущий/следующий) при единичном отображении элемента галереи сниппетом GalleryItem.
Свойства
Сниппет GalleryItem «Нумерация страниц» использует следующие свойства:
Имя | Описание | Значение по умолчанию |
curItem | ID текущего изображения. Его можно превзойти URL параметром | 1, or an url parameter |
checkForRequestVar | Превосходить или нет curItem (текущий URL элемента) URL параметром, указанным в свойстве getParam | 1 |
getParam | URL параметр для использования в checkForRequestVar | galItem |
album | ID или название альбома | 1 |
checkForRequestAlbumVar | Превосходить или нет curItem (текущий URL элемента) URL параметром, указанным в свойстве albumRequstVar | 1 |
albumRequestVar | URL параметр для использования в checkForRequestAlbumVar | galAlbum |
Подстановщики
GalleryItemPagination устанавливает подстановщики для текущего, предыдущего, следующего, первого и последнего элемента в альбоме. Вы можете найти пространство имён в приведенной ниже таблице. Вы можете использовать те же поля, что и в GalleryItem placeholders, минус альбом и метки.
Имя | Описание |
galitem.cur.* | Пространство имени подстановщика для текущего элемента альбома |
galitem.prev.* | Пространство имени подстановщика для предыдущего элемента альбома |
galitem.next.* | Пространство имени подстановщика для следующего элемента альбома |
galitem.first.* | Пространство имени подстановщика для первого элемента альбома |
galitem.last.* | Пространство имени подстановщика для последнего элемента альбома |
Примеры подстановщиков
Ниже Вы можете найти некоторые обычные подстановщики для GalleryItemPagination, которые можно использовать в Вашем файле шаблона/ресурсе:
Имя | Описание |
galitem.cur.id | Подстановщик для текущего ID элемента альбома |
galitem.prev.id | Подстановщик для предыдущего ID элемента альбома |
galitem.next.id | Подстановщик для следующего ID элемента альбома |
galitem.first.id | Подстановщик для первого ID элемента альбома |
galitem.last.id | Подстановщик для последнего ID элемента альбома |
galitem.next.filename | Имя файла следующего элемента |
galitem.cur.description | Описание текущего элемента |
Примеры GalleryItemPagination
Отобразите базовую навигацию для элемента GalleryItem и используйте предыдущий и следующий подстановщики.
Создайте сниппет 'GalleryItemPagination'
Прежде всего, создайте сниппет. Назовите его 'GalleryItemPagination' и сохраните.
<code><!--?php // First instantiate the Gallery package --->addPackage('gallery',$modx->getOption('gallery.core_path',$config,$modx->getOption('core_path').'components/gallery/').'model/'); $curItem= $modx->getOption('curItem',$scriptProperties,1); if($modx->getOption('checkForRequestVar',$scriptProperties,true)) { $getParam= $modx->getOption('getParam',$scriptProperties,'galItem'); if(!empty($_REQUEST[$getParam])) { $curItem= (int)$_REQUEST[$getParam]; } } if(empty($curItem)) return''; $album= $modx->getOption('album',$scriptProperties,1); if($modx->getOption('checkForRequestAlbumVar',$scriptProperties,true)) { $albumRequestVar= $modx->getOption('albumRequestVar',$scriptProperties,'galAlbum'); if(!empty($_REQUEST[$albumRequestVar])) $album= $_REQUEST[$albumRequestVar]; } // We pass the album name/ID to an &album property and find the gallery object if(!is_int($album)) { $gallery= $modx->getObject('galAlbum',array('name'=> $album)); if($galleryinstanceofgalAlbum) $album= $gallery->get('id'); } $c= $modx->newQuery('galAlbumItem'); $c->innerJoin('galItem','Item'); $c->where( array( 'album'=> $album, ) ); $c->select( array( 'galAlbumItem.*', 'Item.*', ) ); $c->sortby('rank','asc'); $collection= $modx->getCollection('galAlbumItem',$c); $items= array(); foreach($collectionas$i) { $items[] = $i->toArray(); } $continue= true; $i= 0; $prev= array(); $cur= array(); $next= array(); while($continue) { $prev= $cur; $cur= $items[$i]; if($cur['id'] == $curItem) { $next= $items[$i+1]; $continue= false; } $i++; } $first= $items[0]; $last= $items[count($items)-1]; $phs['galitem.cur.'] = $cur; $phs['galitem.prev.'] = $prev; $phs['galitem.next.'] = $next; $phs['galitem.first.'] = $first; $phs['galitem.last.'] = $last; $modx->setPlaceholders($phs); return'';</code>
Теперь настройте Ваш подстановщик для навигации:
<code> `]]</code>
Чанк GalleryItem's tpl
Этот чанк используется, когда значение &toPlaceholders равно «0» на сниппете GalleryItem.
Значение по умолчанию
<code><a href=""> <img src="" alt="" /> </a></code>
Доступные подстановщики
Имя | Описание |
name | Имя элемента |
filename | Имя файла элемента. Оно будет зависимо от пути, который обычно можно обозначить как assets/components/gallery/files/ (массивы/компоненты/галерея/файлы) |
description | Описание элемента |
mediatype | Медиатип элемента. На данный момент, это просто 'image' (изображение) |
createdon | Отметка времени, в которое был создан данный элемент |
createdby | ID пользователя, создавшего данный элемент |
active | Показывает, активен ли элемент. Может быть со значением «1» или «0» |
albums | Список альбомов, содержащих данный элемент |
tags | Список меток, связанных с данным элементом |
Плагин Gallerriffic
Этот плагин позволяет быстро выводить галерею и отображать изображения в ней. Плагин требует загруженного на странице jQuery для корректной работы.
Использование
Просто добавьте этот плагин в сниппет Gallery:
<code></code>
Доступные свойства
Galleriffic превзойдет следующие свойства в сниппете Gallery. Если Вы хотите их превзойти, просто введите вместо начальных свойств, свойства с префиксом «galleriffic».
Имя | Превосходит | Описание | Значение по умолчанию |
gallerifficThumbTpl | thumbTpl | Чанк метки для каждого из элементов | GallerifficItemThumb |
gallerifficContainerTpl | containerTpl | Чанк-контейнер, в который заключается содержание | Galleriffic |
gallerifficThumbWidth | thumbWidth | Ширина пиктограммы | 75 |
gallerifficThumbHeight | thumbHeight | Высота пиктограммы | 75 |
Так же Galleriffic выпускается с несколькими собственными свойствами. Вы можете ввести эти свойства, чтобы превзойти настройки по умолчанию Gallery.
Имя | Описание | Значение по умолчанию |
numThumbs | Количество отображаемых пиктограмм на страницу | 15 |
navigationWidth | Ширина навигационной панели в пикселях | 300px |
enableTopPager | Показывать или нет верхнюю нумерацию страниц | 1 |
enableBottomPager | Показывать или нет нижнюю нумерацию страниц | 1 |
maxPagesToShow | Максимальное число страниц для отображения | 7 |
renderSSControls | Визуализировать или нет элементы управления слайд-шоу | 1 |
renderNavControls | Визуализировать или нет навигационные элементы управления | 1 |
enableHistory | Нужно ли включать историю | 0 |
autoStart | Начинать или нет автоматический показ слайд-шоу | 0 |
defaultTransitionDuration | Продолжительность перехода в миллисекундах | 500 |
thumbsContainerSel | CSS-селектор для контейнера, содержащего пиктограммы | #gal-gaff-thumbs |
imageContainerSel | CSS-селектор для контейнера, содержащего основное изображение | #gal-gaff-slideshow |
captionContainerSel | CSS-селектор для контейнера, содержащего титры | #gal-gaff-caption |
controlsContainerSel | CSS-селектор для контейнера, содержащего навигационные элементы управления | #gal-gaff-controls |
loadingContainerSel | CSS-селектор для контейнера, содержащего экран загрузки | #gal-gaff-loading |
playLinkText | Текст, используемый для ссылки на проигрывание слайд-шоу | |
pauseLinkText | Текст, используемый для ссылки на паузу в слайд-шоу | |
prevLinkText | Текст, используемый для ссылки на предыдущее фото в слайд-шоу | |
nextLinkText | Текст, используемый для ссылки на следующее фото в слайд-шоу | |
prevPageLinkText | Текст, используемый для ссылки на предыдущую страницу слайд-шоу | |
nextPageLinkText | Текст, используемый для ссылки на следующую страницу слайд-шоу |
Примеры
Используйте плагин Galleriffic, но отобразите только 10 меток на страницу:
<code> </code>
Спрячьте нумерацию страниц и покажите элементы управления слайд-шоу, но начните слайд-шоу автоматически:
<code> </code>
Плагин Gallery «Slimbox»
Этот плагин позволяет быстро выводить приложение Gallery и отображать пиктограммы изображений с простым полупрозрачным наложением, когда Вы нажимаете на пиктограмму. Используется Slimbox2 plugin для jQuery.
Использование
Просто добавьте этот параметр для сниппета Gallery:
|
<code></code> |
Доступные свойства
Slimbox выпускается с несколькими собственными свойствами. Вы можете ввести эти свойства, чтобы превзойти настройки по умолчанию Gallery.
Имя | Описание | Значение по умолчанию |
slimboxUseCss | Со значением «1» будет использовать предоставленный слимбокс CSS-файла | 1 |
slimboxCss | Если значение slimboxUseCss равно 1, то загрузит CSS-файл с данным свойством. Если значение не установлено, будет использовано предоставленное свойство | {slimbox_url}packages/slimbox/css/slimbox2.css |
slimboxRenderJsOnStartup | Загрузите Slimbox JS в заголовке страницы. Если значение «0», то загрузится внизу страницы | 1 |
slimboxLoadJQuery | Если установлено значение «1», то добавит JQuery в загрузку страницы. Оставьте «0», если Вы уже загрузили JQuery (рекомендуется) | 0 |
slimboxJQueryUrl | Если значение slimboxLoadJQuery равно «1», загрузит файл jQuery JS с данного URL-адреса | |
slimboxJsTpl | Чанк файла шаблона для slimbox JS. Вы можете пропустить эту настройку в большинстве случаев | slimbox/js |
Ниже представлены настройки, влияющие на поведение Slimbox
Имя | Описание | Значение по умолчанию |
loop | Если установлено значение «1», позволяет пользователю перемещаться между первым и последним изображением в галерее Slimbox, если существует более одного изображения для показа | 0 |
overlayOpacity | Уровень прозрачности фонового наложения. «1» - непрозрачный, «0» - полностью прозрачный | 0.8 |
overlayFadeDuration | Длительность постепенного появления и затухания анимации наложения в миллисекундах. Установите «0» для деактивации данных эффектов | 400 |
resizeDuration | Длительность анимации изменения ширины и высоты в миллисекундах. Установите «0» для деактивации анимации | 400 |
resizeEasing | Название модификации, которую Вы хотите применить для анимированного изменения размеров (требуется плагин jQuery Easing для всех эффектов, кроме «раскачивания»). Множество модификаций требует более длительное время для выполнения, чтобы все выглядело красиво, поэтому так же отрегулируйте опцию resizeDuration | swing |
initialWidth | Начальная ширина блока наложения в пикселях | 250 |
initialHeight | Начальная высота блока наложения в пикселях | 250 |
imageFadeDuration | Длительность постепенного появления изображения в миллисекундах. Установите «0» для деактивации данных эффектов и немедленного появления изображения | 400 |
captionAnimationDuration | Длительность постепенного появления титров в миллисекундах. Установите «0» для деактивации данных эффектов и немедленного появления титров | 400 |
counterText | Значение текста. Позволяет Вам подстраивать, переводить или деактивировать текст, который появляется в титрах при множественном показе изображений. Внутри текста {x} будет заменен текущим индексом изображения, а {y} заменит общее количество изображений. Установите неверное значение (булево значение без кавычек) или "" для деактивации счетчика | "Image {x} of {y}" |
Примеры
Загрузите Slimbox для альбома с ID 2 и сделайте повторяющийся цикл. Так же, загрузите jQuery:
<code></code>
Загрузите Slimbox для альбома с ID 2 и поставьте JS и CSS внизу страницы:
<code></code>
Настройка Вашей Галереи
Это краткое руководство покажет Вам, как настроить базовую галерею для Вашего сайта, в которой будет отображаться список альбомов, а когда альбом будет выбран, будут отображаться картинки этого альбома. После клика по пиктограмме, показывается увеличенная версия альбома.
Загрузка Ваших фотографий
Вам нужно показать несколько фото, поэтому их нужно загрузить перед настройкой дисплея:
- В верхнем меню менеджера перейдите в Компоненты->Галерея
- Нажмите «Создать альбом»
- Введите имя и описание Вашего альбома
- Поставьте галочку в поле «Активный»
- Нажмите «Сохранить»
Теперь – правый клик, в открывшемся меню выберите пункт «Обновить альбом». Сейчас выберите «Единичная загрузка» или «Пакетная загрузка» и загрузите несколько фотографий.
Отображение Ваших фотографий
Прежде всего, введите данный код в Ваш ресурс:
<div style="float: right"> <h2>Galleries</h2> <ul>
<code></code>
</ul> </div> <h2>Item</h2>
<code></code>
<hr />
<code></code>
<h1><a href="
<code>documentation/gallery/</code>
">
<code></code>
</a></h1> <p>
<code></code>
</p>
<code> </code>
Готово! Теперь все работает. Давайте рассмотрим каждую часть отдельно.
Создание списка альбомов галереи
Итак, для построения списка альбомов используем следующий код:
<code class="php plain"><div style=</code><code class="php string">"float: right"</code><code class="php plain">></code>
<code class="php plain"><h2>Galleries</h2></code>
<code class="php plain"><ul></code>
<code></code>
<code class="php plain"></ul></code>
<code class="php plain"></div></code>
Мы запустили сниппет GalleryAlbums. Теперь, на нашем HTML мы перенесли его вправо – Вам этого делать не нужно. Мы сделали это для сохранения "недвижимости" экрана. Готово. Сейчас GalleryAlbums будет отображать список альбомов и по ним можно кликать.
Отображение выбранных альбомов
Теперь, когда Вы кликнули на альбоме, нужно, чтобы отображались изображения из этого альбома. К счастью, сниппет Gallery работает в тандеме со сниппетом GalleryAlbums, поэтому нужно сделать только следующее:
<code></code>
<code class="php plain"><h1><a href=</code><code class="php string">"</code>
<code>documentation/gallery/</code>
<code class="php string">"</code><code class="php plain">></code>
<code></code>
<code class="php plain"></a></h1></code>
<code class="php plain"><p></code>
<code></code>
<code class="php plain"></p></code>
<code></code>
Мы установили галереи для начального отображения альбома с ID 1. Если нажать на ссылку сниппета GalleryAlbums, ее значение превзойдет предыдущее, но сейчас нам нужно начать с альбома № 1. Так же, мы установили это значение для подстановщика с названием 'gallery', поэтому можем вывести некоторую информацию об альбоме, например, его название и описание.
Показывать увеличенное изображение
Теперь у нас есть пиктограммы, но мы хотим, чтобы при клике по ней, показывалось увеличенное изображение. Все просто: сниппет GalleryItem сделает это автоматически.
<code></code>
<code class="php plain"></code>
Сниппет GalleryItem ищет параметр "galItem" в URL-адресе. Когда он его найдет, загрузит изображение из альбома. Сниппет Gallery использует его для URL-адресов для пиктограмм. Далее, мы выводим некоторые метаданные, такие как имя, альбомы, метки и ссылку на них.
Теперь мы закончили! Можете немедленно приступать к использованию Gallery!
Заключение
Есть еще множество функций этого приложения, но мы надеемся, что это краткое руководство дало Вам представление о том, как все элементы взаимодействуют друг с другом.
Пользовательский TV для GalleryItem
Приложение Gallery выпускается с пользовательским типом ввода и вывода для TV (переменные шаблона) в версии Revolution. Это позволяет Вам получать классное размещение изображений в Вашем ресурсе. Вы можете кадрировать, изменять размер, вращать изображения и использовать множество других функций при помощи TV:
Настройка TV
Сначала нужно настроить TV. Создайте ее:
- загрузите и создайте страницу переменных шаблона и дайте имя вашей TV
- выберите тип ввода 'galleryitem'
- выберите тип вывода 'galleryitem'
- назначьте TV для шаблона
- сохраните!
Теперь Вы должны видеть Ваш TV в ресурсе с шаблонами, для которых Вы эту переменную назначили.
Использование TV
Теперь выберите «Выбрать изображение» и укажите альбом в дереве слева. После, выберите фото, которое хотите использовать – фото загрузится в полном размере в редактор фотографий. Теперь Вы можете изменять размер (так же кадрировать), вращать фотографию и использовать множество других функций.
Когда Вы закончите редактирование изображения, поместите метки TV в Ваш контент. Например, если Ваша переменная называлась “Photo”, поместите в Ваш контент:
<code></code>
Теперь приложение автоматически визуализирует изображение и помещает его в нужное место.