# Генерация превью

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

### Преимущество генерации в админ-панели

Ключевой особенностью компонента является то, что вся "тяжелая" работа по обработке изображений (изменение размера, нарезка, наложение фильтров и водяных знаков) происходит **только один раз — в момент загрузки файла в админ-панели**.

Это дает огромное преимущество в производительности:

- **Сайт работает максимально быстро:** Посетителям вашего сайта отдаются уже готовые, оптимизированные изображения. Сервер не тратит время и ресурсы на создание превью "на лету" при каждой загрузке страницы.
- **Надежность:** Все превью создаются заранее. Вы всегда уверены, что они существуют и доступны.

Для всех операций с изображениями используется **продвинутая PHP библиотека Glide**. Она обеспечивает высокое качество обработки, поддерживает современные форматы и предоставляет широкий набор инструментов для манипуляций с изображениями.

---

## Настройка генерации

Настройка разделена на две части:

1. **Основные параметры (размеры)** — задаются в Источнике файлов.
2. **Глобальные эффекты (фильтры, водяной знак)** — задаются в Системных настройках.

### Основные параметры (в Источнике файлов)

Все размеры превью, которые должен создавать компонент, настраиваются в вашем Источнике файлов "Gallery3x Source".

1. Перейдите в **Медиа → Источники файлов**.
2. Откройте **"Gallery3x Source"**.
3. Перейдите на вкладку **"Свойства источника файлов"**.
4. Найдите параметр **`gallery3x_thumbnails`**.

Этот параметр принимает JSON-строку, которая описывает каждый необходимый размер превью.

**Пример JSON:**

<div _ngcontent-ng-c2485367380="" class="code-block ng-tns-c2485367380-140 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" id="bkmrk-json" jslog="223238;track:impression;BardVeMetadataKey:[["r_3d1ff3f9dca7451b","c_b8511ae2af5280fd",null,"rc_b74431b25722d597",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-140 ng-star-inserted"><span class="ng-tns-c2485367380-140">JSON</span><div _ngcontent-ng-c2485367380="" class="buttons ng-tns-c2485367380-140 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-140 mat-unthemed _mat-animation-noopable ng-star-inserted"></button></div></div><div _ngcontent-ng-c2485367380="" class="formatted-code-block-internal-container ng-tns-c2485367380-140"><div _ngcontent-ng-c2485367380="" class="animated-opacity ng-tns-c2485367380-140">  
</div></div></div>```
[
  {"name": "small", "w": 150, "h": 100, "fit": "crop-center", "q": 80},
  {"name": "medium", "w": 400, "h": 300, "fit": "contain"},
  {"name": "big", "w": 1200}
]

```

<div _ngcontent-ng-c2485367380="" class="code-block ng-tns-c2485367380-140 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" id="bkmrk--2" jslog="223238;track:impression;BardVeMetadataKey:[["r_3d1ff3f9dca7451b","c_b8511ae2af5280fd",null,"rc_b74431b25722d597",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-140"><div _ngcontent-ng-c2485367380="" class="animated-opacity ng-tns-c2485367380-140"></div></div></div>#### Параметры расшифровываются так:

- **`name`**: (Обязательно) Уникальное имя размера. Будет использоваться для плейсхолдеров, например, `[[+small]]`.
- **`w`**: Ширина изображения в пикселях.
- **`h`**: Высота изображения в пикселях.
- **`fit`**: (Очень важный параметр) Метод вписывания изображения в заданные размеры.
    
    
    - `contain`: Вписывает изображение целиком, сохраняя пропорции. Поля могут остаться пустыми.
    - `max`: Уменьшает изображение, пока оно не впишется по ширине или высоте.
    - `fill`: Растягивает изображение, чтобы заполнить все пространство, сохраняя пропорции. Лишнее обрезается.
    - `stretch`: Растягивает изображение до точных размеров `w` и `h`, игнорируя пропорции.
    - `crop`: Обрезает изображение. Можно указать точку фокуса, например `crop-center` (по умолчанию), `crop-top-left` и т.д.
- **`q`**: Качество изображения в процентах (от 0 до 100). Актуально для форматов `jpg` и `webp`.
- **`fm`**: Формат файла. Например, `webp`, `avif`, `jpg`. Если не указан, используется глобальная настройка.

---

### Глобальные эффекты (в Системных настройках)

Эти настройки находятся в **Настройки → Системные настройки**, пространство имен `gallery3x`. Они применяются ко **всем** превью, которые генерирует компонент.

#### Наложение водяного знака (Watermark)

- **`gallery3x.watermark_path`** Путь к файлу водяного знака от корня сайта. Например: `assets/images/watermark.png`. Если поле пустое, водяной знак не накладывается.
- **`gallery3x.watermark_position`** Расположение водяного знака. Возможные значения: `top-left`, `top`, `top-right`, `left`, `center`, `right`, `bottom-left`, `bottom`, `bottom-right` (по умолчанию).
- **`gallery3x.watermark_padding`** Отступ водяного знака от краев изображения в пикселях.

#### Фильтры и формат

- **`gallery3x.format`** Позволяет автоматически конвертировать **все** превью в указанный формат (например, `webp`). Если оставить пустым, формат останется оригинальным.
- **`gallery3x.filters`** Строка для применения одного или нескольких фильтров ко всем превью. Фильтры перечисляются через `|`.
    
    
    - **Пример 1 (черно-белое изображение):** `greyscale`
    - **Пример 2 (размытие):** `blur=10`
    - **Пример 3 (комбинация):** `sepia|brightness=10|contrast=-5`