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

Налаштування фотогалереї на 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). Адаптивність не закладена. Для сучасного сайту потрібна повна переробка шаблонів.

Галерея на інфоблоці

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

При завантаженні через адмінку Бітрікса система автоматично створює мініатюру з 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().

Ледача завантаження. Атрибут 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.