# Плейсхолдеры изображений

Функция "Плейсхолдеры изображений" — это мощный инструмент, который позволяет выводить изображения из галереи **напрямую в контенте или шаблоне ресурса**, не вызывая сниппет.

Специальный плагин один раз подготавливает все данные и делает их доступными в виде простых плейсхолдеров, таких как `[[+g3x.0]]` или `[[+g3x.1.url]]`.

### Как это работает

При загрузке страницы на сайте плагин, работающий на событии `OnLoadWebDocument`, выполняет следующие действия:

1. Проверяет, включена ли эта функция в системных настройках.
2. Если да, он находит все **активные** изображения для текущего ресурса, сортируя их по полю `position`.
3. Для каждого найденного изображения создается набор плейсхолдеров, которые MODX может использовать при обработке страницы.

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

Для управления этой функцией используются четыре системные настройки в пространстве имен `gallery3x`.

#### 1. Включить плейсхолдеры на сайте

- **Ключ:** `gallery3x.set_placeholders`
- **Описание:** Главный "рубильник". Установите в "Да", чтобы активировать функцию. По умолчанию выключено, так как создает дополнительный запрос к базе данных на каждой странице. **Включайте, только если вы действительно используете плейсхолдеры в шаблонах или контенте.**

#### 2. Чанк для плейсхолдеров

- **Ключ:** `gallery3x.placeholders_tpl`
- **Описание:** Имя чанка, который будет использоваться для оформления плейсхолдера вида `[[+g3x.N]]`. Если эта настройка пуста, то `[[+g3x.0]]` просто выведет массив данных картинки. Если указан чанк, его содержимое будет обработано с данными картинки.
- **Пример значения:** `tpl.Gallery3x.placeholderItem`

#### 3. Включить для шаблонов

- **Ключ:** `gallery3x.placeholders_for_templates`
- **Описание:** Список ID шаблонов через запятую, для которых будет работать эта функция. Это позволяет включать плейсхолдеры только для нужных разделов, например, для карточек товаров или статей в блоге, экономя ресурсы на остальных страницах.
- **Пример значения:** `3, 8, 12`
- **Примечание:** Если поле пустое, функция будет работать для **всех** шаблонов.

#### 4. Размеры превью для плейсхолдеров

- **Ключ:** `gallery3x.placeholders_thumbs`
- **Описание:** Список размеров превью через запятую, которые нужно сделать доступными в плейсхолдерах. Это полезная оптимизация, которая не позволяет загружать лишние данные.
- **Пример значения:** `small,medium`

---

### Примеры использования

Предположим, вы загрузили в галерею 3 картинки.

#### 1. Простой вывод

Вы можете вставить эти плейсхолдеры прямо в контент ресурса или в его шаблон:

- `[[+g3x.0.url]]` — выведет URL **оригинала** первой картинки.
- `[[+g3x.0.medium]]` — выведет URL превью размера `medium` первой картинки.
- `[[+g3x.1.alt]]` — выведет `alt` текст второй картинки.
- `[[+g3x.2.name]]` — выведет название третьей картинки.

#### 2. Вывод с форматированием (через чанк)

Это основной способ использования.

1. Создайте чанк, например, `tpl.Gallery3x.placeholderItem` со следующим кодом:
    
    <div _ngcontent-ng-c2485367380="" class="code-block ng-tns-c2485367380-130 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" jslog="223238;track:impression;BardVeMetadataKey:[["r_ade0b4c3dcc9b299","c_b8511ae2af5280fd",null,"rc_948f3922e4ce7d69",null,null,"ru",null,1,null,null,1,0]]" style="display: block;"><div _ngcontent-ng-c2485367380="" class="code-block-decoration header-formatted gds-title-s ng-tns-c2485367380-130 ng-star-inserted"><span class="ng-tns-c2485367380-130">HTML</span><div _ngcontent-ng-c2485367380="" class="buttons ng-tns-c2485367380-130 ng-star-inserted"><button aria-label="Скопировать код" class="mdc-icon-button mat-mdc-icon-button mat-mdc-button-base mat-mdc-tooltip-trigger copy-button ng-tns-c2485367380-130 mat-unthemed _mat-animation-noopable ng-star-inserted"></button></div></div></div>```
    <a href="[[+url]]" class="image-link">
        <img src="[[+medium]]" alt="[[+alt]]" title="[[+name]]">
    </a>
    
    ```
    
    <div _ngcontent-ng-c2485367380="" class="code-block ng-tns-c2485367380-130 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" jslog="223238;track:impression;BardVeMetadataKey:[["r_ade0b4c3dcc9b299","c_b8511ae2af5280fd",null,"rc_948f3922e4ce7d69",null,null,"ru",null,1,null,null,1,0]]" style="display: block;"><div _ngcontent-ng-c2485367380="" class="formatted-code-block-internal-container ng-tns-c2485367380-130"><div _ngcontent-ng-c2485367380="" class="animated-opacity ng-tns-c2485367380-130"></div></div></div>
2. В системной настройке `gallery3x.placeholders_tpl` укажите имя этого чанка: `tpl.Gallery3x.placeholderItem`.
3. Теперь вы можете вставлять в контент просто `[[+g3x.0]]`, `[[+g3x.1]]` и т.д., и они будут автоматически обернуты в HTML из вашего чанка.

#### 3. Продвинутое использование (с Fenom)

Если на сайте используется Fenom, вы можете легко перебрать все изображения в цикле прямо в шаблоне:

```
{if $_modx->resource.g3x.0}
    <div class="product-gallery">
        <div class="main-image">
            <img src="{$_modx->resource['g3x.0.medium']}" alt="{$_modx->resource['g3x.0.alt']}">
        </div>
        <div class="thumbnails">
            {for $i = 0 to 10}
                {if $_modx->resource["g3x.{$i}.small"]}
                    <img src="{$_modx->resource["g3x.{$i}.small"]}" alt="">
                {/if}
            {/for}
        </div>
    </div>
{/if}
```