1. AdvSearch
      1. AdvSearch.AdvSearch
        1. AdvSearch.AdvSearch.tpl
        2. AdvSearch.Advsearch.paging1Tpl
        3. AdvSearch.AdvSearch.paging0Tpl
        4. AdvSearch.AdvSearch.containerTpl
        5. Advsearch.AdvSearch.extractTpl
      2. AdvSearch.AdvSearchHelp
        1. AdvSearch.AdvSearchHelp.helplinkTpl
      3. AdvSearch.AdvSearchForm
        1. Advsearch.AdvSearchForm.tpl
    2. cookieJar
    3. getYoutube
    4. aliasid
    5. AddHeaderfiles
    6. AjaxUpload
    7. amazonSES mailing list
    8. Analytics
    9. Archivist
      1. Archivist.Archivist
        1. Archivist.Archivist.tpl
      2. Archivist.ArchivistGrouper
      3. Archivist.getArchives
        1. Archivist.getArchives.tpl
    10. Articles
      1. Articles.Theming Articles
      2. Articles.Roadmap
      3. Articles.Retrieving Articles Outside of Articles
      4. Articles.Creating a Blog
    11. Babel
      1. Babel.BabelLinks
      2. Babel.BabelTranslation
    12. BannerX
    13. BannerY
    14. Batcher
      1. Batcher.Roadmap
    15. bdListings
      1. bdListings.bdCategories
      2. bdListings.bdHookNewListing
      3. bdListings.bdListings
      4. bdListings.bdPriceGroups
      5. bdListings.bdRedirect
      6. bdListings.bdTargets
    16. boilerX
      1. bx-head-open
      2. bx-head-append
      3. bx-head-close
      4. bx-container-open
      5. bx-container-close
      6. bx-bottom-open
      7. bx-bottom-close
    17. BreadCrumb
      1. BreadCrumb.containerTpl
      2. BreadCrumb.currentCrumbTpl
      3. BreadCrumb.linkCrumbTpl
      4. BreadCrumb.maxCrumbTpl
      5. BreadCrumb.categoryCrumbTpl
      6. BreadCrumb.homeCrumbTpl
    18. Breadcrumbs
    19. BxrExtra
    20. cachebuster
    21. CamperManagement
      1. CamperManagement.Customizing the Component
      2. CamperManagement.Developing the front-end
        1. CamperManagement.cmCamperDetails Snippet
        2. CamperManagement.cmCampers Snippet
        3. CamperManagement.Placeholders you can use
      3. CamperManagement.Managing your vehicle
      4. CamperManagement.Module home
    22. Church Events Calendar
      1. ChurchEvents.MODX Manager functions
      2. ChurchEventsCalendar Snippet
        1. ChurchEvents.Managing events
      3. ChurchEventsList Snippet
      4. ChurchEventsRss Snippet
    23. Cliche
    24. ClientConfig
    25. CMPGenerator
      1. CMPGenerator.5 minute example
      2. CMPGenerator.Foreign Databases
    26. Collections
    27. ContextRouter
    28. CookieList
    29. CronManager
    30. cssSweet
      1. cssSweet.lighten
      2. cssSweet.modval
      3. cssSweet.prefix
    31. CustomUrls
    32. Databackup
    33. Discuss
      1. Discuss.ChunkMap
      2. Discuss.Contributing
      3. Discuss.Controllers
        1. Discuss.Controllers.board
          1. Discuss.Controllers.board.xml
        2. Discuss.Controllers.home
        3. Discuss.Controllers.login
        4. Discuss.Controllers.logout
        5. Discuss.Controllers.profile
        6. Discuss.Controllers.register
        7. Discuss.Controllers.search
        8. Discuss.Controllers.thread
      4. Discuss.Creating a Discuss Theme
      5. Discuss.Database Model
      6. Discuss.Features
      7. Discuss.Getting Started
      8. Discuss.Installation
        1. Discuss.Installation from Git
      9. Discuss.Roadmap
      10. Configuring Sphinx for Search
    34. DitsNews
    35. Eletters
      1. Eletters.API
      2. Eletters.FormIt
      3. Eletters.Import CSV
      4. Eletters.Templates
    36. EventManager
      1. EventManager.emListEvents
      2. EventManager.emNewReservationHook
    37. eventsCalendar2
      1. eventsCalendar2.eventsCalendar2
      2. eventsCalendar2.Generating events
      3. eventsCalendar2.tplCalendar2
      4. eventsCalendar2.tplCell2
      5. eventsCalendar2.tplEvent2
      6. eventsCalendar2.tplHead2
    38. EventsX
      1. EventsX.Examples
    39. ExerPlan
    40. fastField
    41. FileDownload R
      1. FileDownload R.FileDownload
      2. FileDownload R.FileDownloadLink
      3. FileDownload R.Plugins
    42. FileLister
      1. FileLister.FileLister
        1. FileLister.FileLister.directoryTpl
        2. FileLister.FileLister.fileLinkTpl
        3. FileLister.FileLister.fileTpl
        4. FileLister.FileLister.pathTpl
      2. FileLister.Roadmap
    43. FirstChildRedirect
    44. Flexibility
    45. ForcedPasswdChange
    46. FormIt
      1. FormIt.FormItCountryOptions
      2. FormIt.FormItRetriever
      3. FormIt.FormItStateOptions
      4. FormIt.Hooks
        1. FormIt.Hooks.email
        2. FormIt.Hooks.FormItAutoResponder
        3. FormIt.Hooks.math
        4. FormIt.Hooks.recaptcha
        5. FormIt.Hooks.redirect
        6. FormIt.Hooks.spam
      5. FormIt.Roadmap
      6. FormIt.Tutorials and Examples
        1. FormIt.Examples.Custom Hook
        2. FormIt.Examples.Simple Contact Page
        3. FormIt.Handling Selects, Checkboxes and Radios
        4. FormIt.Using a Blank NoSpam Field
      7. FormIt.Validators
    47. FormIt2db
    48. FormitFastPack
      1. FormitFastPack.Tutorial
      2. FormitFastPack.fieldSetDefaults
      3. FormitFastPack.field
      4. FormitFastPack.fiGenerateReport
    49. FormSave
    50. FoundationX
      1. FoundationX.How to Use FoundationX
    51. FX2themebase
      1. FX2.How to Use FX2
        1. FX2.For Theme Authors
      2. FX2.Included Extras
    52. Gallery
      1. Gallery.Example1
      2. Gallery.Gallery
        1. Gallery.Gallery.containerTpl
        2. Gallery.Gallery.thumbTpl
      3. Gallery.GalleryAlbums
        1. Gallery.GalleryAlbums.rowTpl
        2. Gallery.GalleryAlbums.containerTpl
      4. Gallery.GalleryItem
        1. Gallery.GalleryItem.albumTpl
        2. Gallery.GalleryItem.GalleryItemPagination
        3. Gallery.GalleryItem.tagTpl
        4. Gallery.GalleryItem.tpl
      5. Gallery.Plugins
        1. Gallery.Plugins.Galleriffic
        2. Gallery.Plugins.Slimbox
      6. Gallery.Roadmap
      7. Gallery.Setting Up the GalleryItem TV
      8. Gallery.Setting Up Your Gallery
    53. GatewayManager
    54. gCal
    55. getDate
    56. getFeed
      1. getFeed.Adding a Twitter Feed
    57. getPage
    58. getRelated
    59. getResourceField
    60. getResources
      1. getResources.Examples
        1. getResources.Building a RSS feed
        2. getResources.Category Index Page with Thumbnails
        3. getResources.Google XML Sitemap
    61. getUrlParam
    62. getRTImages
    63. getVimeo
    64. GoogleSiteMap
      1. GoogleSiteMap.GoogleSiteMap
        1. GoogleSiteMap.GoogleSiteMap.containerTpl
        2. GoogleSiteMap.GoogleSiteMap.itemTpl
      2. GoogleSiteMap.Roadmap
    65. GridClassKey
    66. HandyMan
      1. HandyMan.Frequently Asked Questions
      2. HandyMan.Installation
      3. HandyMan.Roadmap
    67. Hits
    68. HitsPage
    69. HybridAuth
      1. HybridAuth.Integrating Facebook
      2. HybridAuth.Integrating Google
      3. HybridAuth.Integrating Twitter
      4. HybridAuth.Integrating VK.com
    70. If
    71. Image+
    72. imageHERE
    73. ImageStyles
    74. ImportX
    75. LexRating
    76. Lingua
    77. Login
      1. Login.ChangePassword
      2. Login.ConfirmRegister
      3. Login.ForgotPassword
      4. Login.Login
      5. Login.Profile
      6. Login.Register
        1. Register.Example Form 1
      7. Login.ResetPassword
      8. Login.Roadmap
      9. Login.Tutorials
        1. Login.Basic Setup
        2. Login.Extended User Profiles
        3. Login.Request Membership
        4. Login.User Profiles
        5. Login.Using Custom Fields
        6. Login.Using Pre and Post Hooks
      10. Login.UpdateProfile
    78. Loginza
      1. Loginza.Loginza
      2. tpl.Loginza.login
      3. tpl.Loginza.logout
      4. tpl.Loginza.profile
    79. mChimpX
    80. MetaX
    81. mhPayPal
      1. mhPayPal.Snippet Usage
        1. mhPayPal.Snippet Usage.Hooks
        2. mhPayPal.Snippet Usage.Templating
    82. MIGX
      1. MIGX.Backend-Usage
      2. MIGX.Data-Entry
      3. MIGX.Frontend-Usage
      4. MIGX.Tutorials
        1. MIGX.Fancybox-images with seperate placeholders in Richtext-Content
        2. MIGX.Simple opening hours table
        3. Using resource-specific mediasource and multifile-uploader with MIGX
        4. MIGX.Varying layout-boxes
          1. MIGX.Varying layout-boxes.Configurator-Version
        5. Creating Selectable and Sortable lists for MIGX
        6. MIGX.sortable resourcelist
        7. Using resource-specific mediasource and multifile-uploader with MIGX
        8. MIGX.Using Grid Inline Editing
    83. MIGXdb
      1. MIGXdb.Configuration
      2. MIGXdb.Tutorials
        1. MIGXdb.Create a basic gallery-management from scratch with MIGXdb
        2. MIGXdb.Create doodles manager with help of MIGXdb
        3. MIGXdb.Manage Child-Resources in a grid-TV with help of MIGXdb
        4. MIGXdb.Manage Events-Resources in a CMP with help of MIGXdb
      3. MigxCalendars
    84. MinifyX
    85. miniShop
      1. miniShop.Screenshots
    86. modActiveDirectory
    87. ModDef
    88. modExtra
    89. modMobile
    90. modSwiftMailer
    91. mxCalendar
      1. mxCalendar.Examples
      2. mxCalendar.Placeholders
    92. mxExtendedMenu
    93. mxFormBuilder
      1. mxFormBuilder.Create Form
      2. mxFormBuilder.Hooks
      3. mxFormBuilder.Field Types
      4. mxFormBuilder.Create Form List in TV
      5. mxFormBuilder.Fields
    94. mxHasTvs
    95. MoneyBird
      1. MoneyBird.Contacts
      2. MoneyBird.Invoices
      3. MoneyBird.NrFormat
    96. ObfuscateEmail-Revo
    97. PackMan
      1. PackMan.Roadmap
    98. PageBreaker
      1. PageBreaker.PageBreaker
      2. tpl.PageBreaker.ajax
      3. tpl.PageBreaker.navigation
    99. Peoples
      1. Peoples.PeopleGroup
        1. Peoples.PeopleGroup.userTpl
      2. Peoples.PeopleGroups
        1. Peoples.PeopleGroups.tpl
      3. Peoples.Peoples
        1. Peoples.Peoples.tpl
      4. Peoples.Roadmap
    100. PHP Tidy (plugin)
    101. phpThumbOf
    102. Polls
      1. Polls.Polls
      2. Polls.PollsLatest
      3. Polls.PollsPrevious
      4. Polls.PollsResult
    103. POI Manager
    104. QuickCrumbs
      1. QuickCrumbs.Example
    105. Quip
      1. Quip.Quip
        1. Quip.Quip.tplComment
        2. Quip.Quip.tplCommentOptions
        3. Quip.Quip.tplComments
        4. Quip.Quip.tplReport
      2. Quip.QuipCount
      3. Quip.QuipLatestComments
      4. Quip.QuipReply
        1. Quip.QuipReply.tplAddComment
        2. Quip.QuipReply.tplLoginToComment
        3. Quip.QuipReply.tplPreview
      5. Quip.QuipRss
      6. Quip.Roadmap
      7. Quip.Upgrading
        1. Quip.Upgrading to 1.0.1
    106. Rampart
      1. Rampart.hook.RampartFormIt
      2. Rampart.hook.RampartQuip
      3. Rampart.preHook.RampartRegister
    107. Redirector
    108. renderResources
    109. ResourceWatcher
    110. RezImgCrop
    111. Rowboat
      1. Rowboat.Rowboat
    112. sekFancyBox
      1. sekFancyBox & Gallery
    113. sekFormTools
      1. sekFormTools.input.autocomplete
      2. sekFormTools.input.combobox
      3. sekFormTools.input.datepicker
      4. sekFormTools.input.helper
      5. sekFormTools.input.textfield
      6. sekFormTools Advanced Examples
    114. sekSiteTools
      1. sekSiteTools.easytabs
      2. sekSiteTools.google.analytics
      3. sekSiteTools.printdiv
    115. sekUserGalleries
      1. sekUserGalleries.album.items.helper
      2. sekUserGalleries.album.items.manage
      3. sekUserGalleries.album.manage
      4. sekUserGalleries.album.view
      5. sekUserGalleries.browse.galleries
      6. sekUserGalleries.directory
      7. sekUserGalleries.image.information
      8. sekUserGalleries.search
      9. sekUserGalleries.users.gallery.manage
      10. sekUserGalleries.users.gallery.view
    116. selfLink
    117. Shopkeeper
    118. siblingNav
    119. SimpleSearch
      1. SimpleSearch.Roadmap
      2. SimpleSearch.SimpleSearch
        1. SimpleSearch.Faceted Search Through PostHooks
        2. SimpleSearch.SimpleSearch.containerTpl
        3. SimpleSearch.SimpleSearch.currentPageTpl
        4. SimpleSearch.SimpleSearch.pageTpl
        5. SimpleSearch.SimpleSearch.tpl
      3. SimpleSearch.SimpleSearchForm
        1. SimpleSearch.SimpleSearchForm.tpl
      4. SimpleSearch.Solr
    120. SiteEditor
    121. sitemapFriend
    122. Slideshow Manager
      1. jgSlideshow Snippet
      2. Slideshow Manager CMP
    123. sLink
    124. SmartOptimizer
    125. SmartTag
    126. StatCache
    127. SocialLogin
    128. SocialSuite
      1. SocialSuite.getFacebookPhotos
      2. SocialSuite.getFacebookProfile
      3. SocialSuite.getFacebookShares
      4. SocialSuite.getGooglePlusShares
      5. SocialSuite.getTwitterProfile
      6. SocialSuite.prettyNumbers
    129. spieFeed
    130. StaticSaver
    131. StoreLocator
    132. SubscribeMe
      1. SubscribeMe.Configuring API Credentials, IPN and going Live
      2. SubscribeMe.Setting up the Payment Flow
        1. SubscribeMe - Listing the Products
        2. SubscribeMe - Setting up the Payment Methods
        3. SubscribeMe - Subscription Confirmation Page
      3. SubscribeMe.User Account Management
    133. SyntaxChecker
    134. Tagger
    135. TaggingAtoZ
    136. tagLister
      1. tagLister.getResourcesTag
      2. tagLister.tagLister
        1. tagLister.tagLister.all
        2. tagLister.tagLister.tpl
      3. tagLister.tolinks
        1. tagLister.tolinks.tpl
    137. TinyMCE
      1. TinyMCE.Spellchecker
      2. TinyMCE.Table controls
      3. TinyMCE.Template
    138. Upload to Users CMP
    139. VersionX
      1. VersionX.Roadmap
    140. virtuNewsletter
    141. VisionCart
      1. VisionCart.Back-end
        1. VisionCart.Category management
        2. VisionCart.Module management
        3. VisionCart.Option management
        4. VisionCart.Order management
        5. VisionCart.Product management
        6. VisionCart.Shop management
      2. VisionCart.Front-end
        1. VisionCart.vcGetCategories
          1. VisionCart.vcGetCategories.tpl
        2. VisionCart.vcGetProducts
          1. VisionCart.vcGetProducts.tpl
        3. VisionCart.vcWayfinder
      3. VisionCart.General
        1. VisionCart.Templating
        2. VisionCart.UserManagement
      4. VisionCart.vcGetProductImages
      5. VisionCart.vcGetProductOptions
    142. Wayfinder
      1. Wayfinder Introductory Examples
    143. xFPC

MIGX.Varying layout-boxes

Last edited by Christian Hanvey on Aug 22, 2013.
This is a user-contributed Extra. If you find issues or would like more info or help, please contact the author.

Create varying layout-boxes with MIGX

This Tutorial will show you step by step how to setup MIGX for adding and editing variying layout-Boxes.

This example was created during this discussion.

The Request was how to create a System in MODX where the editor can add multiple Boxes with varying layouts, in this case boxes with one, two, or three Columns. Each Column with an image, a headline and content.

Requirements

First off, you'll want to go ahead and download and install some Extras that we'll be using for this Setup. The following is a list of used Extras:

  • MIGX - For creating and fill the boxes in MODX-backend and for listing them on the frontend. ADDON/TinyMCE
  • TinyMCE - Richtext-Editor to edit the content-texts.
  • phpThumbOf - For resizing the images to fit in our columns.

The Template

For this Tutorial we want to create a new Template. We name it 'MultiColumn'

<!DOCTYPE html>
<html>
    <head>
        <title>[[++site_name]] - [[*pagetitle]]</title>
        <base href="[[++site_url]]" />
        <style>
            /* reset */
            html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
            /* text */
            body{font:13px/1.5 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif}a:focus{outline:1px dotted}hr{border:0 #ccc solid;border-top-width:1px;clear:both;height:0}h1{font-size:25px}h2{font-size:23px}h3{font-size:21px}h4{font-size:19px}h5{font-size:17px}h6{font-size:15px}ol{list-style:decimal}ul{list-style:disc}li{margin-left:30px}p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:20px}
            /* fixed: cols 12, rows 4, box_w 80, box_h 80, margin_w 10, margin_h 10, w 960, h 320 */
            .container,.container_12{margin-left:auto;margin-right:auto;width:960px;}.grid_h_1,.grid_h_2,.grid_h_3,.grid_h_4,.grid_h_5,.grid_h_6,.grid_h_7,.grid_h_8,.grid_h_9,.grid_h_10,.grid_h_11,.grid_h_12{position:relative;display:inline;float:left;margin-left:10px;margin-right:10px;}.grid_v_1,.grid_v_2,.grid_v_3,.grid_v_4{position:relative;display:inline;float:left;margin-top:10px;margin-bottom:10px;}.alpha_h{margin-left:0;}.omega_h{margin-right:0;}.alpha_v{margin-top:0;}.omega_v{margin-bottom:0;}.grid_h_1{width:60px;}.grid_h_2{width:140px;}.grid_h_3{width:220px;}.grid_h_4{width:300px;}.grid_h_5{width:380px;}.grid_h_6{width:460px;}.grid_h_7{width:540px;}.grid_h_8{width:620px;}.grid_h_9{width:700px;}.grid_h_10{width:780px;}.grid_h_11{width:860px;}.grid_h_12{width:940px;}.grid_v_1{min-height:60px;}.grid_v_2{min-height:140px;}.grid_v_3{min-height:220px;}.grid_v_4{min-height:300px;}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0;}* html .clearfix,*:first-child+html .clearfix{zoom:1;}.middle_1{line-height:60px;}.middle_2{line-height:140px;}.middle_3{line-height:220px;}.middle_4{line-height:300px;}
            /*  */
            .box {background:#ccc}
        </style>
    </head>
    <body>
        <div class="container clearfix">
            [[!getImageList? &tpl=`@FIELD:MIGX_formname`&tvname=`MultiColumn`]]
            <div class="grid_h_12 grid_v_1">[[*content]]</div>
            <div class="grid_h_12 grid_v_1 middle_1">[^q^] queries, querytime [^qt^], phptime [^p^], totaltime [^t^], source [^s^]</div>
        </div>
    </body>
</html>

The Preview-Page

Now we create a Preview-Page. With this page created we can see a Preview of our boxes in the backend without the need to save our Resource.

Create a new Folder in your Resource-Tree, which is hidden from menue, you can name it: 'MIGX-previews'.

Create a new Resource under this Folder and choose the MultiColumn-Template. You can name it 'MultiColumn Preview'

The MIGX-Tv

Now we are ready to create our MIGX-TV. Create a new TV.

General Information

Name

MultiColumn

Input Options

Input-type

migx

Form Tabs
[{
    "formname":"OneCell"
    ,"formtabs": [{
        "caption":"Row Format"
        ,"fields": [{
            "field":"fake"
            ,"inputTVtype":"hidden"
        },{
            "field":"cell_2_image"
            ,"caption":"Image"
            ,"inputTVtype":"hidden"
        },{
            "field":"cell_2_headline"
            ,"caption":"Headline"
            ,"inputTVtype":"hidden"
        },{
            "field":"cell_2_content"
            ,"caption":"Content"
            ,"inputTVtype":"hidden"
        },{
            "field":"cell_3_image"
            ,"caption":"Image"
            ,"inputTVtype":"hidden"
        },{
            "field":"cell_3_headline"
            ,"caption":"Headline"
            ,"inputTVtype":"hidden"
        },{
            "field":"cell_3_content"
            ,"caption":"Content"
            ,"inputTVtype":"hidden"
        }]
    },{
        "caption":"First"
        ,"fields": [{
            "field":"cell_1_image"
            ,"caption":"Image"
            ,"inputTVtype":"image"
        },{
            "field":"cell_1_headline"
            ,"caption":"Headline"
        },{
            "field":"cell_1_content"
            ,"caption":"Content"
            ,"inputTVtype":"richtext"
        }]
    }]
},{
    "formname":"TwoCells"
    ,"formtabs":[{
        "caption":"Row Format"
        ,"fields": [{
            "field":"fake"
            ,"inputTVtype":"hidden"
        },{            "field":"cell_3_image"
            ,"caption":"Image"
            ,"inputTVtype":"hidden"
        },{
            "field":"cell_3_headline"
            ,"caption":"Headline"
            ,"inputTVtype":"hidden"
        },{
            "field":"cell_3_content"
            ,"caption":"Content"
            ,"inputTVtype":"hidden"
        }]
    },{
        "caption":"First"
        ,"fields":[{
            "field":"cell_1_image"
            ,"caption":"Image"
            ,"inputTVtype":"image"
        },{
            "field":"cell_1_headline"
            ,"caption":"Headline"
        },{
            "field":"cell_1_content"
            ,"caption":"Content"
            ,"inputTVtype":"richtext"
        }]
    },{
        "caption":"Second"
        ,"fields":[{
            "field":"cell_2_image"
            ,"caption":"Image"
            ,"inputTVtype":"image"
        },{
            "field":"cell_2_headline"
            ,"caption":"Headline"
        },{
            "field":"cell_2_content"
            ,"caption":"Content"
            ,"inputTVtype":"richtext"
        }]
    }]
},{
    "formname":"ThreeCells"
    ,"formtabs":[{
        "caption":"Row Format"
        ,"fields": [{
            "field":"fake"
            ,"inputTVtype":"hidden"
        }]
    },{
        "caption":"First"
        ,"fields": [{
            "field":"cell_1_image"
            ,"caption":"Image"
            ,"inputTVtype":"image"
        },{
            "field":"cell_1_headline"
            ,"caption":"Headline"
        },{
            "field":"cell_1_content"
            ,"caption":"Content"
            ,"inputTVtype":"richtext"
        }]
    },{
        "caption":"Second"
        ,"fields":[{
            "field":"cell_2_image"
            ,"caption":"Image"
            ,"inputTVtype":"image"
        },{
            "field":"cell_2_headline"
            ,"caption":"Headline"
        },{
            "field":"cell_2_content"
            ,"caption":"Content"
            ,"inputTVtype":"richtext"
        }]
    },{
        "caption":"Third"
        ,"fields":[{
            "field":"cell_3_image"
            ,"caption":"Image"
            ,"inputTVtype":"image"
        },{
            "field":"cell_3_headline"
            ,"caption":"Headline"
        },{
            "field":"cell_3_content"
            ,"caption":"Content"
            ,"inputTVtype":"richtext"
        }]
    }]
}]
Grid Columns
[{
    "header": "Row Format"
    ,"width": "30"
    ,"sortable": "true"
    ,"dataIndex": "MIGX_formname"
},{
    "header": "First"
    ,"width": "160"
    ,"sortable": "false"
    ,"dataIndex": "cell_1_image"
    ,"renderer": "this.renderImage"
},{
    "header": "Second"
    ,"width": "160"
    ,"sortable": "false"
    ,"dataIndex": "cell_2_image"
    ,"renderer": "this.renderImage"
},{
    "header": "Third"
    ,"width": "160"
    ,"sortable": "false"
    ,"dataIndex": "cell_3_image"
    ,"renderer": "this.renderImage"
}]
Preview Url

Add here the complete Url of your created Preview-Resource.

Template Access

our MultiColumns - Template

The Chunks

Our last step is to create three chunks for our layout-boxes.

OneCell

Name

OneCell

Chunk Code
<div class="box grid_h_12 grid_v_4">
    <div class="grid_h_12 alpha_h omega_h grid_v_1 alpha_v"><img src="[[+cell_1_image:phpthumbof=`w=900&h=250&zc=1`]]"/></div>
    <div class="grid_h_12 alpha_h omega_h grid_v_1"><h2>[[+cell_1_headline]]</h2></div>
    <div class="grid_h_12 alpha_h omega_h grid_v_2 omega_v">[[+cell_1_content]]</div>
</div>
<div class="clear"></div>

TwoCells

Name

TwoCells

Chunk Code
<div class="box grid_h_6 grid_v_4">
    <div class="grid_h_6 alpha_h omega_h grid_v_1 alpha_v"><img src="[[+cell_1_image:phpthumbof=`w=460&h=320&zc=1`]]"/></div>
    <div class="grid_h_6 alpha_h omega_h grid_v_1"><h2>[[+cell_1_headline]]</h2></div>
    <div class="grid_h_6 alpha_h omega_h grid_v_2 omega_v">[[+cell_1_content]]</div>
</div>
<div class="box grid_h_6 grid_v_4">
    <div class="grid_h_6 alpha_h omega_h grid_v_1 alpha_v"><img src="[[+cell_2_image:phpthumbof=`w=460&h=320&zc=1`]]"/></div>
    <div class="grid_h_6 alpha_h omega_h grid_v_1"><h2>[[+cell_2_headline]]</h2></div>
    <div class="grid_h_6 alpha_h omega_h grid_v_2 omega_v">[[+cell_2_content]]</div>
</div>
<div class="clear"></div>

ThreeCells

Name

ThreeCells

Chunk Code
<div class="box grid_h_4 grid_v_4">
    <div class="grid_h_4 alpha_h omega_h grid_v_1 alpha_v"><img src="[[+cell_1_image:phpthumbof=`w=300&h=250&zc=1`]]"/></div>
    <div class="grid_h_4 alpha_h omega_h grid_v_1"><h2>[[+cell_1_headline]]</h2></div>
    <div class="grid_h_4 alpha_h omega_h grid_v_2 omega_v">[[+cell_1_content]]</div>
</div>
<div class="box grid_h_4 grid_v_4">
    <div class="grid_h_4 alpha_h omega_h grid_v_1 alpha_v"><img src="[[+cell_2_image:phpthumbof=`w=300&h=250&zc=1`]]"/></div>
    <div class="grid_h_4 alpha_h omega_h grid_v_1"><h2>[[+cell_2_headline]]</h2></div>
    <div class="grid_h_4 alpha_h omega_h grid_v_2 omega_v">[[+cell_2_content]]</div>
</div>
    <div class="box grid_h_4 grid_v_4">
    <div class="grid_h_4 alpha_h omega_h grid_v_1 alpha_v"><img src="[[+cell_3_image:phpthumbof=`w=300&h=250&zc=1`]]"/></div>
    <div class="grid_h_4 alpha_h omega_h grid_v_1"><h2>[[+cell_3_headline]]</h2></div>
    <div class="grid_h_4 alpha_h omega_h grid_v_2 omega_v">[[+cell_3_content]]</div>
</div>
<div class="clear"></div>

Create Pages with varying layout-boxes

Now we are ready to create resources with varying layout-boxes.

Create new Resource. Choose the MultiColumn - Template. Go to the tab 'Template Variables'.

In your MultiColumns-TV, click 'Add Item' and choose one of the layouts. Fill the fields on the tabs 'First','Second','Third'.

For Preview click the 'Preview' - Button.

If you want to change the position of boxes, you can drag/drop the items directly in the grid.
Don't forget to save your Resource, when you are ready with adding/editing layout-boxes with MIGX

Suggest an edit to this page on GitHub (Requires GitHub account. Opens a new window/tab).