Медиа-сетка для InstantCMS — фото и видео без обрезки.
Создавайте красивые адаптивные галереи с фото и видео в стиле VK и Telegram.
Поле Медиа-сетка — современное поле для InstantCMS, объединяющее фотографии и видео из Rutube, VK Video и YouTube в единую гармоничную сетку. Умная адаптивная верстка сохраняет пропорции изображений, а удобная сортировка, полноэкранный лайтбокс и гибкие настройки делают публикацию медиаконтента простой и эффектной.
📸 Как работает интерфейс загрузки медиафайлов
Поле «Медиа-сетка» (fieldMediagrid) позволяет удобно добавлять фотографии и видео в одну публикацию InstantCMS, управлять их порядком и формировать единую красивую галерею.
🖼️ Загрузка изображений
Для добавления фотографий достаточно нажать кнопку «Загрузить фото» и выбрать нужные изображения на компьютере, смартфоне или планшете.
Поддерживается пакетная загрузка нескольких фотографий одновременно. После выбора изображения автоматически добавляются в медиасетку, где для каждой карточки отображается миниатюра и ее порядковый номер.
Пользователь может:
Добавлять сразу несколько фотографий.
Перетаскивать карточки мышью или пальцем на сенсорном экране.
Менять порядок изображений с помощью кнопок навигации.
Назначать любую фотографию главной обложкой публикации.
Формировать нужную последовательность отображения медиафайлов.
🎬 Добавление видео
Для добавления видеоролика используется кнопка «Добавить видео». В открывшемся окне необходимо вставить прямую ссылку на видео с поддерживаемых видеохостингов:
YouTube;
Rutube;
VK Video.
После нажатия кнопки «Определить» система автоматически распознает видеохостинг, определяет идентификатор ролика и получает его название и обложку.
🖼️ Обложка видео загружается на сайт
Важная особенность поля — обложка видеоролика сохраняется непосредственно на вашем сайте, а не подгружается каждый раз с сервера YouTube, Rutube или VK Video.
Это позволяет использовать локальную копию изображения в медиасетке и отображать ее независимо от доступности внешнего сервера с обложками.
При необходимости пользователь может заменить автоматически полученную обложку на собственную фотографию. Для этого в окне добавления видео предусмотрена функция «Заменить обложку»: достаточно выбрать нужное изображение с устройства.
Такая возможность особенно полезна, если:
Видеохостинг не предоставил обложку.
Автоматическая обложка не загрузилась.
Нужно использовать собственный дизайн изображения.
Необходимо привести все карточки публикации к единому визуальному стилю.
После подтверждения видео добавляется в общую медиасетку наравне с фотографиями. Для него отображается превью, отметка соответствующего видеохостинга и кнопка воспроизведения.
🚀 Единая медиасетка для фото и видео
Все добавленные изображения и видеоролики объединяются в одну управляемую коллекцию. Их можно свободно сортировать, назначать главную обложку и просматривать в единой адаптивной галерее.
В результате публикация получает аккуратную медиасетку, в которой фотографии и видео гармонично сочетаются, а управление контентом становится простым и интуитивным.
Вышло обновление / Версия 1.1.0
В этом обновлении добавил новый режим вывода медиафайлов и дали больше гибкости при оформлении записей:
1. Новый шаблон: «Слайдер медиа (Carousel)»
Теперь фото и видео можно выводить не только сеткой, но и в виде аккуратного горизонтального слайдера с плавной прокруткой и поддержкой свайпов:
Умная раскладка под количество медиа:1 карточка — автоматически занимает 100% ширины блока.
2 карточки — делят строку поровну (50/50) с зазором между ними и без пустого пространства справа.
3 и более — автоматически подключается слайдер с кнопками навигации и поддержкой тач-жестов.
Автоматическая адаптация высоты и пропорций: высота карточек подстраивается под пропорции изображений (auto), а смешанный контент (вертикальные фото и горизонтальные видео) аккуратно выравнивается по единой высоте без пустых полос.
2. Раздельный выбор шаблонов для списка и записи
В настройках поля появились две независимые опции:
Шаблон поля в записи — вид медиа на полной странице материала.
Шаблон поля в списке записей — вид в лентах, категориях и блогах.
(Например, в общей ленте можно включить компактный слайдер, а внутри самой записи — классическую плитку-сетку, или наоборот).
3. Настройка ширины и высоты карточек
В панели управления полем можно гибко задавать ширину слайдов (280px, 320px, calc(50% — 8px) и др.) и режим высоты (auto либо фиксированный в px).
Добрый день. Данное поле совместимо со стандартным полем «Набор изображений»? Можно ли у существующего поля поменять тип на ваше поле и наоборот?
Здравствуйте.
Нет, не совместимо. Но думаю можно сделать мигратор для переезда на новое поле.
П.с.
Гляньте моё бесплатное поле слайдер изображений — оно совместимо.