PageBuilder
Визуальный конструктор секций для MODX 3: черновик и публикация без перезаписи content ресурса
Изображение
Один кадр на всю ширину колонки контента. Подходит для иллюстрации, скриншота или баннера без кнопки.
Когда одного кадра достаточно
- Одно фото с alt и подписью, без repeater
- Быстрее Галереи для одного кадра
- Partial изображения как в остальных секциях пакета
Типичные места
- Между абзацами длинной статьи
- Для скриншота интерфейса в описании продукта
- Для фото офиса или команды без сетки
Примеры страниц
- Статья: Текст → Изображение → Текст
- Кейс: Hero → Изображение → Цифры
Изображение и alt
Поле Изображение обязательно. Alt-текст нужен для SEO и screen reader. Подпись выводится под картинкой.
Похожие секции
Параметры блока
| Параметр | Значение |
|---|---|
| key | image |
| Слой | Free |
| Категория | медиа (media) |
| Chunk | pagebuilder_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>JSON-определение
core/components/pagebuilder/sections/image.json