Skip to main content

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

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

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

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

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

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

  • Надежность: Все превью создаются заранее. Вы всегда уверены, что они существуют и доступны.

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

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

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

  1. Основные параметры (размеры) — задаются в Источнике файлов.

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

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

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

  1. Перейдите в Медиа → Источники файлов.

  2. Откройте "Gallery3x Source".

  3. Перейдите на вкладку "Свойства источника файлов".

  4. Найдите параметр gallery3x_thumbnails.

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

Пример JSON:

JSON 

[
  {"name": "small", "w": 150, "h": 100, "fit": "crop-center", "q": 80},
  {"name": "medium", "w": 400, "h": 300, "fit": "contain"},
  {"name": "big", "w": 1200}
]

Параметры расшифровываются так:

  • 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

Back to top