Developing a photographer's website using 1C-Bitrix

Photographer Website Development on 1C-Bitrix

Photographer website sells through visuals. Text is secondary — main thing is portfolio loads fast, displays full-screen, and doesn't hinder photos. Technically, photographer site — one of the most image-heavy topics: dozens of galleries, hundreds of photos weighing 3–10 MB each. On 1C-Bitrix portfolio built on info blocks with smart image optimization, and business logic (booking, personal cabinet, blog) covered by native modules.

Services with Packages

Services page — second most important after portfolio. Photographer offers several work formats, client must quickly understand difference.

"Services" info block with properties:

• Name — wedding, reportage, product, portrait
• Format — list (hourly, package)
• Duration — string (2 hours, full day)
• What's Included — text with HTML (processed photo count, locations, props)
• Photos in Package — numeric
• Gallery Binding — link to portfolio info block for examples

On front services displayed as cards with brief description and "Book a Shoot" button. Detail page — full package description with examples from linked gallery.

Online Booking

Booking — via interactive calendar. Client sees free dates and submits request for specific day.

Calendar Implementation: "Schedule" info block with day elements. Properties: date, status (free / booked / preliminary), shoot type. Front component renders monthly grid, grays out booked days. Data loaded via AJAX on month switch.

Client clicks free date → form opens:

• Name and Phone
• Shoot Type (from services list)
• Location (text)
• Comment

Submission creates lead in CRM or records web-form result, sends email to photographer. After confirmation photographer sets day status to "booked" — via info block admin or custom admin page with drag-and-drop.

Blog with Backstage and SEO

Blog solves two tasks: SEO traffic for "how to prepare for wedding photoshoot" queries and expertise demonstration. Built via standard news-type info block: title, preview, detailed text, photos, tags, publication date.

SEO setup: friendly URLs via urlrewrite module, meta-tags via info block properties (title, description), breadcrumbs, Schema.org Article in JSON-LD. Sitemap generated by Bitrix SEO module with auto-update on publish.

Client Cabinet for Photo Delivery

After shoot photographer delivers processed photos. Traditional variants — Yandex.Disk, Google Drive — work but look unprofessional and give no control (client can reshare link). Closed gallery on site — more elegant.

Implementation: "Client Galleries" info block with order elements. Properties:

• User Binding — registered client ID
• Shoot Date
• Photo Set — multiple file property
• Status — processing / ready to view / downloaded
• Access Deadline — date after which gallery deactivates (motivation to download)

Access controlled two ways:

1. Authorization — client registers on site, photographer binds gallery to account. In personal cabinet client sees their galleries.
2. Password Link — for those not registering. Unique URL + password sent via SMS. Component checks password hash before display.

Gallery displays in lightbox with individual photo or archive (ZIP) download option. Watermark on preview — via GD or Imagick on thumbnail generation.

Portfolio with Heavy Image Optimization

Portfolio — site core and main technical challenge. Photographer uploads 4000–6000 px shots weighing 5–15 MB. Visitor must see gallery instantly.

"Portfolio" Info Block Structure:

• Sections — genres (wedding, reportage, product, portrait, architecture)
• Elements — photo sessions or series
• Element Properties: description, date, location, multiple file property "Photos"

Thumbnail Generation. On photo upload, handler OnAfterIBlockElementUpdate starts background task (via agents or queue) for thumbnail set generation:

Original saved but not delivered directly — only via thumbnails. CFile::ResizeImageGet() with BX_RESIZE_IMAGE_PROPORTIONAL preserves aspect. WebP conversion via Imagick (support checked via Accept header or <picture> tag).

Lazy Loading with Progressive Display. Standard loading="lazy" works but insufficient for photo site — visitor sees layout shift. Solution:

1. Placeholder with Dominant Color — on photo load dominant color extracted (PHP, imagecreatefrompng → imagecolorsforindex), saved to element property. CSS placeholder colored accordingly.
2. Blur-up Technique — micro-preview 20×13 px (< 1 KB) inlined as base64, displayed blurred. On real image load — smooth CSS-transition replace.
3. Intersection Observer — custom script loads images on viewport approach (margin 200px), not on intersection.

Gallery Grid. CSS Grid masonry with fixed column width and auto-fill (grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))). Vertical and horizontal shots — same width, different height. Lightbox — Fancybox 5 or GLightbox with mobile swipe.

CDN. For photo site with multi-region audience CDN is mandatory. Setup via Bitrix CDN module (static URL substitution) or manual nginx with CloudFlare / BunnyCDN proxy. Thumbnails via CDN, originals — direct server (CDN traffic savings).

Download Protection — conditional. Cannot fully prevent copy but can complicate:

• Context menu disable on images (JavaScript, bypassed but stops casual)
• Watermark on displayed versions (not on client cabinet downloads)
• CSS background-image instead of <img> (complicates saving)

Optimization Result: 30-photo gallery loads in 1.5–2 seconds on mobile LTE. First screen displays in 0.8–1 second via inline placeholder and hero-image preload.

Development Stages

Total: 7–9 weeks. Critically important to get photos early — processing and upload takes more time than seems.