Setting up a photo gallery on 1C-Bitrix

Configuring Photo Gallery on 1C-Bitrix

Setting up a photo gallery seems simple at first: display photos in a grid with lightbox viewing. But in practice — responsive thumbnails, WebP, lazy loading, album management from the admin panel, meta-tags for SEO. Bitrix has a photo gallery module (photogallery) and an alternative approach via infoblock. Let's explore both.

photogallery Module

The photogallery module works on top of an infoblock: it creates a specialized infoblock with preset properties for photos. Components:

• photogallery — comprehensive component (albums + photos).
• photogallery.album.list — album list.
• photogallery.album.edit — album creation/editing.
• photogallery.detail.list — photo list in an album.
• photogallery.detail.view — photo viewing.
• photogallery.upload — photo upload.

The photogallery component combines everything. Parameters:

• IBLOCK_ID — gallery infoblock ID.
• ALBUM_PHOTO_THUMBS_SIZE — thumbnail size.
• ALBUM_PHOTO_SIZE — viewing size.
• PHOTOS_PER_PAGE — photos per page.

Module limitations: templates are outdated, lightbox — Bitrix's own implementation (not Fancybox / GLightbox). Responsiveness is not built-in. For a modern website, complete template redesign is required.

Gallery on Infoblock

Create an infoblock "Photo Gallery". Sections — albums. Elements — photos. Minimal property structure:

When uploading through Bitrix admin, the system automatically creates a thumbnail from DETAIL_PICTURE for PREVIEW_PICTURE (if configured). But it's better to manage resizing explicitly — via CFile::ResizeImageGet() in the component template with exact sizes.

Output: news.list for photo grid, news.detail — optional if you need a separate page for each photo. For most galleries, separate pages are unnecessary — lightbox viewing is sufficient.

Lightbox

Standard choice — GLightbox (7 KB gzip, no dependencies) or Fancybox 5 (more functional, but heavier). Connect via npm or CDN.

In the news.list template, each photo is wrapped in a link with data-gallery attribute:

<a href="/upload/photo_full.jpg" class="glightbox" data-gallery="album1">
    <img src="/upload/photo_thumb.webp" loading="lazy" alt="Description">
</a>

Initialization: GLightbox({ selector: '.glightbox' }).

Responsive Grid

CSS Grid — optimal solution for photo grid. For gallery with different-format photos:

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 8px;
}

For Pinterest-style layout (masonry) — grid-template-rows: masonry (experimental property) or JavaScript library Masonry.js. Compromise — fixed aspect ratio for thumbnails via aspect-ratio: 1 (square) or aspect-ratio: 4/3.

Image Optimization

Gallery — dozens of photos on a page. Without optimization — megabytes of traffic.

WebP generation. When photo is uploaded via infoblock, Bitrix saves the original. WebP version is generated on first access via handler or in advance — via agent. Method CFile::ResizeImageGet() with parameter BX_RESIZE_IMAGE_PROPORTIONAL and subsequent conversion via imagecreatefromjpeg() + imagewebp().

Lazy loading. Attribute loading="lazy" on all <img> except first 4-6 (above the fold). Built-in browser support, no JavaScript.

Thumbnail sizes. For grid, 400x300 is sufficient. For lightbox — width limit 1600px. You can store originals at 4000x3000 on server, but you must not send to client.

SEO for Gallery

Photo galleries are indexed via Google Images. For each image, alt attribute with description is important. Schema.org markup ImageGallery + ImageObject improves search result display. Markup is added to component template via JSON-LD.

Separate album pages (sections) are indexed normally — with title, description, and canonical URL.