How to create sensibly designed webpages like you're playing tetris

We've noticed a trend where customers are asking for webpages with richly-styled content areas that they can move around. We see this mostly for marketing-purposed content, homepages, and other flashy landing/entry points to websites where presentation is precious and nuanced. Our preferred CMS, SilverStripe, usually works on the premise of a single, formatted template with defined content areas, so a richly-styled content area to move around is a new paradigm for SilverStripe to accommodate.

We've tried a few different solutions but have now settled on the Blocks module by shedawson. It is a great foundation for our devs to create custom blocks of functionality, handling complex processing such as form submissions, and backend relationships like upload fields. Inside the CMS, the blocks module is managed using gridfields, which is a bit primitive, so we couple the module with Block_Enhancements by micschk.

This solution does require some fiddling to get it up and running. A configuration (YAML) file lists the specific site themes that blocks should interact with and which settings apply to that theme. I found that the file didn't identify the theme correctly so I had to include & repeat settings for multiple themes. The solution only comes with one block, a simple content block, so it's up to your friendly neighbourhood devs to create more. And the backend expects pretty thumbnails of the blocks, so nudge a designer for some appropriate gifs.

Noteable features include:

  • Reorder the blocks using drag n drop. Ordering is done with a familiar Gridfield interface.
  • Blocks are grouped into their regions, and include a handy region that doesn't get published.
  • Inline editing of block content, for faster edits and less reloading.
  • Reuse blocks anywhere you want.
  • Restrict access to blocks using standard CMS viewer settings.

Backend/developer happiness includes:

  • Blocks are discrete DataObjects, so they include standard CMS form/functionality.
  • Blocks include their own Controller class, so form submission processing is possible, and Requirements can be injected as, uh, required.

Some other features are:

  • "BlockSets" where a group of blocks can be bundled together and applied to pages. In practice we found it wasn't useful, it kind of defeated the purpose of the module to lock predefined content into a set structure... it would have been a better feature if it defined a set of allowed block types instead.
  • "Preview Area" buttons which render the page with a red border outlining the block areas. Could be useful if we defined many areas but typically we only needed one, and responsive layouts resulted in inaccurate bordering. We found it was confusing customers; fortunately the button can be disabled/hidden.

So if you're out there making SilverStripe sites and you wish you could move bits of content around a page ad-hoc, then give these modules a go.

Comments (0)

No one has commented on this page yet.