Home

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

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:

themes/blackcandy/templates/Includes/StaticSidebar.ss

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

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

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

themes/blackcandy/templates/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

Website: http://www.aabweb.co.uk

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.

Comments (2)

  • Hi Pali

    You can just return a string from a function in your controller, for example GetLink(){
    return '<a href="' . $this->Link . '">A Link</a>";
    }
    Be aware however that this breaks the MVC pattern as you are now putting presentation in your controller.

    Aram

    Posted by Aram, 13/05/2009 4:03am (5 years ago)

  • hi Aram,

    nice work, this is type of tuts which are ery essential for beginers in SS.

    I would like to know how to customize the data before sending to the template.

    For example: if link (external or internal) filled in and image uploaded too i would like to get <a href=".."><img ...></a>.

    I know, its possible within theme file like this for example:
    <% if ExternalLink %>

    <p><a href="$ExternalLink" title="$LinkAltTitle">
    <% end_if %>
    <% if InternalLink %>

    <p><a href="$InternalLink.Link" title="$InternalLink.MenuTitle">
    <% end_if %>
    <% if Image %>

    $Image.SetWidth(140)
    <% end_if %>
    <% if LinkTitle %>

    $LinkTitle
    <% end_if %>
    <% if InternalLink %>

    </a></p>
    <% end_if %>
    <% if ExternalLink %>
    </a></p>
    <% end_if %>

    but i think this is a mess, we should control this within controller...

    For example output only $link (external or internal link with some title or image) and $content (text).

    Thanks for info ;)

    Have a great day

    pali

    Posted by Pali, 13/05/2009 2:08am (5 years ago)

RSS feed for comments on this page RSS feed for all comments

Post your comment

Comments have been disabled. Please visit this post on SSBits.com to post your comment