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!

Tutorial: Adding Fields to Page Comments

Submitted by Dan Rye

This isn't as simple as it should be.  I am also sure that things could be done in a better way, please comment if you have improvements.

Override PageComments

You'll need to override the ContentController->PageComments() function.  This is essentially a copy and paste from sapphire/core/control/ContentController.php and change the reference to PageCommentInterface to PageCommentExtendedInterface, which you will create in the next step.

Tutorial: Using SilverStripe URL Parameters to display DataObjects on a page

Many of you may have come across the SilverStripe URL parameters which take the form $Action/$ID/$OtherID. These are very useful for creating pages that act as templates for a DataObject. Lets say you had a Number of staff that you wanted to enter into the CMS as DataObjects on a StaffPage page type. This would mean that staff members would not have their own page on the site. In an ideal world the StaffPage itself would be able to display a list of all staff member as well as each one individually, based on a name passed as a parameter, for example www.yoursite.com/staff/jonny-cache.

Well in this tutorial we are going to create a system just like this, the only difference is that in order to keep things simple we will be using the staff members ID as the parameter, so the URL would look like this:  www.yoursite.com/staff/15. The reason for doing it this way is that we won't have to worry about creating a URL field for each staff member, making sure it doesn't contain special chars and keeping it unique, which would form a tutorial in it self. By suing the ID we can be sure of all of this without having to do anything! On the downside it doesn't make pretty URLs and it's not SEO friendly for the same reason. Well it is only a tutorial after all!

Snippet: Add attachments to Silverstripe Form submissions

Submitted by Francisco Arenas

Today I was trying to add a CV file to a silverstripe form for a project and noticed that is not that easy as it sounds. Well with the help of Martijn we figured it out:

First the form
function ApplyForm(){ return new Form($this, "ApplyForm", new FieldSet( new TextField('FullName','Full Name'), new EmailField('Email'), new FileField('CV','upload your CV') ), new FieldSet( new FormAction("ApplyAction", "submit your cv") ), new RequiredFields( "FullName" ) ); }

Snippet: Select a theme using a URL parameter

Submitted by Toby Champion

When I develop SilverStripe sites, I usually get functionality working in the default theme blackcandy before getting it working in the final templates. This way, authors can start adding content and seeing how it looks on the page, and I can get early feedback about the functionality. Also, as a developer I get to see real content in the browser early in the process. So does the designer.

I'm sure this process is nothing new - and I realise form-first vs function-first is an old debate - but one thing I wanted to share is some code my team and the client found useful in a recent project.

I added the ability to select a theme based on a parameter in the URL, either for the current page request or for session. This meant we were able to throw around URLs specifying the theme, choosing a theme depending on whether we were discussing the (visual) design or the functionality and content.

Snippet: Using a Print Stylesheet

Often people want to be able to print webpages without all the menus and graphics and with all the content fitting correctly onto a page. To do this you need to create a separate print stylesheet. It would look something like this:

themes/YOURTHEME/css/print.css

#sidebar, #header, #navbar, #footer { display: none; } #container, #content{ width: 100%; margin: 0; float: none; }

Tutorial: Embedding YouTube or Vimeo inside your Text-Content using a custom 'TextParser'

Submitted by Roman Schmid (aka Banal)

Embedded videos from platforms like YouTube or Vimeo are very common nowadays. To embed such a video in the SilverStripe CMS, you would have to enter the HTML-Code directly in the HTML-Source of the TinyMCE Editor.

This is a cumbersome and error prone process and may mess with your layout. Wouldn't it be nice if you could type: $YouTube(<videoId>) anywhere in your text and then automatically get the video embedded there?
This snippet makes use of a custom TextParser to achieve that goal.

Tutorial: Embed flash content using SWFObject

Submitted by Roman Schmid (aka Banal)

There are numerous ways to embed flash content into your SilverStripe Website. A commonly used and very flexible method to embed flash is provided by the SWFObject script. In this snippet I'll show you how to create a custom FlashPage that will contain flash content, embedded using SWFObject.

Prerequisites

• Download and unpack swfobject 2.2 from http://code.google.com/p/swfobject/
• copy swfobject.js and expressInstall.swf from the swfobject folder to your mysite folder. I copied the files into mysite/javascript/lib, so this is what I'm gonna use in this example

Snippet: Extend Meta description beyond 255 character limit

Submitted by Marijn Kampf

Search engines prefer to display a description in their result pages that include the keywords searched for, to ensure they pick and mix sentences from your meta description rather than random bits from your page it can be helpful to have a longer meta description. This allows for more room to include your keywords.

Changing the field length couldn't be simpler, in the file mysite/code/Page.php add the MetaDescription type as Text.
class Page extends SiteTree { public static $db = array( 'MetaDescription' => 'Text' // Change field to use 'Text' ); }

Tutorial: Using jQuery for form validation

As you may have noticed, SilverStripes built in form validation is based on Prototype and is pretty limited. It also means that even though you might be using jQuery for other things on your site, you will still need to load prototype.js and all the accociated files that SilverStripe requires for it's built in JavaScript form validation.

However, using a jQuery validator, such as the excellent Validate plugin has some obvious benefits:

1. Validate multiple forms on a single page
2. Customize error messages
3. More control over inline error styling
4. Remove the need for loading extra JS files, such as Prototype.js and Behavior.js etc. (more than 90KB in total)
5. Extended validation options as well as the ability to create custom regex validation rules.

So now that you are (most likely) convinced about the benefits of using jQuery validation let's get started.

Snippet: Add Syntax Highlighting to the SS Forums

Submitted by Dalesaurus

Get Firefox, install Greasemonkey, Then install the following userscript:

http://www.silverstripe.org/assets/Uploads/silverstripeforumscode0.1.user.js

Updates and more here: http://www.silverstripe.org/general-questions/show/272688