docs.modx.pro
  1. Extras
  2. PageBuilder
  3. Section catalog
  4. Free
  5. Gallery

Gallery ​

Several photos or screenshots in one section. Each image has its own alt text and optional caption. Rendering is in Free. PageBuilder Pro creates a new section of this type (authoring: Pro; runtime in Free).

Gallery

  • Inspector repeater: new row equals new slide on the site
  • Grid markup lives in the chunk, not hand-built columns

Where it fits ​

  • Portfolio of work or projects
  • Product photos: multiple angles without a carousel
  • Case study or report with illustrations

Page examples ​

Slides and alt ​

Add rows in the Slides repeater with an Image each. Fill alt text for accessibility and SEO.

Similar sections ​

Block parameters ​

ParameterValue
keygallery
Layerauthoring: Pro; runtime in Free
Categorymedia (media)
Chunkpagebuilder_gallery
Requires—

Inspector fields ​

Field types: field types reference.

Title (title) ​

Type text. Optional.

Slides (items) ​

Type repeater. Required. Repeatable rows. "Add" button in the inspector.

Each row:

FieldTypeLabelRequired
imageimageImageyes
alttextAlt textno
captiontextCaptionno

Site output ​

pb-gallery grid. Each slide uses pagebuilder_partial_image.

Section data ​

Example payload after save. Media, video, and map values may be enriched on output:

json
{
  "title": "Section title",
  "items": [
    {
      "_rowId": "00000000-0000-4000-8000-000000000001",
      "image": {
        "url": "assets/images/example.jpg",
        "id": 12,
        "filename": "example.jpg",
        "extension": "jpg",
        "title": "example.jpg",
        "width": 1920,
        "height": 1080,
        "type": "image"
      },
      "alt": "Image description for screen readers",
      "caption": "Caption under the image"
    }
  ]
}

Chunk template ​

Fenom chunk pagebuilder_gallery:

fenom
<section class="pb-section pb-section--gallery pb-gallery{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="gallery"{if $id} id="pb-{$id|escape}"{/if}>
  <div class="pb-section__inner pb-gallery__inner">
    {if $title}
      <h2 class="pb-heading pb-gallery__title">{$title|pb_text}</h2>
    {/if}
    <div class="pb-gallery__grid">
      {foreach $items as $item}
        <figure class="pb-gallery__item">
          {include 'pagebuilder_partial_image' image=$item.image alt=($item.alt ?: $item.caption) class='pb-gallery__media'}
          {if $item.caption}
            <figcaption class="pb-gallery__caption">{$item.caption|escape}</figcaption>
          {/if}
        </figure>
      {/foreach}
    </div>
  </div>
</section>

See also ​