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

Image ​

One frame across the content column. Use for an illustration, screenshot, or banner without a button.

Image

When one frame is enough ​

  • Single photo with alt and caption, no repeater
  • Faster than Gallery for one frame
  • Same image partial as other package sections

Typical placement ​

  • Between paragraphs in a long article
  • UI screenshot in product copy
  • Office or team photo without a grid

Page examples ​

Image and alt ​

Image is required. Alt text helps SEO and screen readers. Caption renders below the image.

Similar sections ​

  • Gallery for multiple frames
  • Hero when the image is a background with overlay text

Block parameters ​

ParameterValue
keyimage
LayerFree
Categorymedia (media)
Chunkpagebuilder_image
Requires—

Inspector fields ​

Fill these fields in the section inspector. Field types are documented in the field types reference.

Image (image) ​

Type image. Required.

Alt text (alt) ​

Type text. Optional.

Caption (caption) ​

Type text. Optional.

Site output ​

pb-image with the image partial.

Section data ​

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

json
{
  "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_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>

See also ​