Справочник типов полей
Тип поля задаёт две вещи: каким виджетом поле редактируется в админке и какую структуру данных оно хранит. Разметку и выбор типа (data-mpc-ftype, data-mpc-values) разбирает Разметка вёрстки; здесь — справочник: какие типы есть, какие у них вложенные поля и как обращаться к значению в шаблоне.
Все типы делятся на две группы:
- Простые — хранят одно значение. В шаблон выводятся плейсхолдером
{$имя_поля}. - Составные (медиа и списки) — хранят набор вложенных полей. К ним обращаются через индекс и точку:
{$имя_поля[0].подполе}.
Откуда берутся типы: их прототипы лежат в служебной MIGX-конфигурации mpc_base (см. Разметка → Откуда берутся типы). data-mpc-ftype ссылается на прототип, а компонент клонирует его под ваше поле.
Простые типы
Хранят одно значение, выводятся как {$имя_поля}. Тип влияет только на виджет ввода в админке — на вывод нет (плейсхолдер всегда одинаковый).
ftype | Поле в админке | Вывод в шаблоне |
|---|---|---|
text | строка | {$field} |
textarea | многострочный текст | {$field} |
richtext | визуальный редактор | {$field} |
number | число | {$field} |
date | датапикер | {$field} |
email | {$field} | |
url | URL | {$field} |
file | файловый браузер | {$field} |
tag / autotag | теги | {$field} |
option | радио-кнопки (один из) | {$field} (хранится ключ) |
listbox | выпадающий список (один) | {$field} (хранится ключ) |
checkbox | флажки (несколько) | {$field} (ключи через ||) |
listbox-multiple | список с мультивыбором | {$field} (ключи через ||) |
Для полей с выбором (option, listbox, checkbox, listbox-multiple) набор вариантов задаётся атрибутом data-mpc-values — форматы разобраны в Разметке → Поля с выбором. В поле хранится ключ выбранного варианта, а подпись уходит в лексикон. При мультивыборе ключи пишутся одной строкой через || и на рендере перебираются.
Неизвестный тип
data-mpc-ftype передаётся в MIGX как есть — белого списка нет. Можно указать любой тип ввода, поддерживаемый MIGX/MODX: если прототипа с таким именем нет в mpc_base, компонент соберёт простое поле «на лету» с этим виджетом ввода.
Медиа-типы
Медиа-поле хранит не одно значение, а набор вложенных полей (путь, размеры, alt и т.д.). Компонент собирает их в один объект, к которому обращаются через индекс [0] и точку:
<!-- вход: размеченная картинка -->
<img data-mpc-field="image" src="assets/img/hero.png" width="1200" height="500" alt="Главный экран"><!-- выход: обращение к вложенным полям -->
<img src="{$image[0].src}" width="{$image[0].width}" height="{$image[0].height}" alt="{$image[0].alt}">Почему [0]
Медиа хранится массивом (на случай нескольких источников), поэтому к одиночному медиа-полю обращаются через [0] — первый и единственный элемент. У вложенных списков (sources) элементов несколько — их перебирают циклом foreach (примеры ниже).
Тип медиа обычно не указывают через data-mpc-ftype — он определяется автоматически по HTML-тегу: <img> → изображение, <picture> → picture, <video> → видео, <audio> → аудио. Ниже — точный состав вложенных полей каждого типа.
Изображение (<img>)
| Подполе | Тип | Назначение |
|---|---|---|
src | изображение | путь к файлу |
alt | строка | альтернативный текст |
title | строка | подпись (tooltip) |
width | число | ширина |
height | число | высота |
<img src="{$image[0].src}" alt="{$image[0].alt}" title="{$image[0].title}"
width="{$image[0].width}" height="{$image[0].height}">alt берите из самой картинки ({$image[0].alt}), а не из соседнего текстового поля. Скачивание внешних src, обрезку по width/height и ленивую загрузку разбирает Работа с медиа.
Фоновое изображение (bg_img)
Отдельный простой тип для фоновых картинок: значение — это путь, без вложенных полей. Срабатывает от зарезервированного имени поля bg_img на любом элементе с background-image в style:
<section data-mpc-section="hero" data-mpc-field="bg_img"
style="background-image: url('img/hero-bg.jpg')">В шаблоне выводится одним значением:
<section style="background-image: url('{$bg_img}')">Подробнее про фон (ленивая загрузка, обрезка) — в Разметке → Дополнительные атрибуты секции и Работе с медиа.
<picture>
Адаптивная картинка с несколькими источниками.
<img> ставьте первым внутри <picture>
Нарезка берёт основное изображение (src/alt/width/height) и превью из первого <img> в <picture>. Поэтому в размечаемой вёрстке <img> должен быть первым дочерним элементом, а <source> — после него. На выходе нарезка сама пересобирает <picture> в корректном для браузера порядке (сначала <source>, затем <img>), так что итоговая разметка остаётся валидной.
Вложенные поля:
| Подполе | Тип | Назначение |
|---|---|---|
img | изображение | основное изображение (со своими src/alt/width/height/title) |
sources | список | набор <source> (см. ниже) |
preview | изображение | превью/заглушка |
Подполя каждого элемента sources:
| Подполе | Тип | Назначение |
|---|---|---|
srcset | изображение | набор источников для srcset |
type | строка | MIME-тип (image/webp и т.п.) |
media | строка | медиа-запрос ((max-width: 768px)) |
sizes | строка | атрибут sizes |
width | число | ширина источника |
height | число | высота источника |
srcset/sizes против width/height
У <source> внутри <picture> эти поля решают разные задачи. srcset и sizes — про выбор файла: sizes подсказывает браузеру, какой ширины будет картинка в макете, чтобы он взял подходящий вариант из srcset. width/height — про размеры источника: в готовой разметке браузер по ним резервирует место под картинку (борьба с «прыжками» вёрстки).
Но в компоненте у width/height есть и вторая роль: при нарезке они передаются в обрезку. Если подключён сниппет-обрезчик (mpc_thumb_snippet) и включена ленивая загрузка, для каждого источника srcset формируется вызов обрезки с его width/height (&w=/&h=) — то есть каждый вариант обрезается под свой размер. Отключить обрезку конкретного источника можно атрибутом data-mpc-nothumb. Подробнее об обрезке — в Работе с медиа.
<picture>
{foreach $picture[0].sources as $s}
<source srcset="{$s.srcset}" type="{$s.type}" media="{$s.media}" sizes="{$s.sizes}">
{/foreach}
<img src="{$picture[0].img[0].src}" alt="{$picture[0].img[0].alt}">
</picture>Обратите внимание: img внутри picture — это вложенное изображение, поэтому к нему обращаются через двойной индекс: {$picture[0].img[0].src}.
<video>
| Подполе | Тип | Назначение |
|---|---|---|
src | строка | путь к видеофайлу |
poster | изображение | постер (превью до запуска) |
controls | да/нет | показывать элементы управления |
autoplay | да/нет | автозапуск |
loop | да/нет | зацикливание |
muted | да/нет | без звука |
preload | строка | стратегия предзагрузки (none/metadata/auto) |
width | число | ширина |
height | число | высота |
title | строка | заголовок |
sources | список | дополнительные источники (см. ниже) |
Поля controls/autoplay/loop/muted хранят 1 или 0, поэтому в шаблоне их удобно выводить через условие:
<video poster="{$video[0].poster}" width="{$video[0].width}" height="{$video[0].height}"
{if $video[0].controls}controls{/if}{if $video[0].autoplay} autoplay{/if}{if $video[0].muted} muted{/if}>
<source src="{$video[0].src}">
{foreach $video[0].sources as $s}
<source src="{$s.src}" type="{$s.type}" media="{$s.media}">
{/foreach}
</video>Подполя каждого элемента sources (общие для видео и аудио): src (изображение/путь), type (MIME), media (медиа-запрос).
<audio>
| Подполе | Тип | Назначение |
|---|---|---|
src | строка | путь к аудиофайлу |
controls | да/нет | показывать элементы управления |
autoplay | да/нет | автозапуск |
loop | да/нет | зацикливание |
muted | да/нет | без звука |
preload | строка | стратегия предзагрузки |
title | строка | заголовок |
sources | список | дополнительные источники (src/type/media) |
<audio {if $audio[0].controls}controls{/if}{if $audio[0].loop} loop{/if}>
<source src="{$audio[0].src}">
{foreach $audio[0].sources as $s}
<source src="{$s.src}" type="{$s.type}">
{/foreach}
</audio>Медиа и типы внутри списков
В списках (повторяющихся блоках) работают те же типы — простые и медиа. Разница одна: к полю добавляется префикс элемента $itemN. Медиа-поле внутри списка остаётся объектом с индексом [0]:
{foreach $cards as $item1}
<img src="{$item1.photo[0].src}" alt="{$item1.photo[0].alt}">
<h3>{$item1.title}</h3>
{/foreach}Сама разметка списков (data-mpc-item, вложенность, динамическое число элементов) разобрана в Разметке → Списки.
Если нужно несколько изображений
Заводить специальный «медиа-список» ради нескольких картинок не обязательно. Проще дать полям обычные имена (image_1, image_2 — фиксированный набор) или использовать список через data-mpc-item, если число элементов должно быть динамическим.