docs.modx.pro
PageBuilder
PageBuilder
Визуальный конструктор секций для MODX 3: черновик и публикация без перезаписи content ресурса
  • MODX 3
  • PHP 8.2
  • Vue 3
Зависимости
  1. Компоненты
  2. PageBuilder
  3. Каталог секций
  4. Free
  5. Изображение

Изображение ​

Один кадр на всю ширину колонки контента. Подходит для иллюстрации, скриншота или баннера без кнопки.

Изображение

Когда одного кадра достаточно ​

  • Одно фото с alt и подписью, без repeater
  • Быстрее Галереи для одного кадра
  • Partial изображения как в остальных секциях пакета

Типичные места ​

  • Между абзацами длинной статьи
  • Для скриншота интерфейса в описании продукта
  • Для фото офиса или команды без сетки

Примеры страниц ​

Изображение и alt ​

Поле Изображение обязательно. Alt-текст нужен для SEO и screen reader. Подпись выводится под картинкой.

Похожие секции ​

  • Галерея для нескольких кадров
  • Hero, если картинка фон первого экрана с текстом поверх

Параметры блока ​

ПараметрЗначение
keyimage
СлойFree
Категориямедиа (media)
Chunkpagebuilder_image
Требования—

Поля в редакторе ​

Заполните поля в инспекторе секции на ресурсе. Описание типов полей: справочник типов.

Изображение (image) ​

Тип image. Обязательное.

Alt-текст (alt) ​

Тип text. Необязательное.

Подпись (caption) ​

Тип text. Необязательное.

Что видит посетитель ​

Секция pb-image с partial изображения.

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

Пример JSON после сохранения секции. Для media, video и map значения на выводе могут быть обогащены:

json
{
  "image": {
    "url": "assets/images/example.jpg",
    "id": 12,
    "filename": "example.jpg",
    "extension": "jpg",
    "title": "example.jpg",
    "width": 1920,
    "height": 1080,
    "type": "image"
  },
  "alt": "Описание изображения для скринридеров",
  "caption": "Подпись под изображением"
}

Шаблон chunk ​

Fenom chunk pagebuilder_image:

fenom
<section class="pb-section pb-section--image pb-image{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="image"{if $id} id="pb-{$id|escape}"{/if}>
  <div class="pb-section__inner pb-image__inner">
    <figure class="pb-image__figure">
      {include 'pagebuilder_partial_image' image=$image alt=($alt ?: $caption) class='pb-image__media'}
      {if $caption}
        <figcaption class="pb-image__caption">{$caption|escape}</figcaption>
      {/if}
    </figure>
  </div>
</section>

Связанные страницы ​