Create a Static, CMS editable sidebar

What it Does

It's a static sidebar that will hold a couple of links, an image and some HTML text. Your's can hold anything you like and is easily adaptable to a 'Common Links', 'favourite Images' or 'User Notice' blocks.

Requirements

2.2 +

Attached Files

Complete.zip(3 KB)

Preperation

We need to create 2 new files for this tutorial, one for the php (Model & Controller) called StaticSidebar.php and another for the template (View) called StaticSidebar.ss.

You can leave StaticSidebar.ss blank for now, but inside StaticSidebar.php add the following:

mysite/StaticSidebar.php
<?php class StaticSidebar extends Page { } class StaticSidebar_Controller extends Page_Controller { }

Part 1: Setting up the model

Our static sidebar is going to have an external link (TextField), and internal link (SitetreeDropdownField) and an Image as well as using the pages default Content (HTMLEditorField) for its HTML text. So lets add our database model to the class.
class StaticSidebar extends Page { static $db = array( 'ExternalLink' => 'Text' ); static $has_one= array( "Image" => "Image", "InternalLink" => "SiteTree" ); }

Now lets add the CMS fields so that we can edit the sidebar:
class StaticSidebar extends Page { public function getCMSFields() { $fields = parent::getCMSFields(); $fields->addFieldToTab("Root.Content.Main", new TextField("ExternalLink")); $fields->addFieldToTab("Root.Content.Main", new TreeDropdownField("InternalLinkID", "InternalLink", "SiteTree")); $fields->addFieldToTab("Root.Content.Main", new ImageField("Image")); return $fields; } }

Note. Even though our has_one relationship was called “InternalLink" we call the TreeDropdown “InternalLinkID” as this is the column in the StaticSidebar table that it needs to save it's contents into. This is a slight inconsistency with Silverstripe, as we don't need to call our ImageField 'ImageID' even though it is the same principle.

The last thing to do is to add a line which stops the user creating children under our sidebar and also setting the default for 'ShowInMenus' to be false so that our sidebar page doesnt show up as an actual page on our site.
class StaticSidebar extends Page { . . . static $allowed_children = array("none"); }

Now run yoursite.com/dev/build (in 2.2X run yoursite.com/db/build?flush=1). You will see the new fields being added and you can now log into the

Part II: Creating the Template

We are going to intergrate our sidebar into the default blackcandy theme, but it should be an almost indentical process to add it to your theme, just apply your own structure to it. You could also just as easily make it part of the footer, header or any other part of the page you fancy as we havnt actually defined anything that says where the information stored in the model needs to be on the page. Silverstripe gives up total freedom.

For our tempalte we can just copy and adapt the existing Sidebar template found in themes/blackcandy/templates/Includes/Sidebar.ss. minus the outermost div (id="Sidebar"). So copy and paste that into our StaticSidebar.ss file we created earlier and make it look like this:

themes/blackcandy/templates/Includes/StaticSidebar.ss
<% if GetStaticSidebar %> <% control GetStaticSidebar %> <div id="Sidebar" class="typography"> <div class="sidebarBox"> <h3>Static Sidebar</h3> <ul > <li><a href="$ExternalLink" title="Go to ExternalLink">External Link</a></li> <li><a href="$InternalLink.Link" title="Go to InternalLink">$InternalLink.MenuTitle</a></li> <li>$Image.SetWidth(180)</li> <li>$Content</li> </ul> <div class="clear"></div> </div> <div class="sidebarBottom"></div> </div> <% end_control %> <% end_if %>

So first up you will notice that we are calling a function 'GetStaticSidebar'. We havnt created this function yet, we do that in the next part, but all it does is return our StaticSidebar page so that we can use the data held in. So we first check if our StaticSidebar exists and if it does we enter a control context for it, allowing us to use all the variables first hand (i.e. $Image instead of $GetStaticSidebar.Image).

Then we remove the outermost div so that we dont't get 2 #sidebars and then just use the unordered list (<ul>) and enter each item as a list item (<li>). We use $InternalLink.Link because $InternalLink on it's own returns the actual page that we are linking to where as we want the link to that page in the same way as we use $Link in our menus. We use the same method to get the pages title, $InternalLink.MenuTitle. We also set the image to be 80px wide by calling $Image.SetWidth(80).

part III: Adding it to our Page

Finally we just need add the sidebar to our page template and create the function that will return our StaticSidebar for use in all our pages. Because we want to use it accross the whole site, it makes sense to put this function in the Page_Controller so that all our pages that extend Page will have access to this function. In the case of the blackcandy theme we need to add our sidebar underneath the existing menu(2) sidebar. To do this we will include our template in the Sidebar.ss file which is in turn included in our Layout/Page.ss template. We then need to make some slight alterations to the <% if %> block which surrounds the Sidebar include as we now want to draw the sidebar even if there is no level 2 menu to display.

So first lets add the function to our Page.php file:

mysite/Page.php
<?php class Page extends SiteTree { . . . } class Page_Controller extends ContentController { . . . public function GetStaticSidebar(){ return DataObject::get_one("StaticSidebar"); } }

All this function does is grabs the first StaticSidebar it can find and returns it. This is all we need as there will only be one of these sidebars in the site. If you need to have more then one, you will need to create a function which can filter the result based on a parameter that you define. So for example calling <% GetStaticSidebar(right) %> might use a function that has the database call DataObject::get("StaticSidebar", "Type = $Side"), where $Side is the variable passed into the function (in this case "right").

Finally we need to include our StaticSidebar.ss tempalte in the Sidebar.ss template and then make some slight alterations to the Layout/Page.ss template to ensure the Sidebar.ss is always included. So open up Includes/Sidebar.ss and make the following changes:

themes/blackcandy/templates/Includes/Sidebar.ss
<div id="Sidebar" class="typography"> <% if menu(2) %> <!-- add an if statment here --> <div class="sidebarBox"> . . . <div class="sidebarBottom"></div> <% end_if %> <!--end the if statement --> <% include StaticSidebar %> <!-- include our StaticSidebar --> </div>

Now we just need to remove the if statment from our Layout/Page.ss:

themes/blackcandy/templates/Layout/Page.ss
<div class="typography"> <!-- Remove If statement here --> <% include SideBar %> <div id="Content"> <!-- ------ --> . . .

 
Remember you will need to add the <% include  Sidebar %> to all your new Layout files if you want any sidebar on those pages.

About the Author