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

Our company is engaged in the development, support and maintenance of Bitrix and Bitrix24 solutions of any complexity. From simple one-page sites to complex online stores, CRM systems with 1C and telephony integration. The experience of developers is confirmed by certificates from the vendor.
Showing 1 of 1All 1626 services
Step-by-Step Guide to Image Galleries on 1C-Bitrix
Simple
~1 day
Frequently Asked Questions

Our competencies:

Development stages

Latest works

  • image_website-b2b-advance_0.webp
    B2B ADVANCE company website development
    1362
  • image_bitrix-bitrix-24-1c_fixper_448_0.webp
    Website development for FIXPER company
    949
  • image_bitrix-bitrix-24-1c_development_of_an_online_appointment_booking_widget_for_a_medical_center_594_0.webp
    Development based on Bitrix, Bitrix24, 1C for the company Development of an Online Appointment Booking Widget for a Medical Center
    695
  • image_bitrix-bitrix-24-1c_mirsanbel_458_0.webp
    Development based on 1C Enterprise for MIRSANBEL
    835
  • image_crm_dolbimby_434_0.webp
    Website development on CRM Bitrix24 for DOLBIMBY
    733
  • image_crm_technotorgcomplex_453_0.webp
    Development based on Bitrix24 for the company TECHNOTORGKOMPLEKS
    1076

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:

Property Type Purpose
PREVIEW_PICTURE File (built-in) Thumbnail
DETAIL_PICTURE File (built-in) Full-size photo
DESCRIPTION String Photo caption
PHOTOGRAPHER String Author name

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
Checklist of Common Mistakes - Missing lazy loading → slow mobile load - JPEG without compression → 5 MB per image. Use WebP and resize. - Empty alt tags → lost Google Images traffic - Grid without media queries → overlapping on narrow screens - Lightbox not responsive → modal exceeds screen

Comparison: Photogallery Module vs. Custom Infoblock

Criterion Photogallery Module Custom Infoblock
Speed of implementation Fast (ready components) Medium (requires development)
Flexibility Low High (2x more flexible)
Responsiveness Needs tweaking Fully customizable
SEO Standard meta tags Any markup (e.g., Schema.org)
Modern formats Requires programming WebP, lazy loading, srcset

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.

What Professional 1C-Bitrix Installation Includes

We start by checking innodb_buffer_pool_size. The default MySQL value (128 MB) is a death sentence for an online store with a catalog of 10,000+ items. We set 70–80% of available RAM on a dedicated server, 50% on VPS. This single setting speeds up the site by 2–3 times compared to the default. We'll assess your project in one day — get a consultation. Contact us to order turnkey installation with performance guarantee.

How to Choose Hosting and Edition for 1C-Bitrix Installation?

BitrixVM is a virtual machine with a pre-installed stack: nginx + Apache, PHP-FPM, MySQL/MariaDB, Sphinx, Push server. For VPS — the best start. Everything is already configured for Bitrix, including OPcache, log rotation, and firewall. Management via web panel on port 8890. Bitrix documentation recommends starting with BitrixVM for predictable performance.

VPS/VDS is the sweet spot. Minimum configuration for a medium online store: 2 vCPU, 4 GB RAM, SSD. Optimal: 4 vCPU, 8 GB RAM. OS: Ubuntu 22.04 or Debian 12. If not BitrixVM, we configure the stack manually for the task. Virtual hosting — only for business cards and landing pages. Requirements: PHP 8.0+, MySQL 5.7+ / MariaDB 10.0+, 512 MB RAM, .htaccess. 1C-Bitrix hosting partners guarantee compatibility. Dedicated server — for highload. Typical architecture: web server separate, database separate, Redis/Memcached separate. For Enterprise edition — web cluster with load balancer. Cloud (Yandex Cloud, VK Cloud, Selectel) — when load spikes: sales, seasonal peaks. Autoscaling via Managed Kubernetes or simple VM vertical scaling.

Choosing the edition is equally important. A common mistake: choosing "Small Business" for a store that grows to B2B with wholesale prices and three warehouses in six months. Upgrading to "Business" — pay the difference, data is not lost, but it's better to plan ahead. Our specialists select the edition for current tasks and with room for growth. For example, the "Business" license (about 35,000 RUB) pays off through multi-warehouse and 1C exchange, while the wrong choice can lead to a loss of up to 30,000 RUB monthly on excess resources.

Edition For Whom Key Limitation
Start Business cards, landing pages No infoblocks 2.0, no trade catalog
Standard Corporate sites No e-commerce module
Small Business Small stores 1 price type, 1 warehouse, no 1C exchange
Business Medium stores, B2B Multi-warehouse, multicurrency, CommerceML
Enterprise Highload, cluster Web cluster, CDN, multisite

What Server Settings Are Critical for 1C-Bitrix?

Web Server and PHP

nginx as reverse proxy + Apache (mod_php) or nginx + PHP-FPM directly. The second option saves memory — Apache is not needed. But some Bitrix modules use .htaccess, so for compatibility we sometimes keep Apache. nginx configuration: fastcgi_read_timeout 300 — for long operations (1C import), client_max_body_size 1024m — large file uploads. Block access to .settings.php, .settings_extra.php, bitrix/.settings.php — they contain database passwords. Rewrite rules from urlrewrite.php — Bitrix generates them, but with nginx + PHP-FPM they need to be duplicated. PHP 8.0–8.2 with extensions: mbstring, curl, gd, xml, json, opcache, redis/memcached. Key php.ini settings: opcache.memory_consumption=256, opcache.max_accelerated_files=20000, max_execution_time=300, memory_limit=512M, upload_max_filesize=100M, post_max_size=128M.

Database and Caching

MySQL/MariaDB. Key my.cnf parameters: innodb_buffer_pool_size — 70–80% RAM, innodb_log_file_size=256M, tmp_table_size=256M, max_heap_table_size=256M, thread_pool_size — number of CPU cores. Encoding utf8mb4 mandatory, otherwise emoji and special characters break. Redis is preferable to Memcached for Bitrix — supports persistent connections and is more reliable. In production, Redis handles concurrent writes three times faster than Memcached under typical load. Configure in .settings_extra.php:

'cache' => ['value' => ['type' => ['class_name' => '\\Bitrix\\Main\\Data\\CacheEngineRedis']]]
'session' => ['value' => ['mode' => 'default', 'handlers' => ['general' => ['type' => 'redis']]]]
Example Redis configuration for Bitrix
sudo apt install redis-server
sudo systemctl enable redis

Add to .settings_extra.php as above.

SSL, Email, and Cron

SSL — Let's Encrypt via certbot in 90% of cases. Redirect HTTP → HTTPS (301), HSTS, TLS 1.2/1.3, OCSP Stapling. In Bitrix, switch to HTTPS in the main module settings. Email: abandon mail() — connect SMTP (Yandex.Mail for domain, Mail.ru for Business). Be sure to configure SPF, DKIM, DMARC. Without SPF, emails go to spam. Test deliverability via mail-tester.com — score 9+/10. Cron: Bitrix agents switch to system cron — * * * * * /usr/bin/php /var/www/bitrix/modules/main/tools/cron_events.php. Schedule 1C exchange (15–60 min), search reindex, backups (mysqldump + rsync, rotation 7+4), temporary file cleanup.

Security and Administration

File system: owner www-data, directories 755, files 644, upload 775. nginx blocks access to configuration files. Enable Bitrix Proactive Protection — WAF, activity control (block after 5 failed attempts), kernel integrity check. For admin panel: two-factor authentication via Google Authenticator or OTP, restrict access by IP via nginx for paranoid.

How Long Does 1C-Bitrix Installation and Configuration Take?

Task Timeline
Installation on virtual hosting 2–4 hours
Installation on VPS with stack configuration 1–2 days
Installation on dedicated with architecture design 2–5 days
SSL + email + cron + security 1–2 days
Backup and monitoring setup 0.5–1 day

Post-Installation Checklist

  1. Performance Monitor (/bitrix/admin/perfmon_panel.php) — aim for 30+ points. Below 20 means serious configuration issues.
  2. System Check — automatic check of all parameters. Red items must be fixed, yellow — case by case.
  3. Security Scanner — check for typical vulnerabilities.
  4. PageSpeed Insights — TTFB < 200ms on VPS, LCP < 2.5s.
  5. Test 1C exchange — if integration is planned, verify CommerceML exchange before launch.

Additionally, check software versions, caching settings, cron operation, SSL certificate, SPF/DKIM/DMARC, access rights, delete default users and pages. For projects with 54-FZ, ensure fiscalization is configured via OFD provider.

Deliverables

  • Fully configured server for 1C-Bitrix with MySQL, PHP, nginx optimization.
  • Installed and activated license of the required edition.
  • SSL certificate, email settings, cron and backups.
  • Documentation: all configuration parameters, access credentials, cron tasks.
  • Content manager training: how to log into admin panel, add products, upload images.
  • Post-installation support for 30 days — consultations on settings.

Why Trust Professionals with Installation?

Incorrect installation means lost time and money. We've seen projects where a store on "Start" couldn't handle 50 visitors because innodb_buffer_pool_size wasn't configured. After migrating to VPS with correct configuration, the site "flew". Incorrect configuration can cost 30,000 RUB monthly due to excessive resource consumption. You get a ready-made architecture that scales. Order turnkey 1C-Bitrix installation — get a reliable platform for business growth. Contact us for a free consultation: we'll calculate the cost and time for your project. Over 7 years of experience, 120+ Bitrix projects implemented, including highload stores with million-item catalogs. Get in touch — we'll help configure Bitrix for your project.