docs.modx.pro

Русский

English

Русский

English

Тема

PageBuilder
Визуальный конструктор секций для MODX 3: черновик и публикация без перезаписи content ресурса
Dependencies
  1. Компоненты
  2. PageBuilder
  3. Каталог секций
  4. Pro
  5. Команда

Команда ​

Блок команды: фото, имя, роль и короткий текст «о себе». Несколько человек выводятся сеткой.

Информация

Требуется PageBuilder Pro.

Команда vs отзывы ​

  • Фото и роль сотрудника в предсказуемой карточке
  • Repeater: новый человек без правки шаблона
  • Отделение от Отзывов (клиент vs команда)

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

  • На странице «О нас»
  • На лендинге агентства: лица проекта
  • На странице конференции: спикеры

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

Repeater участников ​

Repeater Участники. Фото через поле Фото. Биография это обычный textarea или richtext в зависимости от JSON секции.

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

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

ПараметрЗначение
keyteam
СлойPro
Категориядоверие (social)
Chunkpagebuilderpro_team
Требованияpro

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

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

Заголовок (title) ​

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

Участники (items) ​

Тип repeater. Обязательное. Повторяющиеся строки. Кнопка «Добавить» в инспекторе.

В каждой строке:

ПолеТипПодписьОбязательно
photoimageФотонет
nametextИмяда
roletextДолжностьнет
biotextareaО себенет

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

Сетка pb-team с фото и текстом.

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

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

json
{
  "title": "Заголовок секции",
  "items": [
    {
      "_rowId": "00000000-0000-4000-8000-000000000001",
      "photo": {
        "url": "assets/images/example.jpg",
        "id": 12,
        "filename": "example.jpg",
        "extension": "jpg",
        "title": "example.jpg",
        "width": 1920,
        "height": 1080,
        "type": "image"
      },
      "name": "Иван Петров",
      "role": "Директор, ООО Пример",
      "bio": "15 лет в отрасли, ведёт ключевые проекты компании."
    }
  ]
}

Шаблон chunk ​

Fenom chunk pagebuilderpro_team:

fenom
<section class="pb-section pb-section--team pb-team{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="team"{if $id} id="pb-{$id|escape}"{/if}>
  <div class="pb-section__inner pb-team__inner">
    {if $title}
      <h2 class="pb-heading pb-team__title">{$title|escape}</h2>
    {/if}
    <div class="pb-team__grid">
      {foreach $items as $item}
        <article class="pb-team__item">
          {if $item.photo}
            {include 'pagebuilder_partial_image' image=$item.photo alt=$item.name class='pb-team__photo'}
          {/if}
          <h3 class="pb-team__name">{$item.name|escape}</h3>
          {if $item.role}
            <div class="pb-team__role">{$item.role|escape}</div>
          {/if}
          {if $item.bio}
            <p class="pb-team__bio">{$item.bio|escape}</p>
          {/if}
        </article>
      {/foreach}
    </div>
  </div>
</section>

JSON-определение ​

PageBuilderPro/core/components/pagebuilderpro/sections/team.json

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