MODX MIGX Setup for Complex Content Management

MIGX Configuration for Complex Content Management in MODX

MIGX (Multi-Items Grid for MODX) is an Extra for creating repeatable field groups within a single TV parameter. Analogous to Paragraphs in Drupal or repeaters in ACF/WordPress. Editor can add as many blocks of arbitrary structure: slides, advantages, steps, galleries, price lists.

Installation

Package Manager → find migx → install. Additionally: MIGX installs a component in manager and adds field type for TV.

Creating MIGX Configuration

Components → MIGX → Configurations → Create.

Example: "Slider" configuration (slider):

{
  "formtabs": [
    {
      "caption": "Slide",
      "fields": [
        {
          "field": "image",
          "caption": "Image",
          "inputTV": "migx_image",
          "inputTVtype": "image"
        },
        {
          "field": "title",
          "caption": "Title",
          "inputTVtype": "text"
        },
        {
          "field": "subtitle",
          "caption": "Subtitle",
          "inputTVtype": "textarea"
        },
        {
          "field": "link",
          "caption": "Button Link",
          "inputTVtype": "url"
        },
        {
          "field": "btn_text",
          "caption": "Button Text",
          "inputTVtype": "text",
          "default": "Learn More"
        }
      ]
    }
  ],
  "columns": [
    {"header": "Image", "dataIndex": "image", "renderer": "this.renderImage", "width": 80},
    {"header": "Title", "dataIndex": "title"}
  ],
  "actionbuttons": "add,edit,remove,moveup,movedown",
  "window_title": "Slide"
}

Binding to TV

Elements → Template Variables → Create:

• Input Type: migxdb or migx
• MIGX Configuration: slider
• Name: hero_slider

Output via migxLoopCollection Snippet

[[migxLoopCollection?
    &classname=`migxresourcecrops`
    &MIGX_outputSeparator=``
    &tpl=`@INLINE
    <div class="slide swiper-slide" style="background-image:url([[+image]])">
        <div class="slide__content">
            [[+title:notempty=`<h2 class="slide__title">[[+title]]</h2>`]]
            [[+subtitle:notempty=`<p class="slide__sub">[[+subtitle]]</p>`]]
            [[+link:notempty=`<a href="[[+link]]" class="btn">[[+btn_text:default=`Learn More`]]</a>`]]
        </div>
    </div>
    `
    &tv=`hero_slider`
    &docid=`[[*id]]`
]]

Output via pdoTools + getImageList

[[!pdoField?
    &docid=`[[*id]]`
    &tv=`hero_slider`
    &tpl=`sliderItem`
    &outputSeparator=``
]]

Or via native MIGX getImageList snippet:

[[!getImageList?
    &tvname=`hero_slider`
    &docid=`[[*id]]`
    &tpl=`sliderItem`
    &toPlaceholder=`slides`
]]
[[+slides]]

Complex MIGX with Nested Data

MIGX supports JSON within JSON — implementing complex structures:

// "Services with Icons" configuration
{
  "formtabs": [{
    "fields": [
      {"field": "icon", "caption": "SVG Icon", "inputTVtype": "textarea"},
      {"field": "title", "caption": "Title", "inputTVtype": "text"},
      {"field": "description", "caption": "Description", "inputTVtype": "textarea"},
      {"field": "features", "caption": "Features (separated by ;;)", "inputTVtype": "textarea"}
    ]
  }]
}

[[getImageList?
    &tvname=`services_list`
    &docid=`[[*id]]`
    &tpl=`@INLINE
    <div class="service-card">
        <div class="service-card__icon">[[+icon]]</div>
        <h3>[[+title]]</h3>
        <p>[[+description]]</p>
        [[+features:notempty=`
        <ul>
            [[+features:explode=`;;`:each=`<li>[[+v]]</li>`]]
        </ul>
        `]]
    </div>
    `
]]

Timeline

Creating and configuring MIGX configuration for 3–5 types of repeatable blocks (slider, advantages, pricing) — 1–2 days.