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

Первая галерея

От пустого ресурса до работающей галереи — четыре шага.

1. Загрузите фотографии​

Откройте ресурс → вкладка Prism → перетащите файлы в сетку.

Порядок меняется перетаскиванием, двойной клик открывает диалог с названием, alt, описанием, тегами и точкой фокуса. Сохраните ресурс.

2. Выведите в шаблоне​

[[!prism? &lightbox=`photoswipe` &preset=`preview` &presets=`full` &cache=`1`]]

Этого достаточно: сниппет отдаст разметку, подключит PhotoSwipe из поставки и напишет инициализацию. Своего JavaScript писать не нужно.

Вызов с восклицательным знаком

[[!prism — некэшируемый вызов. Кэширование включает &cache=1: у Prism свой кэш, который сбрасывается сам при любом изменении медиа. Полностью кэшируемый [[prism запечётся в кэш страницы и не обновится, пока вы не очистите кэш MODX вручную.

3. Добавьте стили​

Своего CSS компонент на сайт не ставит — оформление ваше:

.prism-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.prism-item { margin: 0; position: relative; border-radius: 12px; overflow: hidden; }
.prism-item img {
  display: block;
  width: 100%;
  height: auto;          /* обязателен: без него сработает атрибут height, а не aspect-ratio */
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
Почему &preset=preview

preview сохраняет пропорции кадра, а квадратную форму плитке задаёт CSS. Только так фотография разворачивается из плитки без рывка — подробности в Как работают превью. &presets=full обязателен: из него берутся ссылка на оригинал и его размеры.

4. Дальше​