Налаштування фотогалереї на 1С-Бітрікс: альбоми, лайтбокс, SEO

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

Фотогалерея на Бітрікс перетворюється на сторінку, що гальмує, через відсутність WebP та ледачого завантаження. Клієнти скаржаться на довге завантаження (до 15 секунд на мобільних), а SEO-трафік з Google Images близький до нуля. Картинки в JPEG важать 5 МБ, сітка ламається на пристроях з шириною 320–768px, alt-теги порожні. Ми налаштовуємо фотогалереї на 1С-Бітрікс більше 10 років і знаємо всі підводні камені: від застарілих шаблонів модуля photogallery до правильної конвертації в WebP. За 50+ проєктів накопичили конкретні рішення: прискорення завантаження до 70%, охоплення Google Images — зростання в 3–5 разів. Наприклад, на одному проєкті для інтернет-магазину меблів ми оптимізували галерею: WebP та lazy loading зменшили час завантаження сторінки з 12 с до 2.3 с, а трафік з Google Images зріс у 4 рази. У цій статті розберемо два підходи: модуль 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% без втрати якості.