Поле Медиа-сетка — современное поле для InstantCMS, объединяющее фотографии и видео из Rutube, VK Video и YouTube в единую гармоничную сетку. Умная адаптивная верстка сохраняет пропорции изображений, а удобная сортировка, полноэкранный лайтбокс и гибкие настройки делают публикацию медиаконтента простой и эффектной.
📸 Как работает интерфейс загрузки медиафайлов
Поле «Медиа-сетка» (fieldMediagrid) позволяет удобно добавлять фотографии и видео в одну публикацию InstantCMS, управлять их порядком и формировать единую красивую галерею.
🖼️ Загрузка изображений
Для добавления фотографий достаточно нажать кнопку «Загрузить фото» и выбрать нужные изображения на компьютере, смартфоне или планшете.
Поддерживается пакетная загрузка нескольких фотографий одновременно. После выбора изображения автоматически добавляются в медиасетку, где для каждой карточки отображается миниатюра и ее порядковый номер.
Пользователь может:
Добавлять сразу несколько фотографий.
Перетаскивать карточки мышью или пальцем на сенсорном экране.
Менять порядок изображений с помощью кнопок навигации.
Назначать любую фотографию главной обложкой публикации.
Формировать нужную последовательность отображения медиафайлов.
🎬 Добавление видео
Для добавления видеоролика используется кнопка «Добавить видео». В открывшемся окне необходимо вставить прямую ссылку на видео с поддерживаемых видеохостингов:
YouTube;
Rutube;
VK Video.
После нажатия кнопки «Определить» система автоматически распознает видеохостинг, определяет идентификатор ролика и получает его название и обложку.
🖼️ Обложка видео загружается на сайт
Важная особенность поля — обложка видеоролика сохраняется непосредственно на вашем сайте, а не подгружается каждый раз с сервера YouTube, Rutube или VK Video.
Это позволяет использовать локальную копию изображения в медиасетке и отображать ее независимо от доступности внешнего сервера с обложками.
При необходимости пользователь может заменить автоматически полученную обложку на собственную фотографию. Для этого в окне добавления видео предусмотрена функция «Заменить обложку»: достаточно выбрать нужное изображение с устройства.
Такая возможность особенно полезна, если:
Видеохостинг не предоставил обложку.
Автоматическая обложка не загрузилась.
Нужно использовать собственный дизайн изображения.
Необходимо привести все карточки публикации к единому визуальному стилю.
После подтверждения видео добавляется в общую медиасетку наравне с фотографиями. Для него отображается превью, отметка соответствующего видеохостинга и кнопка воспроизведения.
🚀 Единая медиасетка для фото и видео
Все добавленные изображения и видеоролики объединяются в одну управляемую коллекцию. Их можно свободно сортировать, назначать главную обложку и просматривать в единой адаптивной галерее.
В результате публикация получает аккуратную медиасетку, в которой фотографии и видео гармонично сочетаются, а управление контентом становится простым и интуитивным.
Демо:
Смотреть
