Разработка сайта фотографа на 1С-Битрикс

Разработка сайта фотографа на 1С-Битрикс

Сайт фотографа продаёт через визуал. Текст вторичен — главное, чтобы портфолио загрузилось быстро, выглядело на весь экран и не мешало снимкам. При этом технически фотосайт — одна из самых нагруженных тем с точки зрения изображений: десятки галерей, сотни фотографий весом 3–10 МБ каждая. На 1С-Битрикс портфолио строится на инфоблоках с продуманной оптимизацией отдачи файлов, а бизнес-логика (бронирование, личный кабинет, блог) закрывается штатными модулями.

Услуги с пакетами

Страница услуг — второй по значимости раздел после портфолио. Фотограф предлагает несколько форматов работы, и клиент должен быстро понять разницу.

Инфоблок «Услуги» со свойствами:

• Название — свадебная съёмка, репортажная, предметная, портретная
• Формат — список (почасовая, пакетная)
• Длительность — строковое (2 часа, полный день)
• Что входит — текстовое поле с HTML (количество обработанных фото, локации, реквизит)
• Количество фото в пакете — числовое
• Привязка к галерее — связь с инфоблоком портфолио для примеров работ

На фронте услуги отображаются карточками с кратким описанием и кнопкой «Забронировать съёмку». Детальная страница — полное описание пакета с примерами из привязанной галереи.

Онлайн-бронирование съёмки

Бронирование — через интерактивный календарь занятости. Клиент видит свободные даты и отправляет заявку на конкретный день.

Реализация календаря: инфоблок «Расписание» с элементами-днями. Свойства: дата, статус (свободен / занят / предварительная бронь), тип съёмки. Компонент на фронте рендерит месячную сетку, подкрашивая занятые дни серым. Данные подгружаются AJAX-запросом при переключении месяца.

Клиент нажимает на свободную дату → открывается форма:

• Имя и телефон
• Тип съёмки (из списка услуг)
• Локация (текстовое поле)
• Комментарий

Заявка создаёт лид в CRM или записывает результат веб-формы и отправляет email фотографу. После подтверждения фотограф переводит статус дня в «занят» — через административный интерфейс инфоблока или кастомную админ-страницу с drag-and-drop.

Блог с backstage и SEO

Блог решает две задачи: SEO-трафик по запросам типа «как подготовиться к свадебной фотосессии» и демонстрация экспертности. Реализуется через стандартный инфоблок новостного типа: заголовок, анонс, детальный текст, фотографии, теги, дата публикации.

SEO-настройки: ЧПУ через модуль urlrewrite, мета-теги через свойства инфоблока (title, description), хлебные крошки, Schema.org Article в JSON-LD. Sitemap генерируется модулем SEO Битрикс с автоматическим обновлением при публикации.

Клиентский кабинет для выдачи фотографий

После съёмки фотограф выдаёт обработанные фотографии клиенту. Традиционные варианты — Яндекс.Диск, Google Drive — работают, но выглядят непрофессионально и не дают контроля (клиент может расшарить ссылку). Закрытая галерея на сайте — элегантнее.

Реализация: инфоблок «Клиентские галереи» с элементами-заказами. Свойства:

• Привязка к пользователю — ID зарегистрированного клиента
• Дата съёмки
• Набор фотографий — множественное файловое свойство
• Статус — обработка / готово к просмотру / скачано
• Срок доступа — дата, после которой галерея деактивируется (мотивация скачать вовремя)

Доступ контролируется двумя способами:

1. Авторизация — клиент регистрируется на сайте, фотограф привязывает галерею к аккаунту. В личном кабинете клиент видит свои галереи.
2. Ссылка с паролем — для тех, кто не хочет регистрироваться. Уникальный URL + пароль, отправленный SMS. Компонент проверяет хеш пароля перед отображением.

Галерея отображается в lightbox с возможностью скачивания отдельных фото или архива (ZIP генерируется на лету через ZipArchive). Водяной знак на превью — через GD или Imagick при генерации миниатюр.

Портфолио с оптимизацией тяжёлых изображений

Портфолио — ядро сайта и главная техническая задача. Фотограф загружает снимки в разрешении 4000–6000 px, весом 5–15 МБ. Посетитель должен видеть галерею мгновенно.

Структура инфоблока «Портфолио»:

• Разделы — жанры (свадебная, репортажная, предметная, портретная, архитектурная)
• Элементы — фотосессии или отдельные серии
• Свойства элемента: описание, дата, локация, множественное файловое свойство «Фотографии»

Генерация миниатюр. При загрузке фотографии обработчик события OnAfterIBlockElementUpdate запускает фоновую задачу (через агенты или очередь) на создание набора миниатюр:

Оригинал сохраняется, но не отдаётся напрямую — только через миниатюры. CFile::ResizeImageGet() с параметром BX_RESIZE_IMAGE_PROPORTIONAL сохраняет пропорции. WebP-конвертация через Imagick (проверка поддержки через Accept заголовок или тег <picture>).

Lazy loading с прогрессивным отображением. Стандартный loading="lazy" работает, но для фотосайта недостаточно — посетитель видит прыгающую раскладку. Решение:

1. Placeholder с доминантным цветом — при загрузке фото извлекается средний цвет (PHP, imagecreatefrompng → imagecolorsforindex), сохраняется в свойство элемента. В CSS placeholder окрашивается в этот цвет.
2. Blur-up техника — микро-превью 20×13 px (< 1 КБ) инлайнится в HTML как base64, отображается размытым. При загрузке реальной картинки — плавная замена через CSS-transition.
3. Intersection Observer — кастомный скрипт загружает изображения при приближении к viewport (margin 200px), а не при попадании.

Сетка галереи. Masonry-раскладка на CSS Grid с фиксированной шириной колонок и автоматическим заполнением (grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))). Для вертикальных и горизонтальных снимков — одинаковая ширина, разная высота. Lightbox — Fancybox 5 или GLightbox с поддержкой свайпа на мобильных.

CDN. Для фотосайта с аудиторией из разных регионов CDN обязателен. Настройка через модуль CDN Битрикс (подмена URL статики) или ручная конфигурация nginx с проксированием на CloudFlare / BunnyCDN. Миниатюры отдаются через CDN, оригиналы — с сервера напрямую (экономия на трафике CDN).

Защита от скачивания — условная. Полностью запретить копирование невозможно, но можно усложнить:

• Отключение контекстного меню на изображениях (JavaScript, обходится, но отсекает случайных)
• Водяной знак на отображаемых версиях (не на скачиваемых в клиентском кабинете)
• Отдача через CSS background-image вместо <img> (усложняет сохранение для неподготовленных)

Результат оптимизации: галерея из 30 фотографий загружается за 1.5–2 секунды на мобильном LTE. Первый экран отображается за 0.8–1 секунду благодаря инлайн-placeholder и preload hero-изображения.

Этапы разработки

Итого: 7–9 недель. Критически важно получить фотоматериалы заранее — обработка и загрузка занимают больше времени, чем кажется.