CODEWITHSUNDEEP
responsive-designcontent-management-systemsilverstripe
danbroooks
danbroooks

Reputation: 2800

Managing dynamic, responsive content at the backend in Silverstripe

I am currently trying to jazz up a SilverStripe site by making the content more engaging. The site is responsive, but all this means currently is that the navigation bar/header snaps to a more mobile friendly style when it hits the mobile break point.

The long and short of it is, my main page.ss is this: 

<html>
    <head>
        <title>$Title</title>
    </head>
    <body>
        $Header
        $Layout
        $Footer
    </body>
</html>

With $Layout rendering a few variations of a basic page. We have a couple of layouts that aim to give our webmaster pages that are a bit more engaging - for example we have an accordion type page that has many accordion section DataObjects, that present the page as an accordion page with the open/shut javascript functionality.

But this is not enough. I want to give the webmaster more flexibility in the CMS to create interesting pages, without me having to create hundreds of different page types.

I'm thinking of creating a module that gets rid of the main $Content field for all pages, and instead inserts a sort of grid system management field. The webmaster can add rows (one DataObject) and then split those rows into sections (another DataObject). The sections will have a content field managed by TinyMCE, just like a page has. Then on the front end I will map these rows and sections to a responsive grid system.

For variations on the sections, I will add classes (a bit like having different page types) that render slightly differently. The sections will have .ss and .css (and possibly .js) to control their own look and feel.

My question is, how have other people approached this problem? Does my idea sound like overkill? Or does it sound like a good idea for a module?

-

For some examples of what I am trying to achieve, this page is a good example:

http://www.wingsforlife.com/en/research/

Content is split up into various sections, which allows for better control when the page is resized. Also throughout the site, content is varied, sometimes it will be in a single column, other times two, which snaps to one column when the window is smaller.

On the home page, if you scroll down, there are 4 links that are presented inside circles, that contain a number and some text: http://www.wingsforlife.com/en/

This is something I can't see being possible inside TinyMCE (which is fair enough as TinyMCE is just a basic content editor, not a web design tool).

Upvotes: 0

Views: 561

Answers (2)

wilr
wilr

Reputation: 318

Have a look at https://github.com/burnbright/silverstripe-widgetpages for an implementation of using Widgets to compose a webpage. Also https://github.com/g4b0/silverstripe-widget-pages-extension.

Upvotes: 1

schellmax
schellmax

Reputation: 6094

this can easily be achieved by replacing the HTMLEditorField that's linked to the Content field in the database by some GridField, managing DataObjects that make up what you might call 'ContentParts'. we've already used this approach in some projects to allow for more rendering flexibility of content elements.

simply tie some DataObjects to your Page class:

private static $has_many = array(
    'ContentParts' => 'ContentPart'
);

then, use a GridField to manage them in your getCMSFields:

$gridFieldConfig = GridFieldConfig_RecordEditor::create();
$field_ContentParts = new GridField('ContentParts', 'Content Parts', $this->ContentParts(), $gridFieldConfig);

simplest way to render them in your template is as follows:

<% loop ContentParts %>
<section>...</section>
<% end_loop %>

of course you'll want to have different contentparts, so you might want to create subclasses of ContentPart with their custom fields and use the GridFieldAddNewMultiClass component to add them to your GridField (it's part of the GridFieldExtensions module, to be found here: https://github.com/ajshort/silverstripe-gridfieldextensions)

hth

Upvotes: 0

Related Questions