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.
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:
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.
Now lets add the CMS fields so that we can edit the sidebar:
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.
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:
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:
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:
Now we just need to remove the if statment from our Layout/Page.ss:
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
Name: Aram Balakjian
Aram is a web designer/developer running London based agency aab web. He has a strong passion for developing attractive, usable sites around the SilverStripe CMS.