Page Elements to make websites manageable

Its been a while since I started writing a plugin for Silverstripe CMS: “Page Elements“.

I felt myself running into the same problems every time when we build websites, no matter which CMS we chose:

  • Multiple columns and content areas on websites are difficult to manage
  • WYSIWYG editors leave little room anything else other than formatted text and images, such as flash elements, forms etc

So what I wanted was:

  • An interface that is fun to use when dealing with complex layouts
  • No more limitation for layouts
  • Straight forward extendability
  • Re-usability of code and components
  • Seamless integration in existing CMS Interface an Workflow.


These were my key requirements to start with.

So I started putting these Ideas into code during quiet times in the office and sleepless nights.

Even though, as some of you might know, most parts of the Silverstripe back end system are using prototype as native javascript framework, I decided to use jQuery and the jQuery UI to power this interface.

In a nutshell it lets you define areas in the page template (“Slot”) where blocks with certain content & functionality (“Element”) can be inserted and rearranged.

Elements typically have two main interfaces:

  • Input – what the webmaster accesses
  • Output – what is shown on the website

My aim was to optimize both:

Provide the webmaster with a clean and simple, but powerful interface.

Based on rules of accessibility, w3c guidelines etc – generate the html output that is, how it should be: clean.

Check it out! http://www.page-elements.com/

April 15th, 2010 / Tech Talk / tim

Leave a Reply