Gallery в MODX: документация и практические примеры

Gallery — дополнение MODX для управления альбомами и изображениями. Ниже собрана документация по сниппетам Gallery, GalleryAlbums и GalleryItem: параметры, чанки, плейсхолдеры и системные настройки.

После справочника находятся две практики: портфолио Creative и галерея FlexStart с фильтрами по категориям. Основные вызовы показаны стандартными тегами MODX, варианты на Fenom вынесены в раскрывающиеся блоки.

Если проходите учебный маршрут, в предыдущем уроке мы выводили изображения через MIGX. Здесь подключим ту же секцию через Gallery, сохранив оформление сайта.

Установка и подготовка Gallery

Если идете по учебному маршруту, Gallery уже установлен в уроке о дополнениях. Повторять установку не нужно.

Для отдельной установки найдите Gallery у официального поставщика MODX. Перед загрузкой проверьте требования выбранного выпуска и совместимость с вашей версией MODX и PHP.

Основная практика выполняется в MODX 2. Интерфейс других выпусков может отличаться. Не ориентируйтесь только на номер дополнения или общий заголовок карточки пакета — смотрите конкретный доступный выпуск.

Для работы проверьте расширение PHP mbstring. При проблемах с миниатюрами дополнительно проверяйте требования обработчика изображений и журнал PHP: наличие одного расширения не гарантирует исправность всей цепочки загрузки и обработки файлов.

После установки откройте пункт Gallery в меню Пакетов.

Документация

Галереи можно вызывать так: [[Gallery? &album=`My Album`]] или так [[GalleryAlbums? &limit=`10`]]

PDF-шпаргалка Gallery для печати

Основные параметры Gallery, GalleryAlbums и GalleryItem собраны в отдельную PDF-шпаргалку. В ней есть плейсхолдеры, настройки миниатюр, примеры вызовов и короткая проверка ошибок.

Скачайте справочник и распечатайте, чтобы держать его рядом во время настройки. Подробные пояснения и практические примеры остаются в этой статье.

Сниппет 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; значения по умолчанию не существует. если ничего не указано, вывод не будет заключен в какой-либо контейнер.

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

Плагины

Ниже перечислены дополнительные интеграции Gallery. В практиках Creative и FlexStart они не используются: просмотр изображений обеспечивают библиотеки исходных шаблонов.

Галерея позволяет отображать галереи либо прямо в виде миниатюр в интерфейсе, либо с помощью плагинов 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:

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

Сниппет GalleryAlbums

Этот сниппет отображает список альбомов. По умолчанию GalleryAlbums отбирает альбомы, отмеченные признаком prominent. Для вывода без этого ограничения используйте prominentOnly=0.

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

Параметры

Чанки

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

containerTpl

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

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

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

Простейшая обертка списка альбомов использует плейсхолдер albums. Создайте чанк gallery.albums.wrapper:

<ul class="gallery-albums">
    [[+albums]]
</ul>

Пример вызова со стандартным чанком строки:

[[!GalleryAlbums?
    &rowTpl=`galAlbumRowTpl`
    &containerTpl=`gallery.albums.wrapper`
    &prominentOnly=`0`
]]

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 по умолчанию

При toPlaceholders=1 сниппет GalleryItem записывает данные изображения в плейсхолдеры. По умолчанию используется префикс galitem, например [[+galitem.name]]. Изменить его можно параметром toPlaceholdersPrefix.

Список этих заполнителей выглядит следующим образом:

Чанки

В 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=` | `
]]

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

Параметры gallery.tiny.* относятся к интеграции с TinyMCE. Не считайте их готовой настройкой любого современного пакета TinyMCE Rich Text Editor без проверки совместимости. Для практических примеров ниже визуальный редактор не требуется.

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

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

TV galleryitem: выбираем одно изображение из альбома

Кроме вывода целой галереи, Gallery позволяет выбирать отдельное изображение через дополнительное поле ресурса. Например, так можно назначить иллюстрацию странице, не копируя ее адрес вручную.

Это отдельная мини-практика. Для нее нужен установленный Gallery и альбом хотя бы с одним изображением. Если альбом еще не создан, сначала выполните подготовку из первой практики ниже, затем вернитесь к этому разделу.

Не путайте три сущности:

• GalleryItem — сниппет для получения отдельного элемента по ID.
• galleryitem как тип ввода TV — интерфейс выбора изображения.
• galleryitem как тип вывода TV — обработка выбранного значения для показа на странице.

Создаем дополнительное поле

На вкладке «Элементы» откройте раздел дополнительных полей и создайте TV:

• Имя: gallery_photo.
• Подпись для редактора: Изображение из Gallery.
• Описание: Выберите изображение из альбома Gallery.

На вкладке параметров ввода выберите тип galleryitem.

Перейдите на вкладку параметров вывода и также выберите galleryitem. Для первой проверки дополнительные параметры оставьте без изменений.

На вкладке доступа для шаблонов отметьте шаблон учебного ресурса и сохраните TV.

Если типа galleryitem нет в списке, проверьте установленный пакет Gallery и ошибки его установки. Не подменяйте его обычным типом image: это другой способ выбора и вывода изображения.

Выбираем изображение у ресурса

Заново откройте ресурс, которому назначен выбранный шаблон. На вкладке дополнительных полей найдите «Изображение из Gallery».

1. Нажмите кнопку выбора изображения.
2. В открывшемся интерфейсе выберите альбом Gallery.
3. Выберите нужное изображение.
4. Убедитесь, что оно появилось в редакторе поля.
5. Сохраните ресурс.

Для первой проверки просто выберите изображение, без обрезки и других преобразований. Сначала убедимся, что выбор сохраняется и выводится на сайте.

Выводим выбранное изображение

Откройте шаблон, назначенный учебному ресурсу. Для проверки временно добавьте перед закрывающим тегом </body>:

<div class="gallery-photo-example">
    [[*gallery_photo]]
</div>

Сохраните шаблон и откройте ресурс на сайте. Проверочное изображение появится в конце страницы. После проверки вызов можно перенести в нужное место оформления.

При выбранном типе вывода galleryitem обычный тег TV запускает обработку значения. Поэтому не нужно помещать его внутрь еще одного img:

<!-- Для этой настройки TV так делать не нужно: -->
<img src="[[*gallery_photo]]" alt="Gallery в MODX: документация и практические примеры">

Не добавляйте к [[*gallery_photo]] модификатор htmlent: в этом месте нужен результат обработки TV, а не показ HTML как текста.

Для ограничения отображаемой ширины добавьте в подключенный файл стилей:

.gallery-photo-example {
    max-width: 650px;
    margin: 24px auto;
}

.gallery-photo-example img {
    display: block;
    max-width: 100%;
    height: auto;
}

В Creative это можно добавить в css/styles.css. Для другой HTML-основы используйте ее подключенный файл стилей.

CSS ограничивает размер изображения на странице, но сам по себе не уменьшает размер загружаемого файла.

Проверяем сохранение и редактирование

1. Заново откройте ресурс и убедитесь, что выбранное изображение сохранилось.
2. Выберите другое изображение, сохраните ресурс и обновите сайт.
3. Проверьте, что изменилось изображение нужного ресурса.

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

Редактирование через этот TV и массовое управление изображениями в альбоме — разные действия. Для изменения списка работ портфолио используйте менеджер Gallery, а не создавайте отдельное TV для каждой фотографии.

Если поле или изображение не появились

• Нет TV у ресурса — проверьте назначенный шаблон и доступ TV к этому шаблону.
• Нет нужного альбома или изображения в выборе — проверьте их наличие в менеджере Gallery.
• Выбор не сохранился — сохраните сам ресурс, затем откройте его заново.
• На сайте видны служебные данные вместо изображения — проверьте тип вывода galleryitem.
• HTML показан текстом — проверьте, не добавлено ли экранирование к результату TV.
• Изображение не загружается — откройте полученный src отдельно и проверьте пути и обработчик изображений.

Для этой практики используем стандартный вызов TV. Прямое получение сырого значения через переменную ресурса Fenom не следует считать автоматической заменой обработанного вывода galleryitem.

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

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

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

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

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

Примеры

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

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

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

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

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

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

Практика 1. Портфолио Creative через Gallery

Сохраняем сетку Creative, подписи и открытие большого изображения через SimpleLightbox. Меняем только источник данных: вместо TV portfolio_migx используем альбом Gallery.

Старые данные MIGX и его чанки пока не удаляем. Когда новый вариант заработает, на странице оставим только один вызов портфолио.

Создаем альбом

В менеджере Gallery создайте альбом с именем Creative Portfolio. При необходимости заполните описание и проверьте, что альбом активен.

В дальнейших вызовах используем имя альбома. Gallery также принимает его ID, но число из чужого примера не является ID вашего альбома.

Загружаем изображения

Откройте созданный альбом и выберите множественную загрузку изображений. В некоторых версиях кнопка называется Multi-Upload.

Для сравнения с MIGX можно загрузить те же шесть больших изображений из исходного Creative:

assets/img/portfolio/fullsize/1.jpg
assets/img/portfolio/fullsize/2.jpg
assets/img/portfolio/fullsize/3.jpg
assets/img/portfolio/fullsize/4.jpg
assets/img/portfolio/fullsize/5.jpg
assets/img/portfolio/fullsize/6.jpg

При обычной загрузке выбирайте файлы на компьютере из распакованного архива. Не нужно вводить приведенные пути в поле загрузчика: они показывают расположение исходных файлов.

Маленькие изображения из thumbnails отдельно не загружаем. В этом варианте Gallery подготовит миниатюры по параметрам вызова.

Загрузка изображений в Gallery не переносит автоматически подписи из TV MIGX. Их нужно заполнить в записях Gallery.

Заполняем название, описание и метки

Откройте редактирование первого изображения и заполните:

• Название: например, Учебный проект 1.
• Описание: короткое описание работы или изображения.
• Метки: например, Сайты.

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

В Creative метки используем только как подпись над названием работы. Фильтрации в этой первой практике нет.

Создаем чанк изображения

Создайте обычный чанк с именем creative.gallery.item:

<div class="col-lg-4 col-sm-6">
    <a class="portfolio-box" href="[[+image_absolute]]" title="[[+name:htmlent]]">
        <img class="img-fluid"
             src="[[+thumbnail]]"
             alt="[[+description:default=`[[+name]]`:htmlent]]" />
        <div class="portfolio-box-caption">
            <div class="project-category text-white-50">[[+tags:htmlent]]</div>
            <div class="project-name">[[+name:htmlent]]</div>
        </div>
    </a>
</div>

Сохраните чанк.

Основные плейсхолдеры:

• thumbnail — URL миниатюры, подготовленной Gallery.
• image_absolute — URL исходного изображения.
• name — название.
• description — описание; при пустом значении в alt используем название.
• tags — метки изображения.

Адреса изображений получаем от Gallery. Не добавляем к ним вручную base_url, каталог альбома или путь из старого TV.

Класс portfolio-box сохраняем: его использует SimpleLightbox в исходном Creative.

Создаем обертку портфолио

Создайте чанк creative.gallery:

<div id="portfolio">
    <div class="container-fluid p-0">
        <div class="row g-0">
            [[!Gallery?
                &album=`Creative Portfolio`
                &thumbTpl=`creative.gallery.item`
                &thumbWidth=`650`
                &thumbHeight=`350`
                &thumbZoomCrop=`1`
                &thumbQuality=`90`
                &sort=`rank`
                &dir=`ASC`
                &limit=`0`
                &useCss=`0`
            ]]
        </div>
    </div>
</div>

Сохраните чанк.

Размеры 650 × 350 выбраны для этого упражнения. Если меняете пропорции оформления, подберите свои значения.

Параметр useCss=0 отключает стандартные стили Gallery: сетку и оформление берем из Creative. Встроенный плагин просмотра через параметр plugin не подключаем, поскольку на сайте уже используется SimpleLightbox.

sort=rank и dir=ASC задают порядок внутри альбома. limit=0 выводит все изображения.

Переключаем шаблон с MIGX на Gallery

В начальном шаблоне найдите прежний вызов:

[[$creative.portfolio.migx]]

Замените его на:

[[$creative.gallery]]

Если повторяете урок без предыдущей практики MIGX, замените весь исходный блок с id="portfolio" этим вызовом.

Не оставляйте старую и новую обертки одновременно: на странице должен быть один блок с id="portfolio".

Сохраните шаблон и откройте сайт. Должны появиться изображения и подписи из Gallery.

Проверяем результат

1. Измените название одного изображения в Gallery и проверьте подпись на сайте.
2. Добавьте еще одно изображение и убедитесь, что появилась новая карточка.
3. Нажмите на несколько карточек: должно открываться соответствующее большое изображение.
4. Проверьте сетку на узком экране.
5. Убедитесь, что старые карточки из MIGX не выводятся вторым списком.

Для открытия оригинала используем image_absolute. Параметры imageWidth и imageHeight не уменьшают этот исходный файл. Для сайта подбирайте разумный размер загружаемых оригиналов.

{set $cards = $_modx->runSnippet('Gallery', [
    'album' => 'Creative Portfolio',
    'thumbTpl' => 'creative.gallery.item',
    'thumbWidth' => 650,
    'thumbHeight' => 350,
    'thumbZoomCrop' => 1,
    'thumbQuality' => 90,
    'sort' => 'rank',
    'dir' => 'ASC',
    'limit' => 0,
    'useCss' => 0
])}

<div id="portfolio">
    <div class="container-fluid p-0">
        <div class="row g-0">
            {$cards}
        </div>
    </div>
</div>

Практика 2. Галерея FlexStart с фильтрами

Этот дополнительный пример предназначен для отдельной подготовленной копии сайта или шаблона FlexStart.

Если сейчас проходите начальную практику на Creative, его можно оставить до соответствующего этапа курса.

Не копируйте целиком стили и скрипты FlexStart в Creative. У двух примеров разная разметка и разные просмотрщики изображений.

Во FlexStart используем существующие Isotope и GLightbox. Кнопку перехода на portfolio-details.html убираем: каждая карточка только открывает изображение.

Проверяем готовую верстку

До подключения MODX убедитесь, что исходное портфолио вашей версии FlexStart уже работает:

• Переключатели меняют набор видимых карточек.
• Изображения открываются в GLightbox.
• На странице нет ошибок загрузки необходимых файлов.

В используемом комплекте предусмотрены:

assets/vendor/glightbox/css/glightbox.min.css
assets/vendor/glightbox/js/glightbox.min.js
assets/vendor/imagesloaded/imagesloaded.pkgd.min.js
assets/vendor/isotope-layout/isotope.pkgd.min.js
assets/js/main.js

Также сохраняем стили FlexStart, сетку Bootstrap и Bootstrap Icons. Основной assets/js/main.js подключается после используемых библиотек.

Если файлы уже подключены исходной версткой, повторно добавлять их не нужно. Не создавайте второй экземпляр Isotope или GLightbox поверх существующей инициализации.

Создаем альбом и задаем категории

В Gallery создайте активный альбом FlexStart Portfolio. Загрузите в него изображения для второго примера.

Для начала можно взять по одному файлу из архива FlexStart:

assets/img/portfolio/app-1.jpg
assets/img/portfolio/product-1.jpg
assets/img/portfolio/branding-1.jpg
assets/img/portfolio/books-1.jpg

Для каждого изображения заполните название, описание и одну техническую метку категории:

В этом упрощенном варианте у изображения должна быть ровно одна из четырех меток. Вводите ее латиницей, без точки, пробелов и префикса filter-.

Например, в Gallery сохраняем app, а класс filter-app сформируем в чанке.

Не подставляйте сюда произвольный список меток через запятую. Для нескольких категорий у одного изображения потребуется отдельно преобразовать список в корректные CSS-классы. В этом упражнении такую обработку не добавляем.

Создаем чанк карточки FlexStart

Создайте обычный чанк flex.gallery.item:

<div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-[[+tags:htmlent]]">
    <div class="portfolio-content h-100">
        <img src="[[+thumbnail]]"
             class="img-fluid"
             alt="[[+description:default=`[[+name]]`:htmlent]]">

        <div class="portfolio-info">
            <h4>[[+name:htmlent]]</h4>
            <p>[[+description:htmlent]]</p>

            <a href="[[+image_absolute]]"
               title="[[+name:htmlent]]"
               data-gallery="portfolio-gallery-[[+tags:htmlent]]"
               class="glightbox preview-link"
               aria-label="Увеличить изображение: [[+name:htmlent]]">
                <i class="bi bi-zoom-in" aria-hidden="true"></i>
            </a>
        </div>
    </div>
</div>

Сохраните чанк.

Ссылка с классом details-link здесь отсутствует. Не нужно создавать страницы проектов или заполнять адреса portfolio-details.html.

Метка участвует в двух местах:

• Формирует класс для фильтра Isotope.
• Формирует группу GLightbox, чтобы изображения одной категории открывались в общей группе просмотра.

Создаем обертку с переключателями

Создайте чанк flex.gallery:

<section id="portfolio" class="portfolio section">
    <div class="container section-title" data-aos="fade-up">
        <h2>Портфолио</h2>
        <p>Примеры работ</p>
    </div>

    <div class="container">
        <div class="isotope-layout"
             data-default-filter="*"
             data-layout="masonry"
             data-sort="original-order">

            <ul class="portfolio-filters isotope-filters"
                data-aos="fade-up" data-aos-delay="100">
                <li data-filter="*" class="filter-active">Все</li>
                <li data-filter=".filter-app">Приложения</li>
                <li data-filter=".filter-product">Продукты</li>
                <li data-filter=".filter-branding">Айдентика</li>
                <li data-filter=".filter-books">Издания</li>
            </ul>

            <div class="row gy-4 isotope-container"
                 data-aos="fade-up" data-aos-delay="200">
                [[!Gallery?
                    &album=`FlexStart Portfolio`
                    &thumbTpl=`flex.gallery.item`
                    &thumbWidth=`800`
                    &thumbHeight=`600`
                    &thumbZoomCrop=`1`
                    &thumbQuality=`90`
                    &sort=`rank`
                    &dir=`ASC`
                    &limit=`0`
                    &useCss=`0`
                ]]
            </div>
        </div>
    </div>
</section>

Сохраните чанк.

В шаблоне FlexStart замените исходную секцию портфолио целиком одним вызовом:

[[$flex.gallery]]

Оставляем классы и data-атрибуты, которые использует исходная инициализация шаблона. Названия категорий в кнопках можно менять, но значения data-filter должны совпадать с классами карточек.

Для небольшого учебного альбома выводим все изображения. Isotope фильтрует уже загруженные карточки в браузере: он не запрашивает новую выборку Gallery при каждом нажатии.

Если ограничить вывод через limit, фильтр будет работать только с выведенной частью альбома. Это важно учитывать при дальнейшем добавлении пагинации.

Центрируем единственную кнопку увеличения

В исходной карточке были две ссылки: увеличение и переход к проекту. После удаления второй при необходимости добавьте в конец стилей FlexStart:

#portfolio .portfolio-info .preview-link {
    left: 50%;
    transform: translateX(-50%);
}

Это изменение относится только ко второму примеру. В Creative его добавлять не нужно.

Проверяем категории и просмотр изображений

1. Откройте страницу: при фильтре «Все» должны отображаться все активные изображения альбома.
2. Нажмите «Приложения»: должны остаться карточки с классом filter-app.
3. Проверьте остальные категории.
4. Откройте изображение через кнопку увеличения.
5. Убедитесь, что кнопки перехода к странице проекта нет.
6. Измените метку изображения в Gallery и проверьте переход в другую категорию после обновления страницы.

Если карточка видна в «Все», но отсутствует в своей категории, откройте HTML страницы и сравните ее класс со значением data-filter. Например, для метки app нужна пара filter-app и .filter-app.

Это фильтрация внутри одной страницы, а не отдельные страницы категорий и не серверный поиск по альбому.

{set $cards = $_modx->runSnippet('Gallery', [
    'album' => 'FlexStart Portfolio',
    'thumbTpl' => 'flex.gallery.item',
    'thumbWidth' => 800,
    'thumbHeight' => 600,
    'thumbZoomCrop' => 1,
    'thumbQuality' => 90,
    'sort' => 'rank',
    'dir' => 'ASC',
    'limit' => 0,
    'useCss' => 0
])}

<section id="portfolio" class="portfolio section">
    <div class="container section-title" data-aos="fade-up">
        <h2>Портфолио</h2>
        <p>Примеры работ</p>
    </div>

    <div class="container">
        <div class="isotope-layout"
             data-default-filter="*"
             data-layout="masonry"
             data-sort="original-order">

            <ul class="portfolio-filters isotope-filters"
                data-aos="fade-up" data-aos-delay="100">
                <li data-filter="*" class="filter-active">Все</li>
                <li data-filter=".filter-app">Приложения</li>
                <li data-filter=".filter-product">Продукты</li>
                <li data-filter=".filter-branding">Айдентика</li>
                <li data-filter=".filter-books">Издания</li>
            </ul>

            <div class="row gy-4 isotope-container"
                 data-aos="fade-up" data-aos-delay="200">
                {$cards}
            </div>
        </div>
    </div>
</section>

Если Gallery не показывает изображения

• Проверьте точное имя или ID альбома.
• Проверьте активность альбома и изображений.
• Убедитесь, что thumbTpl содержит имя существующего чанка.
• Посмотрите, появились ли карточки в HTML, даже если изображения не загрузились.
• Откройте адрес thumbnail или image_absolute в отдельной вкладке.
• Если оригинал работает, а миниатюра нет, проверьте запрос обработчика миниатюр, журнал PHP и права на запись в используемые рабочие каталоги.
• При переносе сайта проверьте gallery.files_path и gallery.files_url: путь в файловой системе и публичный URL должны соответствовать друг другу.

Не назначайте всем файлам права 777 и не удаляйте изображения или каталог Gallery ради попытки исправить миниатюры.

Если сетка отображается, но не работает увеличение, проверяйте библиотеку просмотра и нужные классы ссылок. Если не работает фильтрация FlexStart, отдельно проверяйте Isotope, imagesLoaded и соответствие data-атрибутов вашей версии шаблона.

Gallery отвечает за данные и их вывод. Сетка, фильтры и просмотрщик относятся к оформлению сайта.

Следующий шаг

В основной практике мы заменили портфолио Creative на MIGX вариантом Gallery. Во втором примере разобрали фильтруемую галерею FlexStart без отдельных страниц проектов.

Дальше разберем обработку изображений через phpThumb и pThumb: размеры, обрезку, качество и кеширование. На примере нашего портфолио получим миниатюры, в src которых будет ссылка на готовый файл кеша вместо запроса к обработчику Gallery.

Штатный адрес миниатюры Gallery с connector.php сам по себе не является ошибкой. Следующий урок показывает другой способ подготовки и вывода изображений.

После работы с изображениями перейдем к контактной форме на FormIt. Дополнительный пример FlexStart можно повторить позже, когда будет подготовлен соответствующий проект.

← Предыдущая статьяMIGX в MIGX: создаем редактор блоков страницы

Следующая статья →Параметры phpThumb — встроенной в MODX библиотеки