Перейти к основному содержимому

Шаблоны предварительного показа

Шаблоны предварительного показа позволяют настроить параметры изображений, которые используются в атрибутах. Применив шаблон к атрибуту с типом "Изображение" или "Группа изображений", вы получите изображения, приведенные к стандарту, указанному в шаблоне предварительного просмотра. Это удобно, если дизайн вашего проекта чувствителен к размеру изображений. Настраивая шаблон предварительного просмотра, вы можете изменять параметры изображений, которые будет видеть конечный пользователь.

Чтобы приступить к работе с шаблонами предварительного показа, откройте раздел "Настройки" и, далее, перейдите в подраздел "Шаблоны предварительного показа". В этом разделе находится список уже созданных шаблонов, а также форма для создания новых.

Создание​

В форме создания укажите:

  • Имя - Неуникальная строка.
  • Маркер - Уникальная строка.

После заполнения нажмите кнопку "Создать"

Настройка​

Выберите в общем списке шаблонов предварительного просмотра тот, который хотите настроить, и нажмите на иконку шестеренки Optimize images, чтобы перейти в режим редактирования. Для создания параметров превью нажмите кнопку "Добавить". Вы можете настроить формат для вертикального, горизонтального и квадратного изображения.

В соответствующих формах заполните:

  • Ширина и Высота (Сторона квадрата) - Размеры в пикселях, в которые будет вписано изображение.
  • Тип центровки - Линия, которая станет центральной осью при сжимании изображения.

Шаблон по умолчанию​

После создания нескольких наборов в одном шаблоне можно переключать шаблон по умолчанию. Он используется для отображения превью в CMS.

Удаление​

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

LQTP​

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

  • Миниатюра (base64 WebP)

Формат: WebP (оптимизирован для быстрой загрузки). Размер: не более нескольких сотен байт. Встраивается напрямую в объект в виде base64-URI, что ускоряет отображение, пока полное изображение ещё загружается.

  • Сгенерированное превью Основное изображение превью, которое заменяет миниатюру после полной загрузки.

Преимущества:

  • Мгновенный показ миниатюры (без дополнительных HTTP-запросов).
  • Плавный переход к полноценному превью после загрузки.
  • Экономия трафика за счёт использования сжатого WebP.

Пример структуры:

{
  "preview_template": [
    "data:image/webp;base64,UklGRl...", // Миниатюра (base64 WebP)  
    "https://example.com/full-preview.jpg" // Полное превью  
  ]
}

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

Подробнее про LQTP можно узнать здесь. Также посмотреть видео