Hello All,

I'm new to SilverStripe and am trying to configure the CMS to render several different page layouts.
I've gone through all of the online tutorials but haven't been able to locate any simple (step-by-step) direction on what I'm trying to do.

I've built a design based on the Simple theme.

What I want to do is add content areas to a new page type (layout) that will have areas that can be populated/edited within the CMS.

The pages would have the left sidebar showing as they will all have "children" navigation.
I want to have the Main content area fill the full (remaining) width of the page and then add 2 or 3 "Feature areas" (that can be populated and edited within the CMS) below that content and have them lined up side-by-side.

I have created a quick image (attached) to show what I'm attempting. Basically I need some detailed input on how to create this as a page type (layout).

Thank you in advance to anyone/everyone that is willing to take the time to help me. Your advice and expertise is greatly appreciated.

I'm running version 3.0.5.

Ok to do this you will need a couple of things

1) You need to create the fields that can be edited in the CMS
2) You need to update your .ss template files
3) you will need some CSS to style the columns correctly

------------------------------------------------------------------------------------------

1) For further info check this out
a) http://doc.silverstripe.org/framework/en/tutorials/2-extending-a-basic-site
b) http://doc.silverstripe.org/framework/en/topics/data-types ----------- for more information on data types
c) http://doc.silverstripe.org/framework/en/reference/form-field-types ---------------more info on field types

a) Go to mysite/code and find the page.php file
b) Create the feature 1, feature 2 and feature 3 fields like this:

class Page extends SiteTree {

public static $db = array(
'feature1'=>'HTMLText',
'feature2'=>'HTMLText',
'feature3'=>'HTMLText'
);

d)This creates the databse fields....now we need to get it into the CMS to do this we add the following below the code we have above:

// Adds feature1,2,3 fields to CMS
function getCMSFields() {
$fields = parent::getCMSFields(); ///load in existing CMS fields
$fields->addFieldsToTab( /// Adds new fields
'Root.Content', new TextField('Feature1', 'Feature 1's info goes here'),
'Root.Content', new TextField('Feature2', 'Feature 2's info goes here'),
Root.Content', new TextField('Feature3', 'Feature 3's info goes here')
);
return $fields;

e) Run dev build...and the database would have been updated and the CMS will now have 3 new HTML text fields added to it

2) Go to themes/yourtheme/templates/layout/page.ss and insert the following 3 place holders in the document

$feature1
$feature2
$feature3

Run dev build...what you will notice is that if you type something into the feature 1 field in the cms and you save and publish, that that text will apear in your template whereever the placeholder $feature1 is located...the same goes for $feature2 and $feature3.

3) Style the feature blocks in the layout.css file located in your themes css folder

That should give you the results you are looking for

Optic Blaze,

Thanks so much for the quick and detail response. I think I understand this a lot better now.

Here are a couple of other questions (if you don't mind) as well as a testing of my new-found understanding:

1) I am going to use these in a specific page type so I believe I would put the 1st part of the code in the .php file that has the same name as that page type. In this case LandingPage. So class LandingPage.php extends page and is placed inside the code folder with my other page-specific php files. I would then insert the $feature1 $feature2 and $feature3 into the themes/mytheme/templates/layout/LandingPage.ss file. Correct?

2) I'm wondering if I could create a block of html code that has the $feature content placeholders and save it in the themes/mytheme/templates/includes folder and then use <% include FeatureBlocks %> to bring it into the LandingPage.ss file in the layout folder. If I did, would the content in the $features block be dynamic - i.e. editable in the CMS and different (if need be) on different pages that use the LandingPage page type?

3) Lastly, is there a simple trick to getting the feature blocks to line up side-by-side and be evenly spaced (like shown in the image I created)? I suppose I could always go old-school and place them inside a table with a single <tr> and 3 <td> cells.

Again, a very big THANK YOU for your help!

1) Yes you are right. You will create in the mysite/code folder a file called LandingPage.php and create the class LandingPage which will extend the Page class. Then you will do as you said create the LandingPage.ss file in the layout folder

2) Yes you can make use of a include. So in the include folder you will have a .ss template file called FeatureBlock.ss and in your LandingPage.ss file you will include the FeatureBlock.ss file by calling <% include FeatureBlock %> code. It will be dynamic. So where ever you call $feature1, $feature2 or $feature3 in the FeatureBlock.ss file, the content that you have created in the CMS will appear.

3) Remember that the simple theme makes use of responsive design. I dont think using a table will work. Making use of divs will be better. You will have to play around with some of the properties but generally speaking you would do something like this. In the FeatureBlock page you will create 3 divs

<div id="feature"> $feature1 </div>
<div id="feature" class="fRight"> $feature3 </div>
<div id="feature" class="fRight"> $feature2 </div>

Then in your css file you could do something like this

#feature {display:block; width:30%}
.fRight {float:right; margin-left:5%;}

I have not tested this, but generally speaking you want to float the middle and the right divs and set all the divs to a %width so that they re-adjust to different screen sizes. To be truly responsive i would imagine you would need to create break points (you will have to research that further) that instructs the browser to re-arrange the divs underneath one another if the screen size becomes less than 400px for example.

Optic Blaze,

I created a new ProductPage.php file and placed it in the code folder.
I also created a new ProductPage.ss file that I placed in themes/mytheme/templates/Layout/
Lastly, I did some styling in the layout.css file.

After I moved all the files into place I ran dev/build.
My pages still render in my browser. However, I cannot get to the CMS desktop. If I go in and delete the ProductPage.php file I can see the CMS again.

Here's the code of my ProductPage.php file:

<?php
class ProductPage extends Page {
static $db = array(
'ProdDesc'=>'HTMLText',
'MediaBox'=>'HTMLText',
'KeyFeatures'=>'HTMLText',
'QuickLinks'=>'HTMLText',
'GetStarted'=>'HTMLText'
);

public function getCMSFields() {
$fields = parent::getCMSFields();

$fields->addFieldToTab("Root.Content", new TextField('ProdDesc','Product Description Goes Here')
$fields->addFieldToTab("Root.Content", new TextField('MediaBox','Media Goes Here')
$fields->addFieldToTab("Root.Content", new TextField('KeyFeatures','Key Features Goes Here')
$fields->addFieldToTab("Root.Content", new TextField('QuickLinks','Quick Links Go Here')
$fields->addFieldToTab("Root.Content", new TextField('GetStarted','Getting Started Info Goes Here')

return $fields;
}
}

class ProductPage_Controller extends Page_Controller {
}

And here's the code for my ProductPage.ss file that's inside the Layout folder:

<% include SideBar %>
<div class="content-container unit size3of4 lastUnit">
<article>
<h1>$Title</h1>
<div class="content">
<div id="ProdDesc">$ProdDesc</div>
<div id="MediaBox" class="fRight">$MediaBox</div>
<div id="KeyFeatures">$KeyFeatures</div>
<div id="QuickLinks" class="fRight">$QuickLinks</div>
<div id="GetStarted">$GetStarted</div>
</div>
</article>

</div>

I created the different divs in my layout.css file for styling.

I'm hoping you will see an obvious mistake that is alluding me.

Again, Thanks so much for all of your help!

Sometimes a picture is better then a long explanation. The attached is what I'm trying to accomplish.

UPDATE

I changed the code in my ProductPage.php file to this:

<?php
class ProductPage extends Page {
static $db = array(
'ProdDesc'=>'HTMLText',
'MediaBox'=>'HTMLText',
'KeyFeatures'=>'HTMLText',
'QuickLinks'=>'HTMLText',
'GetStarted'=>'HTMLText'
);

public function getCMSFields() {
$fields = parent::getCMSFields();

$fields->addFieldsToTab(
"Root.Content", new TextField('ProdDesc','Product Description Goes Here'),
"Root.Content", new TextField('MediaBox','Media Goes Here'),
"Root.Content", new TextField('KeyFeatures','Key Features Goes Here'),
"Root.Content", new TextField('QuickLinks','Quick Links Go Here'),
"Root.Content", new TextField('GetStarted','Getting Started Info Goes Here')
);

return $fields;
}
}

class ProductPage_Controller extends Page_Controller {
}

Now I can see the CMS.

However, I don't see anyway to edit my newly created fields in the CMS.
And, I'm fighting to get the different divs to layout on the page the way I want.

I gave the divs different background-color attributes so I can see them in the browser.

Hi there,

I had a look at my previous syntax...i made a couple of mistakes...this is what it should look like

<?php
class ProductPage extends Page {

static $db = array(
'ProdDesc'=>'HTMLText',
'MediaBox'=>'HTMLText',
'KeyFeatures'=>'HTMLText',
'QuickLinks'=>'HTMLText',
'GetStarted'=>'HTMLText'
);

public function getCMSFields() {
$fields = parent::getCMSFields();
$fields->addFieldToTab('Root.Main',new TextareaField('ProdDesc','Product Description Goes Here'));
$fields->addFieldToTab('Root.Main',new HTMLEditorField('MainImage', 'MediaBox','Media Goes Here'));
$fields->addFieldToTab('Root.Main',new HTMLEditorField('QuickLinks','Quick Links Go Here'));
$fields->addFieldToTab('Root.Main',new HTMLEditorField('GetStarted','Getting Started Info Goes Here'));
return $fields;
}

}

---------------------------

1) You will notice that the addFieldToTab sytax has changed a bit...also notice how the CMS changes if you change from a TextareaField to a HTMLEditorField
2) The .ss file you did looks correct

Hope this helps

One Quick Question:

If I want to embed a YouTube video inside the MediaBox do I need to make it something other than an HTMLEditorField when adding the field tab and HTMLText in the $db = array code?

Thanks!