In this section you will find full tutorials for achieving various things with silverstripe and sapphire. If you have any suggestions for future tutorials or would like to write your own we would love to hear from you!

Display DataObjects in an SEO friendly way

Submitted by Martijn van Nieuwenhoven

Regarding this 'Need to know' tutorial from Aram, I would like to extend this principle by explaining how to display DataObjects in a SEO friendly way.

There are several ways to do this. I will explain one I prefer the most, by using SiteTree::GenerateURLSegment();.

First step is to add an extra field to the Database called URLSegment. If you use Aram's files in his tutorial on displaying DataObjects, your StaffMember $db array will look like this:

mysite/code/StaffMember.php
class StaffMember extends Page{ static $db = array( 'Name' => 'Varchar(255)', 'Description' => 'Text', 'URLSegment' => 'Varchar(255)' ); . . . . }

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.

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!

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.

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

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.

Web 2.0 Mirrored Images

Submitted by Dieter Orens

Ever wanted to create the so-called 'web 2.0' mirrored images as you can see on http://www.dio5.com/portfolio/, without having to manually rotate and proces the image? Then this one is for you.

I attached a fully working zip-package, but let's run through some of the code nonetheless.

When it comes to images the Image and GD class are the ones we need to tackle. Create a file in your mysite/code/ folder called ImageDecorator.php and add in the next code:

Detecting Mobile Browsers to Re-Theme Your Site

Submitted by Richard Rudy

With the proliferation of Smart Phones and other non-traditional-computer ways to browse the internet, wouldn’t it be great if you could provide a custom browsing experience for different users?

You could re-template your site using the sub-sites module, but it might not be stable/functional enough for every one yet. So I’ll show you how to use Anthony Hand’s great User Agent Detection Class to re-template your site based on the User Agent of your visitor.

First things first get yourself a copy of the Class from the link above. He also has a lot of great resources on designing for mobile browsers.

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.

Creating a Simple Contact Form

In this tutorial we create a simple contact form which sends an email using a custom template. This type of form can be extended to create complex sets of fields and processing actions.