Step-by-Step Guide to Image Galleries on 1C-Bitrix

Optimized Image Gallery Setup on 1C-Bitrix

A photo gallery on Bitrix can become sluggish without WebP and lazy loading. Clients often experience load times over 15 seconds on mobile, and SEO traffic from Google Images is minimal. Images are often 5 MB JPEGs, the grid breaks on small screens, and alt tags are empty. We have over 10 years of experience setting up image galleries on 1C-Bitrix, with over 50 projects completed. Our solutions boost loading speed by up to 70% and increase Google Images traffic by 3–5 times, saving clients up to $3000 per year on CDN bandwidth. This article covers two approaches: the photogallery module and a custom infoblock gallery. You will learn how to choose the right option and use modern tools like GLightbox and CSS Grid.

How to Choose Between Photogallery Module and Custom Infoblock?

The photogallery module runs on top of an infoblock, creating a specialized infoblock with preset properties. Components:

• photogallery — complex component (albums + photos).
• photogallery.album.list — list of albums.
• photogallery.album.edit — create/edit album.
• photogallery.detail.list — list of photos in an album.
• photogallery.detail.view — view photo.
• photogallery.upload — upload photos.

Parameters: IBLOCK_ID, ALBUM_PHOTO_THUMBS_SIZE, ALBUM_PHOTO_SIZE, PHOTOS_PER_PAGE.

Limitations: outdated templates, lack of modern lightbox, poor responsiveness. For a modern site, templates need a full overhaul. However, it is convenient for a quick start.

Custom infoblock offers full control. Create an infoblock "Photo Gallery". Sections are albums; elements are photos. Minimum properties:

Custom infoblock is 2x more flexible than the photogallery module and allows easier integration of WebP, lazy loading, and responsive grids.

Implementing a Gallery on an Infoblock

Use news.list for the photo grid. For a lightbox, wrap each photo 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="Photo gallery album in Bitrix"> </a> 

Initialize GLightbox: GLightbox({ selector: '.glightbox' }). It loads 5x faster than Fancybox.

Building a Responsive Grid

CSS Grid works perfectly:

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

For masonry layouts, use Masonry.js or set a fixed aspect ratio (e.g., aspect-ratio: 4/3).

Optimizing Images

• WebP: Convert images on upload using CFile::ResizeImageGet() and imagewebp(). WebP reduces file size by 30% compared to JPEG. Implement server-side caching with ETag to further reduce bandwidth costs.
• Lazy loading: Add loading="lazy" to all <img> except the first 4–6 above the fold. This cuts initial page weight by up to 60%.
• Thumbnail sizes: Use 400x300px for the grid and limit lightbox images to 1600px width.
• Use srcset for responsive images, serving different resolutions based on viewport.

SEO for the Gallery

• Alt attributes: Include descriptive text like "Photo gallery album in Bitrix."
• Schema.org markup: Add ImageGallery and ImageObject via JSON-LD structured data.
• Meta tags: Set titles and descriptions for album section pages. Use canonical tags to avoid duplicate content.
• Consider generating an XML sitemap for images to improve indexing. This also helps with the bitrix photo viewer feature and bitrix albums hierarchy.

What's Included in Turnkey Setup

We provide the full cycle:

• Consultation and requirements analysis
• Design: infoblock creation, property setup
• Development: GLightbox integration, CSS Grid, WebP, lazy loading
• SEO: alt tags, Schema.org markup, meta tags
• Testing on devices (320–1920px width)
• Training for content managers
• 1-month warranty and support

Comparison: Photogallery Module vs. Custom Infoblock

Our team has over 10 years of experience and 50+ Bitrix projects. Packages start at $500. Contact us for a consultation—we'll help you choose the best option and set up your image gallery turnkey.

Official documentation of the photogallery module: official documentation More about the WebP format — it compresses images by 25–35% without quality loss.