Примеры

• Lightgallery
• Fancybox
• pdoResources
• Интеграция с компонентом Collections

Lightgallery

Fancybox

Демо сайт https://demog3x.ivan345.com/, примеры с Fancybox

pdoResources

Пример использования pdoResources, выводит ресурсы MODX, а в качестве изображения используется 1 изображения из галереи.

[[!pdoResources?
    
    
    &tpl=`ListRowTpl`
    &includeContent=`1`
    &leftJoin=`{
        "Image": {
            "class": "Gallery3x\\Model\\Gallery3xFile",
            "on": "modResource.id = Image.resource_id AND Image.position = 0 AND Image.active = 1"
        }
    }`
    &select=`{
        "modResource": "*",
        "Image": "Image.id as image_id, Image.alt as image_alt"
    }`
]]

Чанк ListRowTpl

 

{* Вызываем сниппет g3xGetImage, передавая ему ID картинки *}
{set $image_url = $_pls['image_id'] | g3xGetImage : 'small'}
{set $uri = $_modx->makeUrl($_pls.id)}

<div class="catalog-item">
    {$image_url}
    {if $image_url}
        <a href="{$uri = $_modx->makeUrl($_pls.id)}">
            <img src="{$image_url}" alt="{$_pls['image_alt'] ?: $_pls['pagetitle']}">
        </a>
    {else}
        <a href="{$_pls.uri}">
            <img src="/assets/images/no-image.png" alt="{$_pls.pagetitle}">
        </a>
    {/if}

    <h3><a href="{$uri}">{$_pls.pagetitle}</a></h3>
    <p>{$_pls.introtext}</p>
</div>

Интеграция с компонентом Collections

Вот как выводить превью первого изображения из галереи Gallery3x прямо в таблице дочерних ресурсов компонента Collections.

Это значительно упрощает навигацию и управление контентом, так как менеджер сразу видит, какая картинка относится к какому ресурсу.

Подключение JS-рендера в системных настройках

Теперь нужно "сказать" компоненту Collections, чтобы он загружал JS-файл.

1. Перейдите в Настройки (⚙️) → Системные настройки.

2. В фильтре выберите пространство имен collections.

3. Найдите ключ collections.user_js (Пользовательский JS-файл).

4. Впишите в него путь к файлу: /assets/components/gallery3x/js/mgr/misc/renderers.js

Настройка колонки в Collections

Это финальный шаг, где мы связываем всё вместе.

1. Перейдите на ресурс-контейнер и откройте настройки вида Collections (вкладка "Дочерние ресурсы" → ⚙️).

2. Откройте на редактирование или создайте новую колонку со следующими параметрами:

   • Заголовок: Превью

   • Название: g3xCollectionsThumbnail

   • Рендерер: Gallery3x.renderer.image

   • Сниппет-рендер: g3xCollectionsThumbnail

   • 
     
     
     Результат: