Welcome to SSbits! Here you will find tutorials, code snippets and other web related goodies all geared towards the fantastic SilverStripe CMS. Our aim is to help people get up to speed with the great features of SilverStripe even quicker than we did and hopefully provide some inspiration along the way!

Snippet: Hide pages in Sitetree that a user can't edit

Submitted by Howard Grigg

Very short snippet here - sometimes you want to hide pages in the Sitetree that members logged into the CMS don't have permission to edit. This is really simple in because they already have a css style applied to them you can just hide that class. You need to include this snippet in your typography.css file so that it is included in the CMS.ul.tree li.disabled { display: none; }

Snippet: Using a Thickbox Modal Window with AJAX

Submitted by Dalesaurus

Thickbox is a great javascript plugin to jQuery that you can use to create modal windows within SilverStripe pages.  You can de-clutter your interfaces and re-use small snippets of common functions when you add in AJAX.  Before we begin there is a little homework:

• Read the AJAX Basics Recipe on the Doc Wiki
• Be aware that significant javascript changes are coming in 2.4 and this example is current as of 2.3.3
  
• Its a good idea to use some kind of naming convention with your methods and template so you don't get them confused.  I typically prepend them with lower case ajax.

For this example we will be creating a simple Clock that will be returning the time through a custom template in a Thickbox.  This is not very complex but it does illustrate the possibilities with modals and AJAX calls.

Tutorial: Adding a CMS action the (slightly) hacky way

If like me you cannot figure out how on earth to use the updateCMSActions() function in a decorator and you also can't get the getCMSActions() function to find your custom method inside the controller then here is a way to make it work, which although certainly not the 'correct' way to do it, still does not require any editing of the core files and is not particularly messy.

Snippet: Spice up your CMS Sitetree!

Submitted by Martijn van Nieuwenhoven

So you have created your own page types, but they all look the same in your CMS site tree. Time to make them more recognizable!
This is quite easy, but it can make your site tree a lot more attractive.

First grab some icons, buy them or create you own custom aesthetic icon set. They only thing you have to keep in mind, is that your icons need to be saved as youriconname-file.gif.

Next create a folder in mysite, like /images/icons, to store your icons.

To assign a icon to your page class, add the a static $icon var to your page class like:

class MyCustomPage extends Page { static $icon = 'mysite/images/icons/mycustomicon'; }

Snippet: How to access your admin account when you've forgotten the password

Submitted by Dalesaurus

I managed to forget my admin password and found quite a few ways to unlock an SS install.  I originally thought about poking around the database and changing the hashes myself.  After reviewing the Security and password encryption code, I would recommend against doing that.  SilverStripe uses salted SHA1 encryption which is no fun to try and create yourself.  Also you'd have to update multiple tables to get the password changed.

Luckily the SS Core team has included multiple features for accomplishing this.  The options below assume you have access to your webserver to use some PHP code.

Option 1 - Set a Default Admin Login

From: http://doc.silverstripe.com/doku.php?id=security#system_configuration

Add the following to your _config.php:
Security::setDefaultAdmin('adminuser', 'password');

Snippet: Create a front end theme switcher

Submitted by Martijn van Nieuwenhoven

So you wanna make a demo site for your customers to show all your template skills in one site. A simple theme switcher can come in handy. It's quite easy to implement this.

First add two new functions to your Page_Controller :
Page_Controller : function themeSwitcher(){ $folders = scandir(Director::baseFolder()."/themes"); $exclude = array(".", "..", ".DS_Store", "_notes"); $themes = array_diff($folders, $exclude); $selected = Session::get('theme'); $fields = new FieldSet( $fields = new DropdownField('theme','theme', $themes, $selected, '', 'Select Theme') ); $actions = new FieldSet( new FormAction('switchTheme', 'Switch') ); return new Form($this, "switchTheme", $fields, $actions); } function switchTheme($data){ if($data['theme']){ Session::set('theme', $data['theme']); } else { unset($_SESSION['theme']); } Director::redirect(Director::baseURL(). $this->URLSegment); }

The first function themeSwitcher() will scan the themes folder for themes and create a dropdown menu with all templates. The exclude array and array_diff will exclude the dots and Apple DS_Store files and Dreamweaver _notes folders. You could use this array to add themes you want to exclude in the switch.

The Session::get('theme')

Snippet: Clearing the Search field on click with jQuery

As with everything, it's attention to detail that makes great sites. One thing that really bugs me is when a site has a search box with the word 'search' inside it but which does not clear it self when clicked, meaning I have to clear it before I can search.Given it can be achieved with a few lines of jQuery , it's a real surprise how many sites fail to implement this, or that still use the 'onclick' inline javascript. For an example of this in action, simply click the search box to your right.

To implement this on a SilverStripe site, create a file called jquery.clear.search.js and place it in your mysite/javascript directory. Then in your Page.php innit() function (in the controller class) add the following line:
Requirements::javascript("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"); Requirements::javascript("mysite/javascript/jquery.clear.search.js"); 

This will include our file in the page as well as the latest jQuery compacted library, which is kindly hosted for us by google, meaning there is a good change that the user may have it cached already. So now lets actually add somejQuery to the file jquery.clear.search.js:

Snippet: Autofill MetaDescription and MetaKeywords on page save

Submitted by Martijn van Nieuwenhoven

Most of my customers don't want to add meta info manually, so I add an onBeforeWrite function to update the Meta Description field and count the keyword density of the content with a separate function and add these keywords to the Meta Keywords fields when a page is saved.

In my humble SEO opinion every page needs an unique Meta Description. Keywords seems to be less important for search engines, but why not add them automatically anyway! The function counts how many times each word exist in the Content, order the words by occurrence and glues the words to a comma separated string. In this function only words with more then 4 characters are counted, but you can adjust that if you like.

Snippet: Customising the WYSYWIG editor in v2.3.2 (TinyMCE)

The  default install of SilverStripe contains an array of buttons for the TinyMCE HTML editor. However usually your client will need some extra functionality or you may want to keep things simple for them by removing some of the buttons. As of SilverStripe 2.3.2 this is very easy and can be achieved by adding some code to the _config.php file.

Note. if you are using a version <2.3.2 you must edit the file cms/javascript/tinymce.template.js.

To find out all the wonderful buttons that are available by default in the TinyMCE 3 install visit the example page here and click the 'view source tab'. There are also tons of plugins available to do all sorts of things.

Adding Buttons

So lets say for example you wanted to add font color settings to the editor. All you need to do is add this line to your class or _config.php file:
HtmlEditorConfig::get('cms')->insertButtonsAfter('formatselect', 'forecolor');

Snippet: Manipulating every Nth item in a <% control %> loop

Often you will want to manipulate every nth item inside a <% control %> loop. For example say you had a gallery and you wanted every 3rd image to start on a new line, you need to be able to test each item from the template to see if it is divisible by 3 and should therefore have the clear CSS class added to it.

Using iteratorPos % we can very easily achieve this. First we need to add the test function to the object we will be iterating through, so for example if you are iterating through a number of ImageItem DataObjects, we would add this function to our ImageItem class:
public function IsThird(){ return ($this->iteratorPos % 3) == 0; }

The % operator calculates the modulous or Remainder after dividing by the number that follows it (in this case 3). If there is a remainder then we know that the item is not divisible by 3 and so should not be cleared, but if the modulous is equal to 0 then we know it is divisible by 3 and should therefore clear a new line.