Как встроить фотогалерею на сайт
Показывайте фотографии с вашего мероприятия прямо на любом сайте, в блоге или на странице WordPress. Fotify генерирует код встраивания, который вы вставляете в HTML — и галерея появляется с автоматической подстройкой размера, настройками темы и двумя режимами отображения: сетка и карусель.
Шаг 1: Сгенерируйте код встраивания
- Перейдите в раздел Photos в боковом меню
- Нажмите "Share Album" в разделе Actions
- Включите "Public Album Access", если эта опция ещё не включена
- Прокрутите вниз и включите "Embed on Website"
- Появится генератор кода встраивания
Сначала нужно поделиться альбомом, и только после этого вы сможете генерировать коды встраивания.
Шаг 2: Настройте встраивание
Перед копированием кода настройте следующие параметры:
Тема
Выберите одну из 10 визуальных тем, чтобы она соответствовала вашему сайту:
- Classic — Чистый белый фон с лёгкими тенями
- Dark — Стильный тёмный фон со светящимися акцентами
- Minimal — Без рамок, без заголовка — только ваши фото
- Elegant — Серифная типографика с тёплыми, утончёнными тонами
- Modern — Выразительные скруглённые карточки с градиентным заголовком
- Polaroid — Ностальгические фоторамки с белыми полями
- Glass — Эффект матового стекла с прозрачностью и размытием
- Neon — Яркое свечение с электрическими акцентами
- Magazine — Редакционный стиль с асимметричной сеткой
- Sunset — Тёплый градиент с атмосферой «золотого часа»
Макет
- Grid — Фотографии отображаются в адаптивной сетке (по умолчанию). Можно выбрать от 2 до 5 столбцов.
- Carousel — Слайд-шоу, которое автоматически переключается каждые 4 секунды, с навигационными стрелками и точечными индикаторами. Поддерживает клавиши со стрелками на клавиатуре.
Max Photos
Ограничьте количество фотографий, отображаемых во встраивании. Выберите "All" для бесконечной прокрутки (в режиме сетки) или полного набора (в режиме карусели).
Шаг 3: Вставьте код
- Нажмите "Copy", чтобы скопировать код встраивания
- Вставьте его в HTML-редактор вашего сайта
Код включает <iframe> и небольшой скрипт, который автоматически подстраивает размер фрейма под содержимое — никаких дополнительных настроек не требуется.
WordPress
В редакторе WordPress добавьте блок Custom HTML и вставьте код встраивания.
Squarespace
Используйте Code Block или Embed Block и вставьте код.
Wix
Используйте элемент HTML iframe (в разделе "Embed") и вставьте код.
Любая HTML-страница
Вставьте код в любом месте внутри тега <body>. Галерея автоматически подстраивается под ширину контейнера.
Как это работает
- Встраивание загружает ваш публичный альбом внутри iframe
- Фотографии подгружаются в реальном времени — новые загрузки появляются автоматически
- Iframe автоматически меняет высоту в соответствии с содержимым, поэтому не остаётся лишнего пустого пространства
- Нажатие на любую фотографию открывает полный альбом в новой вкладке
- Встраивание учитывает настройки модерации вашего альбома — отображаются только одобренные фотографии
Часто задаваемые вопросы
Q: Нужно ли обновлять код встраивания, когда я добавляю новые фотографии? A: Нет. Встраивание загружает фотографии в реальном времени из вашего альбома. Новые одобренные фотографии появляются автоматически.
Q: Можно ли встроить конкретный альбом с моего мероприятия? A: Да, код встраивания включает уникальный ID вашего альбома. Если у вас несколько альбомов, для каждого будет свой код встраивания.
Q: Работает ли встраивание на мобильных устройствах? A: Да, галерея полностью адаптивная. Количество столбцов в сетке автоматически подстраивается на небольших экранах, а карусель поддерживает свайпы.
Q: Могут ли посетители загружать фотографии через встраивание? A: Нет, встраивание предназначено только для просмотра. Чтобы посетители могли загружать фото, поделитесь вашим QR code или ссылкой для загрузки.
Q: Замедляет ли встраивание мой сайт?
A: Нет. Встраивание использует loading="lazy", поэтому загружается только тогда, когда посетитель прокручивает страницу до него. Фотографии доставляются через CDN для быстрой загрузки.
Q: Можно ли изменить тему после встраивания?
A: Да. Тема задаётся через параметр URL. Вы можете либо заново сгенерировать код встраивания с другой темой, либо вручную изменить значение theme= в URL iframe.
Q: Что произойдёт, если я отключу публичный доступ к альбому? A: Встраивание покажет состояние ошибки. Включите public access снова, чтобы восстановить работу.
Q: Есть ли водяной знак "Powered by Fotify"? A: В большинстве тем внизу отображается небольшой футер "Powered by Fotify". В минимальной теме он менее заметен.
Была ли эта статья полезной?