MODX Gallery (дополнение для создания галереи): полная документация на русском

Установка

Дополнение можно установить из репозитория modx. Для корректной работы, на хостинге должен быть включен php-mbstring.

Использование

Галереи можно вызывать так:

[[Gallery? &album=`My Album`]] или так [[GalleryAlbums? &limit=`10`]]

Сниппет Gallery

Отображает «галерею» изображений либо из альбома, либо из тега, либо из обоих.

Параметры

Чанки

В галерее обрабатываются 2 блока. Соответствующие им параметры галереи:

• thumbTpl — чанк, используемый для каждого отображаемого элемента
• containerTpl — необязательно. Если установлено, обернет содержимое этим чанком.

thumbTpl

Значение по умолчанию

<div class="[[+cls]]">
    <a href="[[+linkToImage:if=`[[+linkToImage]]`:is=`1`:then=`[[+image_absolute]]`:else=`[[~[[*id]]?
            &[[+imageGetParam]]=`[[+id]]`
            &[[+albumRequestVar]]=`[[+album]]`
            &[[+tagRequestVar]]=`[[+tag]]` ]]`]]">
        <img class="[[+imgCls]]" src="[[+thumbnail]]" alt="[[+name]]" />
    </a>
</div>

Доступные плейсхолдеры

containerTpl

Этот чанк используется, когда в вызове Gallery используется параметр containerTpl.

На самом деле рекомендуется не использовать это свойство, а просто поместить вывод в свой ресурс или блок; это даст вам больше гибкости в будущем.

Значение по умолчанию

Для &containerTpl; значения по умолчанию не существует. если ничего не указано, вывод не будет заключен в какой-либо контейнер.

Доступные плейсхолдеры

Плагины

Галерея позволяет отображать галереи либо прямо в виде миниатюр в интерфейсе, либо с помощью плагинов jQuery. Вы можете передать имя плагина через свойство и плагин фрагмента галереи.

• Slimbox
• Galleriffic

Обратите внимание, что Galleriffic изменяет thumbTplсвойство на gallerifficThumbTpl, а containerTplсвойство на gallerifficContainerTpl.

Примеры

Отобразите галерею фотографий в альбоме «My Album»:

[[!Gallery? &album=`My Album`]]

Отобразите галерею фотографий в альбоме «Trucks», но используйте для миниатюр пользовательский блок «truckThumb»:

[[!Gallery? &album=`Trucks` thumbTpl=`truckThumb`]]

Отобразите галерею фотографий с тегом «Cool» и используйте плагин Galleriffic:

[[!Gallery? &tag=`Cool` &plugin=`Galleriffic`]]

Возьмите только 3 фотографии из альбома «Cars» и поместите их в заполнитель «gallery»:

[[!Gallery?
    &limit=`3`
    &album=`Cars`
    &toPlaceholder=`gallery`
]]
<div class="my-gallery">
[[+gallery]]
</div>

Использование &thumbProperties для установки вывода миниатюр в формате jpg с качеством 90% вместо png:

[[!Gallery?
    &album=`My Album`
    &thumbProperties=`{"f":"jpg","q":"90%"}`
]]

Сниппет GalleryAlbums

Этот сниппет отображает список альбомов. По умолчанию он захватывает только «известные» альбомы.

Вы можете отобразить миниатюру для каждого альбома изображения в альбоме, установив для свойства rowTpl значение galAlbumRowWithCoverTpl или используя [[+image]]свой собственный rowTpl.

Параметры

Чанки

Следующие чанки обрабатываются в GalleryAlbums. Соответствующие параметры GalleryAlbums.

containerTpl

Используется для упаковки всех строк альбома.

Значение по умолчанию: нет значения по умолчанию.

Доступные заполнители

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

[[+nav.curIdx:ne=`
<div>
    <ul>
        <li>
            [[+nav.prev:notempty=`<a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+nav.prev]]`]]">Previous Gallery</a>`:else=`<span>Previous Gallery</span>`]]
        </li>
        <li>
            <a href="[[~[[*id]]]]">Overview</a>
        </li>
        <li>
            [[+nav.next:notempty=`<a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+nav.next]]`]]">Next Gallery</a>`:else=`<span>Next Gallery</span>`]]
        </li>
    </ul>
    <div>Gallery [[+nav.curIdx]] of [[+nav.count]]</div>
</div>
`:else=`
<div>
    [[+albums]]
</div>
`]]

rowTpl

Чанк, используемый для каждого отображаемого альбома.

Значение по умолчанию:

<li[[+cls:notempty=``]]><a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]">[[+showName:notempty=`[[+name]]`]]</a></li>

Доступные плейсхолдеры

Когда вы используете заполнитель изображения в своем шаблоне в качестве источника для тега изображения, он, похоже, не подчиняется свойствам эскиза, указанным в вызове сниппета. Но не беспокойтесь, вы можете добавить их самостоятельно, поскольку этот заполнитель изображения на самом деле является вызовом phpthumb. Итак, допустим, вы хотите, чтобы ваше миниатюру было 240×160 с масштабированием, вы можете сделать:

<img src="[[+image]]&w=240&h=160&zc=1" alt="[[+name]]" />

Примеры

Возьмите список первых 10 активных, известных альбомов.

[[!GalleryAlbums]]

Возьмите 10 известных альбомов, отсортированных по алфавиту:

[[!GalleryAlbums?
    &sort=`name`
    &dir=`ASC`
]]

Возьмите 3 последних альбома, заметных или нет, и установите их в качестве заполнителя «альбомы»:

[[!GalleryAlbums?
    &limit=`3`
    &prominentOnly=`0`
    &toPlaceholder=`albums`
]]

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

[[!GalleryAlbums?
    &limit=`3`
    &albumCoverSort=`random`
]]

Использование &thumbProperties для установки вывода миниатюры обложки альбома в формате jpg с качеством 90% вместо png:

[[!GalleryAlbums?
    &thumbProperties=`{"f":"jpg","q":"90%"}`
]]

Сниппет GalleryItem

Сниппет GalleryItem отображает один элемент галереи.

Параметры

Placeholder по умолчанию

Если для параметра toPlaceholder установлено значение 1, GalleryItem автоматически устанавливает заполнители для элемента. По умолчанию они имеют префикс «galitem», но вы можете изменить это с помощью параметра toPlaceholderPrefix. Список этих заполнителей выглядит следующим образом:

Чанки

В GalleryItem обрабатываются 3 блока. Соответствующие им параметры GalleryItem.

tpl

Чанк, который будет использоваться, если для параметра toPlaceholder установлено значение 0.

Значение по умолчанию:

<a href="[[+url:is=``:then=`[[+image]]`:else=`[[+url]]`]]">
    <img src="[[+thumbnail]]" alt="[[+name]]" />
</a>

Доступные плейсхолдеры

albumTpl

Чанк, который будет использоваться для каждого альбома, указанного в вызове с элементом albumTpl.

Значение по умолчанию:

<span class="gal-item-album"><a href="[[~[[*id]]]]?[[+albumRequestVar]]=[[+id]]">[[+name]]</a></span>

Доступные плейсхолдеры.

tagTpl

Чанк используемый для каждого тега, указанного в элементе tagTpl.

Значение по умолчанию:

<span class="gal-item-tag"><a href="[[~[[*id]]]]?[[+tagRequestVar]]=[[+tag]]">[[+tag]]</a></span>

Доступные плейсхолдеры.

Примеры

Отобразите элемент с идентификатором 12, но только если он существует.

[[!GalleryItem? &id=`12`]]
[[!+galitem.image:notempty=`
    <div class="image">
    <a href="[[+galitem.image]]">
    <img src="[[+galitem.image]]" alt="[[+galitem.name]]" />
    </a>
    <br />Albums: [[+galitem.albums]]
    <br />Tags: [[+galitem.tags]]
    </div>
`]]

Отобразите элемент с идентификатором 23, но используйте для отображения чанк под названием «Photo».

[[!GalleryItem?
    &id=`23`
    &toPlaceholders=`0`
    &tpl=`Photo`
]]

Отобразите элемент с ID 432 в блоке под названием ‘Photo’, но разделите связанные с ним теги вертикальной чертой («|»):

[[!GalleryItem?
    &id=`432`
    &toPlaceholders=`0`
    &tpl=`Photo`
    &tagSeparator=` | `
]]

Системные настройки

Вы можете изменить место, где вы храните изображения из Галереи, изменив следующие настройки:

Использование кастомного TV

Галерея поставляется с настраиваемым типом TV для управления изображениями Галереи в серверной части. Вы можете обрезать, изменять размер, вращать и многое другое.

Создание

• Создайте дополнительное поле (имя любое),
• Выберите тип ввода ‘galleryitem’
• Выберите тип вывода ‘galleryitem’
• Свяжите установите шаблоном
• Сохраните!

Использование

Оттуда просто нажмите «Выбрать изображение» и выберите альбом галереи в левом дереве. Затем выберите фотографию, которую хотите использовать. Это загрузит фотографию в полном размере в фоторедактор. Затем вы можете изменить размер фотографии (и обрезать ее), повернуть и многое другое.

Когда вы закончите редактировать его, просто поместите теги телевизора в свой контент. Например, если ваш телевизор был назван «фото», вы бы поместили это в свой контент: [[*photo]]. Gallery автоматически отрендерит изображение и разместит его!

Страница менеджера галереи

Галерея поставляется с настраиваемой страницей менеджера (находится в верхнем меню «Компоненты»), где вы можете управлять своими альбомами. Вы можете создавать новые и использовать имя, которое вы даете ему во фрагменте галереи, для получения этого конкретного альбома. После создания альбома вы можете щелкнуть правой кнопкой мыши и обновить его, чтобы управлять фотографиями, связанными с ним.

Вы можете использовать четыре разных типа загрузки. Либо загрузка одного элемента (необязательно с расширенным текстовым описанием, см. Параметры системы, описанные выше), множественная загрузка, массовая загрузка, при которой выполняется поиск папки в файловой системе и импортируются найденные изображения, либо загрузка zip, которая распаковывает файл zip.

Медиа Источник

Галерея поставляется с настраиваемым типом источника мультимедиа, который можно использовать для отображения ваших альбомов и их элементов в левом дереве диспетчера. Просто создайте новый источник мультимедиа с типом «Галерея альбомов», а Галерея позаботится обо всем остальном.

Примеры

Пример строки кода для галереи на базе Galleriffic для альбома «Мой альбом».

[[!Gallery? &album=`Мой альбом` &plugin=`galleriffic`]]

Возьмите первые 10 фотографий с меткой (тегом) «Fun»:

[[!Gallery? &tag=`Fun`]]

Захватите все фотографии из альбома «Мой альбом» с тегом «Синий»:

[[!Gallery? &album=`Мой альбом` &tag=`Синий`]]