Настройка фотогалереи на 1С-Битрикс
Задача простая на первый взгляд: показать фотографии в сетке с просмотром в лайтбоксе. Но на практике — адаптивные миниатюры, WebP, ленивая загрузка, управление альбомами из админки, мета-теги для SEO. В Битрикс есть модуль фотогалереи (photogallery) и альтернативный путь через инфоблок. Разберём оба.
Модуль photogallery
Модуль photogallery работает поверх инфоблока: создаёт специализированный инфоблок с предустановленными свойствами для фотографий. Компоненты:
-
photogallery— комплексный компонент (альбомы + фотографии). -
photogallery.album.list— список альбомов. -
photogallery.album.edit— создание/редактирование альбома. -
photogallery.detail.list— список фотографий в альбоме. -
photogallery.detail.view— просмотр фотографии. -
photogallery.upload— загрузка фотографий.
Компонент photogallery объединяет всё. Параметры:
-
IBLOCK_ID— ID инфоблока галереи. -
ALBUM_PHOTO_THUMBS_SIZE— размер миниатюр. -
ALBUM_PHOTO_SIZE— размер для просмотра. -
PHOTOS_PER_PAGE— фотографий на странице.
Ограничения модуля: шаблоны устаревшие, лайтбокс — собственная реализация Битрикс (не Fancybox / GLightbox). Адаптивность не заложена. Для современного сайта потребуется полная переработка шаблонов.
Галерея на инфоблоке
Создаём инфоблок «Фотогалерея». Разделы — альбомы. Элементы — фотографии. Структура свойств минимальна:
| Свойство | Тип | Назначение |
|---|---|---|
| PREVIEW_PICTURE | Файл (встроенный) | Миниатюра |
| DETAIL_PICTURE | Файл (встроенный) | Полноразмерное фото |
| DESCRIPTION | Строка | Подпись к фотографии |
| PHOTOGRAPHER | Строка | Автор снимка |
При загрузке через админку Битрикс автоматически создаёт миниатюру из DETAIL_PICTURE для PREVIEW_PICTURE (если настроено). Но лучше управлять ресайзом явно — через CFile::ResizeImageGet() в шаблоне компонента с указанием точных размеров.
Вывод: news.list для сетки фотографий, news.detail — опционально, если нужна отдельная страница каждого фото. Для большинства галерей отдельные страницы не нужны — просмотр в лайтбоксе достаточен.
Лайтбокс
Стандартный выбор — GLightbox (7 КБ gzip, без зависимостей) или Fancybox 5 (функциональнее, но тяжелее). Подключаем через npm или CDN.
В шаблоне news.list каждая фотография оборачивается в ссылку с атрибутом data-gallery:
<a href="/upload/photo_full.jpg" class="glightbox" data-gallery="album1">
<img src="/upload/photo_thumb.webp" loading="lazy" alt="Описание">
</a>
Инициализация: GLightbox({ selector: '.glightbox' }).
Адаптивная сетка
CSS Grid — оптимальное решение для сетки фотографий. Для галереи с разноформатными снимками:
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 8px;
}
Для Pinterest-подобной раскладки (masonry) — grid-template-rows: masonry (экспериментальное свойство) или JavaScript-библиотека Masonry.js. Компромисс — фиксированное соотношение сторон миниатюр через aspect-ratio: 1 (квадратные) или aspect-ratio: 4/3.
Оптимизация изображений
Галерея — это десятки фотографий на странице. Без оптимизации — мегабайты трафика.
WebP-генерация. При загрузке фото через инфоблок Битрикс сохраняет оригинал. WebP-версию генерируем при первом обращении через обработчик или заранее — через агент. Метод CFile::ResizeImageGet() с параметром BX_RESIZE_IMAGE_PROPORTIONAL и последующей конвертацией через imagecreatefromjpeg() + imagewebp().
Lazy loading. Атрибут loading="lazy" на всех <img> кроме первых 4-6 (above the fold). Встроенная поддержка браузерами, без JavaScript.
Размеры миниатюр. Для сетки достаточно 400x300. Для лайтбокса — ограничение по ширине 1600px. Хранить оригиналы в 4000x3000 на сервере можно, но отдавать клиенту — нельзя.
SEO для галереи
Фотогалереи индексируются через Google Images. Для каждого изображения важен атрибут alt с описанием. Schema.org-разметка ImageGallery + ImageObject улучшает представление в выдаче. Разметка добавляется в шаблон компонента через JSON-LD.
Отдельные страницы альбомов (разделов) индексируются стандартно — с title, description и каноническим URL.