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

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

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

Послуги з пакетами

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

Інфоблок «Послуги» з властивостями:

• Назва — весільна зйомка, репортажна, предметна, портретна
• Формат — список (почасова, пакетна)
• Тривалість — строка (2 години, повний день)
• Що входить — текстове поле з HTML (кількість обробленої фото, локації, реквізит)
• Кількість фото в пакеті — числова
• Привязка до галереї — зв'язок з інфоблоком портфоліо для прикладів робіт

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

Онлайн-бронювання зйомки

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

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

Клієнт натискає на вільну дату → відкривається форма:

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

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

Блог з backstage та SEO

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

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

Клієнтський кабінет для виданні фотографій

Після зйомки фотограф видає оброблені фотографії клієнту. Традиційні варіанти — Яндекс.Диск, 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 Bitrix (підмена URL статики) або ручна конфігурація nginx з проксуванням на CloudFlare / BunnyCDN. Мініатюри отдаются через CDN, оригіналі — з сервера напрямку (економія на трафіку CDN).

Захист від завантаження — умовна. Повністю заборонити копіювання неможливо, але можна утруднити:

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

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

Етапи розробки

Разом: 7–9 тижнів. Критично важливо отримати фотоматеріали завчасно — обробка та завантаження займають більше часу, ніж здається.