Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Customising the CMS /

Multi Column layouts


Go to End
Reply


15 Posts   4799 Views

Avatar
Hat-Rack

Community Member, 12 Posts

21 January 2009 at 5:05am

Hi,

I'm new to SilverStripe, I've skinned my site and it took 10 mins so i'm very happy with it so far and eager to get into it.

I'm now getting down to the nitty gritty of adding multiple columns (two three four and five column layouts) and to make those columns straightforward for users to change in the CMS.

I'd like to know what the best practice would be to implement this. Ideally I'd have a list and use css to float right to position the items. How can I create this and then make it easy to modify each columns content in the CMS? I've been searching around the forums and haven't found a clear cut way to do this.

Can anyone point me in the right direction?

Thanks!

Avatar
UncleCheese

Forum Moderator, 4094 Posts

21 January 2009 at 5:42am

Just add some custom fields.

static $db = array (
'ColumnOne' => 'HTMLText',
'ColumnTwo' => 'HTMLText'
etc...

)

$fields->addFieldToTab("Root.Content.ColumnOne", new HTMLEditorField('ColumnOne','Column One Content'));

etc...

Avatar
Carbon Crayon

Community Member, 598 Posts

21 January 2009 at 6:09am

Hi hat-rack

It really is as easy as unclecheese suggests, just create your page as you normally would and add $ColumnOne in the place you want the CMS edited content for Column one to go and add the fields to the CMS as in the example above. It the great thing about SS that you have pretty much no limit on the way you lay your page out. So if you wanted to float a list your template might look like this:

<ul>
<li> $ColumnOne </li>
<li> $ColumnTwo </li>
<li> $ColumnThree </li>
</ul>

etc

Avatar
Hat-Rack

Community Member, 12 Posts

21 January 2009 at 9:54am

And it works brilliantly. Thanks guys.

Avatar
BuddhaSource

Community Member, 57 Posts

22 January 2009 at 7:52pm

I have similar problem and trying to figure out some g8 solutions.

I have build a theme with two layouts Home and Page in Layout folder. The Page layout have one side column which would have some content based on the main content on the left which is editable using standard cms settings.

For the side column I tried adding following code in Page.SS inside layout folder

static $db = array (
'ColumnOne' => 'HTMLText',
)

$ColumnOne

$fields->addFieldToTab("Root.Content.ColumnOne", new HTMLEditorField('ColumnOne','Column One Content'));

Well I knw I m not doing somthing right here, may be cause I just discovered SS this weekend.

Avatar
Hamish

Community Member, 712 Posts

22 January 2009 at 8:34pm

Your code needs to go in the php code, not the template (ss) file.

so add this to Page.php (ie, where all the logic and processing happens):

static $db = array (
'ColumnOne' => 'HTMLText',
)

function getCMSFields() {
$fields = parent::getCMSFields():
$fields->addFieldToTab("Root.Content.ColumnOne", new HTMLEditorField('ColumnOne','Column One Content'));
return $fields
}

And add this to Page.SS (ie, where the output occurs)

$ColumnOne

Avatar
jfusco

Community Member, 52 Posts

23 January 2009 at 5:12pm

Can I apply this to dynamically generated content? I'm not trying to have a multi-column template/layout. What I'm trying to do is get a long list of items to display across multiple columns within the page framework.

I essentially copied the sitemap files from tutorial 6 and modified them so that they display a list of all article pages in the site (see http://www.unclebubby.com/wavs2/master-list). When I am done creating the structure of the site, I will have close to if not in excess of 200 articles and it may get bigger. Rather than just spitting out a long list that people have to scroll through for two days before reaching the end, I would like the output to be in columns.

Bonus gratitude points if you can also tell me how to alphebetize the list.

Thanks,
Joe

Avatar
BuddhaSource

Community Member, 57 Posts

23 January 2009 at 6:52pm

Thanks Hamish,

I m more of a designer than coder so pardon me :( .. Well I tried you suggestion debuged the code but still I m not getting any HTMLTexEditor field in page edit. Please note my page type is Page.

Here is what I did step by step

1. Open mysite/code/Page.css

2. Added following code

class Page extends SiteTree {
   static $db = array(
   'SideBarContent' => 'HTMLText'
   );
   static $has_one = array(
);

}

function getCMSFields() {
$fields = parent::getCMSFields();
$fields->addFieldToTab('Root.Content.Main', new HTMLEditorField('SideBarContent'), 'Content');
return $fields;
}

3. Flushed using ?flush=1
4. In my Page.SS added $SideBarContent
4. Refresh my admin page and go to page editior and I see no new field or tab.

Really appriciate your help.

Sid

Go to Top