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

Пресеты превью

Компоненты → Prism → Пресеты превью. Пресет — это именованный набор правил, по которым делается картинка. Имя пресета попадает в адрес превью.

Пресет всегда работает с тем, что ему дали: если у элемента задан кадр, уменьшается кадр, а не исходный снимок — см. порядок операций.

В поставке​

ПресетРазмерРежимКачествоdprДля чего
thumb300×300crop821, 2Сетка в панели администратора. Удалить нельзя.
card600×400crop821, 2Карточки и плитки на сайте.
preview600×∞contain821, 2Плитка галереи с лайтбоксом: сохраняет пропорции кадра, форму задаёт CSS.
hero1600×∞contain801Крупная иллюстрация в шапке.
full2400×∞contain851Оригинал для лайтбокса.

Пресеты добавляются при установке и при обновлении не перезаписываются: правьте смело.

Поля пресета​

ПолеЗначенияСмысл
Имяa-z0-9_-, до 50Попадает в адрес превью и в плейсхолдер [[+preset.имя.url]].
Ширина, Высота0–100000 — не ограничивать сторону. Для crop обе стороны обязательны.
Режимcontain, crop, fillВписать без обрезки / заполнить с обрезкой / заполнить с полями.
Позицияfocal, сторона или уголfocal кадрирует вокруг точки фокуса элемента.
Форматauto, webp, avif, jpg, pngauto даёт <picture> с avif и webp и запасным форматом.
Качество1–100Для jpg, webp, avif.
dprнапример 1,2Плотности, для которых готовится srcset.
ОпцииJSONВодяной знак и фильтры этого пресета.

Как выбрать размеры​

&preset задаёт основной размер, &presets — дополнительные, из которых собирается srcset и ссылка на оригинал:

[[!prism? &preset=`card` &presets=`full`]]
Для галереи с лайтбоксом берите пресет с высотой 0

crop режет кадр до фиксированной рамки, и файл превью перестаёт быть тем же кадром, что оригинал. Из-за этого фотография дёргается при открытии. Пресет preview (contain) сохраняет пропорции, а квадратную форму плитке задаёт CSS.

После изменения пресета​

Кэш этого пресета сбрасывается автоматически — файлы создадутся заново при первом запросе. Кэш остальных пресетов не трогается.