Jump to content
Jonathan Lahijani

ProcessWire + RepeaterMatrix + CSS Grid Page Builder Concept

Recommended Posts

If you're looking to do an elaborate a page builder with ProcessWire and don't want to pull your hair out, I highly recommended viewing this video:

A couple notes:

  • with the css grid specification, you can assign multiple blocks to the same grid-area but they will overlap each other.  I've "overcome" this by combining multiple blocks into a parent div and assigning that instead. pretty easy to do.
  • i didn't demonstrate it, if your blocks have a grid structure within them (like built with flexbox), you can still assign that block to a grid-area.  so if your blocks themselves have a grid structure, that's ok.  for example, if your css grid layout is 6 columns, but you have a block that has a grid inside of it (built with like uikit's grid that's 5 columns), you can assign that block to the grid-area.
  • with the css grid specification, the flow of the blocks does not have to match the flow of the grid-areas.  this is insanely powerful.


  • Like 29
  • Thanks 1

Share this post

Link to post
Share on other sites

The grid-template-areas field might want to sport a monospace font for better alignment of those single letter area names :)

  • Like 3

Share this post

Link to post
Share on other sites

Really, really nice!

What do you think of packing this into a fieldtype? Would be nice to have all the logic, files and fields packed into a module and to only have to add your field in the template editor :)

I'm also working on a site with matrix content builder and using field rendering makes the code very clean:

My matrix field is called "content" and all my items are included via WireRenderfile(). Then it's as easy as placing a file with the markup in /templates/matrix (here 2columnlayout.php).



  • Like 6

Share this post

Link to post
Share on other sites

First of all, this is amazing! It makes what I was trying to do look like a pile of trash.  Just wondering, if you don't mind divulging a bit of information, just how did you accomplish the "demo grid" ?

Share this post

Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By aComAdi
      Have been working with ProcessWire for a few months now, successfully implementing several sites. I am compiling data management into modules for our clients. Several sites are using those modules now. The modules are using RockMigrations to install fileds, templates and pages.
      Today, I installed a new site. And now I am tripping over an issue that I cannot explain. Content on pages is organized in 'rows'. The users can add row by using RepeaterMatrix...then completing the fields to add data to the row. One particular content row has image fields. When I upload the images to the fields, all works as expected. The images appear in the RepeaterMatrix and I do find the images in assets/files/xxxx. But the images are not displayed in the front-end (see attachment). As you can see in the attachment, the various text and textarea fields in the RepeaterMatrix item are displayed correctly.
      I have done the following:
      Compare field settings to the existing implementations: they are identical Compare the RepeateMatrix settings and permissions to existing implementations: they are identical Change field name. No change. Delete field and created manually (including once with different name). No change. If I dump the element with Tracey, I get the following output:
      If Max Number = 1 null If Max Number = 0 count => 0
      page => "/processwire/repeaters/for-field-136/for-page-1/1574873590-62-1/" (60)
      field => "wk_inhalt_start_links_bild" (26)
      url => "/serverpath/site/assets/files/1046/" (30)
      path => "/serverpath/serverpath/serverpath/serverpath/site/assets/files/1046/" (56)
      items => array () I would venture that there is an issue regarding images on the shared server...but another content element on the site works just fine with images.
      Bit stumped right now. Especially considering that I made the same installation earlier today on a different server successfully. I would appreciate any ideas on where to investigate this issue.

    • By David Karich
      ProcessWire InputfieldRepeaterMatrixDuplicate
      Thanks to the great ProModule "RepeaterMatrix" I have the possibility to create complex repeater items. With it I have created a quite powerful page builder. Many different content modules, with many more possible design options. The RepeaterMatrix module supports the cloning of items, but only within the same page. Now I often have the case that very design-intensive pages and items are created. If you want to use a content module on a different page (e.g. in the same design), you have to rebuild each item manually every time.
      This module extends the commercial ProModule "RepeaterMatrix" by the function to duplicate repeater items from one page to another page. The condition is that the target field is the same matrix field from which the item is duplicated. This module is currently understood as proof of concept. There are a few limitations that need to be considered. The intention of the module is that this functionality is integrated into the core of RepeaterMatrix and does not require an extra module.
      Check out the screencast
      What the module can do
      Duplicate a repeater item from one page to another No matter how complex the item is Full support for file and image fields Multilingual support Support of Min and Max settings Live synchronization of clipboard between multiple browser tabs. Copy an item and simply switch the browser tab to the target page and you will immediately see the past button Support of multiple RepeaterMatrix fields on one page Configurable which roles and fields are excluded Duplicated items are automatically pasted to the end of the target field and set to hidden status so that changes are not directly published Automatic clipboard update when other items are picked Automatically removes old clipboard data if it is not pasted within 6 hours Delete clipboard itself by clicking the selected item again Benefit: unbelievably fast workflow and content replication What the module can't do
      Before an item can be duplicated in its current version, the source page must be saved. This means that if you make changes to an item and copy this, the old saved state will be duplicated Dynamic loading is currently not possible. Means no AJAX. When pasting, the target page is saved completely No support for nested repeater items. Currently only first level items can be duplicated. Means a repeater field in a repeater field cannot be duplicated. Workaround: simply duplicate the parent item Dynamic reloading and adding of repeater items cannot be registered. Several interfaces and events from the core are missing. The initialization occurs only once after the page load event Changelog
      Bug fix: Various bug fixes and improvements in live synchronization Bug fix: Items are no longer inserted when the normal save button is clicked. Only when the past button is explicitly clicked Feature: Support of multiple repeater fields in one page Feature: Support of repeater Min/Max settings Feature: Configurable roles and fields Enhancement: Improved clipboard management Enhancement: Documentation improvement Enhancement: Corrected few typos #1 1.0.3
      Feature: Live synchronization Enhancement: Load the module only in the backend Enhancement: Documentation improvement 1.0.2
      Bug fix: Various bug fixes and improvements in JS functions Enhancement: Documentation improvement Enhancement: Corrected few typos 1.0.1
      Bug fix: Various bug fixes and improvements in the duplication process 1.0.0
      Initial release Support this module
      If this module is useful for you, I am very thankful for your small donation: Donate 5,- Euro (via PayPal – or an amount of your choice. Thank you!)
      Download this module
      > Github: https://github.com/FlipZoomMedia/InputfieldRepeaterMatrixDuplicate
      > PW module directory: https://modules.processwire.com/modules/inputfield-repeater-matrix-duplicate/
    • By taylorn
      Hey all, I'm brand new to processwire and have already fallen in love with it. Currently I'm building my first website with it and I need a way to style the form builder generated forms with CSS. I know it's possible to style them with the jQuery UI themeroller, but I need more direct control. I've looked through all the CSS files I thought could be related with the form, but I can't find how to add my custom styles via CSS. (I can't access the markup directly to do a hackathon because the forms are embedded via iframe.)
      Thanks in advance,
  • Create New...