templates

2.4 - Using Short Codes to embed a YouTube video

Submitted by Dan Hensby

Silverstripe 2.4 has introduced shortcodes to the CMS editor. Simply, the CMS user can now add short BBCode style code to the editor area and it can then be replaced using a predefined function. For example [link id=23] could be replaces by the link to Page with ID 23. In fact that is exactly how internal links created in the links sidebar work in 2.4, preventing them from breaking when URLs change.

The aim of this tutorial

The aim of this tutorial is to allow the CMS user to enter the short code:

[YouTube id=3UTu6lV8ppY]

or

[YouTube id=3UTu6lV8ppY]A video about SilverStripe[/YouTube]

we will also allow them to add more custom attributes. We will then use this to embed a YouTube video automatically for the user.

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)' ); . . . . }

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

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.

Create a Static, CMS editable sidebar

When making a site you will often want a block of content on multiple pages that remains the same (static) yet is also editable from the CMS. For example a 'Common Links' sidebar or a footer etc. In this tutorial we will create a sidebar block with various types of content that can easily be extended to fit with your needs.