Настройка фотогалереи на 1С-Битрикс: альбомы, лайтбокс, SEO

Настройка фотогалереи на 1С-Битрикс: от модуля до лайтбокса

Фотогалерея на Битрикс превращается в тормозящую страницу из-за отсутствия WebP и ленивой загрузки. Клиенты жалуются на долгую загрузку (до 15 секунд на мобильных), а SEO-трафик из Google Images близок к нулю. Картинки в JPEG весят 5 МБ, сетка ломается на устройствах с шириной 320–768px, alt-теги пусты. Мы настраиваем фотогалереи на 1С-Битрикс более 10 лет и знаем все подводные камни: от устаревших шаблонов модуля photogallery до правильной конвертации в WebP. За 50+ проектов накопили конкретные решения: ускорение загрузки до 70%, охват Google Images — рост в 3–5 раз. В этой статье разберём два подхода: модуль photogallery и кастомная галерея на инфоблоке. Вы узнаете, как выбрать подходящий вариант под ваш проект и какие современные инструменты (GLightbox, CSS Grid) использовать для быстрой загрузки.

Какой модуль выбрать: 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). Адаптивность не заложена. Для современного сайта требуется полная переработка шаблонов. Однако модуль удобен для быстрого старта без программирования.

Как реализовать галерею на инфоблоке?

Создаём инфоблок «Фотогалерея». Разделы — альбомы. Элементы — фотографии. Структура свойств минимальна:

При загрузке через админку Битрикс автоматически создаёт миниатюру из 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.

Что входит в настройку фотогалереи под ключ?

Мы предоставляем полный цикл работ:

• Консультация и ТЗ: анализ требований, выбор модуля или инфоблока, структура альбомов.
• Проектирование: создание инфоблока, настройка свойств, полей, шаблонов.
• Разработка: интеграция лайтбокса (GLightbox), адаптивной сетки (CSS Grid), оптимизация изображений (WebP, lazy loading).
• SEO-настройка: добавление alt-тегов, Schema.org разметки, мета-тегов альбомов.
• Тестирование: проверка на всех устройствах, скорость загрузки (PageSpeed Insights), корректность отображения.
• Обучение: инструкция для контент-менеджера по загрузке и редактированию фотографий.
• Гарантия и поддержка: исправление ошибок в течение месяца после сдачи.

Сравнение подходов

Наша команда имеет более 10 лет опыта и 50+ реализованных проектов на Битрикс. Свяжитесь с нами — мы поможем выбрать оптимальный вариант и настроим фотогалерею под ключ. Гарантируем качество и сроки. Закажите консультацию — обсудим ваш проект.

Официальная документация модуля photogallery: dev.1c-bitrix.ru Подробнее о формате WebP — он сжимает изображения на 25–35% без потери качества.