Skip to content
PageBuilder
PageBuilder
Визуальный конструктор секций для MODX 3: черновик и публикация без перезаписи content ресурса
  • MODX 3
  • PHP 8.2
  • Vue 3
  1. Компоненты
  2. PageBuilder
  3. Типы полей
  4. Free
  5. image

Поле image

Версия: Free.

Зачем этот тип

  • После сохранения в объекте есть ширина, высота и расширение
  • Альтернативный текст и подпись задаются в схеме секции
  • Одно изображение, без списка как у gallery

Когда использовать

  • Фон первого экрана, превью карточки, фото автора
  • Картинка для превью внутри секции
  • Логотип партнёра с альтернативным текстом

Советы

  • Несколько фото: gallery (Pro)
  • В чанке берите {$photo.url}, не путь к файлу строкой

Похожие типы

  • gallery для набора изображений (Pro)
  • file для любых файлов, не только изображений

Настройка

json
{
  "name": "photo",
  "type": "image",
  "label": "Изображение",
  "description": "Рекомендуемый размер 1920×1080",
  "width": 50,
  "tab": "Контент",
  "active": true
}

Значение

Media-объект. Кнопка Info редактирует width, height, title. При выборе из браузера подтягиваются size и имя файла.

Данные секции

Ключ photo в данных секции после save enrich:

json
{
  "photo": {
    "url": "assets/images/hero.jpg",
    "id": 12,
    "path": "assets/images/",
    "filename": "hero.jpg",
    "extension": "jpg",
    "name": "hero",
    "title": "hero.jpg",
    "width": 1920,
    "height": 1080,
    "size": 245760,
    "type": "image"
  }
}
  • Поля width, height, size дополняются с диска, если файл доступен MODX.

Пример в chunk

modx
[[$pagebuilder_partial_image?
  &image=`[[+photo]]`
  &alt=`[[+photo.title]]`
  &class=`pb-image__media`
]]
fenom
{include 'pagebuilder_partial_image' image=$photo alt=$photo.title class='pb-image__media'}

Общие свойства

Для полей с name, которые сохраняются в данных секции:

КлючТипРольПанель
tabstringПодзаголовок группы в инспектореда
width25–100Ширина поля в % строки (flex)да
descriptionstringПодсказка под подписьюда
defaultanyНачальное значение новой секциида
activeboolfalse — скрыть поле в инспектореда
requiredboolОбязательно при publish (черновик сохраняется)да
  • Дополнительно в schema: нет responsive. Значение — media-объект, enrich при save.

Подробнее: обзор полей.

Дальше