We need to create our templates in a special format, but it can be edited in any HTML editor. If you want Dreamweaver to recognize the .ss file extension as HTML you need to follow these instructions.

If putting together the HTML is not really your thing, I would suggest heading over to SmashingMagazine’s list of free HTML templates.

Also, I am not posting my CSS files. You can take this raw HTML and use CSS to do your own layout (or you can even just use the loops in the .SS file and use different HTML markup).

The .ss file is basically just an HTML file. There is one .ss file that holds the header and footer, and then various other files that handle the middle of the page. You can find better explanations of the templating language here.

We need to create only one page-specific template – the PortfolioHolder.ss template. We do not need a PortfolioPage template, as we are displaying all portfolio items on one page.

The PortfolioHolder.ss template is as follows:

<div class="hr grid_12 clearfix">&nbsp;</div>

		<!-- Catch Line and Link -->
			<h2 class="grid_12 caption clearfix">My <span>portfolio</span> is pretty darn awesome, don't you think?</h2>

		<div class="pr grid_12 clearfix">&nbsp;</div>
        <% control Children %>
        	<div class="grid_3 textright" >
				<span class="meta">$NavSubTitle</span>
				<h4 class="title ">$Title</h4>
				<div class="hr clearfix dotted">&nbsp;</div>
				<p>$Content</p>
			</div>
            <div class="grid_9">
				<% control PortfolioProjects %>
				<a class="portfolio_item float thickbox" href="$Fullsize.URL" title="$Caption">
				<em>$Title</em>
                <img src="$Thumbnail.URL" />
				</a>
				<% end_control %> <!--end PortfolioProjects -->
            </div>
            <% end_control %><!--end Children-->
		</div>

What we are doing here is looping through the page’s children (the PortfolioPages), displaying their info and then looping through the dataobjects (PortfolioProjects) that we have associated with each of those pages. We use the $FullSize.URL method of retrieving the images, so that we can add alt text to our images.

This file goes in the Templates/Layout folder. I am leaving the rest of the theming to you, but now you know how to set up all the crucial bits for your portfolio.

The inspiration for this post is OrigninalMoxie. It is my personal portfolio, and I built it in SilverStripe in about half the time it would have taken me in WordPress – and it is only the third SilverStripe site that I have built. Now, I did get help from their community when building this site, but that is quite OK. I am going to pass their insights on to you.

What first needs to happen is you need to install SilverStripe. It is almost as easy to install as WordPress, but it actually requires a few extras.

To be able to run SilverStripe, you need to have PHP5 enabled on your server. And, you might need a little bit of patience.

First, download SilverStripe and upload it to your webhost. Navigate to yoursite.com and follow the install directions. For the record I am pretty sure that it always says that it cannot determine if Mod_Rewrite is enabled. (At least on MediaTemple).

Once you have your shiny new installation of SilverStripe up and running, it is time for the fun stuff…writing the PHP functions that make the site work. This is the beauty of SilverStripe – the ability to write custom data & page types with a few lines of code.

You will also need to install the Dataobjectmanager and SWFupload modules. To install, simply download them and upload them into your main directory and run yoursite.com/dev/build. You will need to rename them to dataobject_manager and swfupload before running the dev/build.

Now that those are installed, we can move on to building the site.  (I am also assuming that you have written your HTML/CSS and that your site is designed). I find it is always best to write the HTML/CSS before delving into the PHP. If it doesn’t work when the page is static, it is definitely not going to work once you start messing around with the theme.

Time for the PHP! (For this example, I am assuming that you have only one page for your portfolio, but that your work is divided into multiple categories)

We start by determining how we are going to display our data. In this example we want to break down our work into categories. But, the beauty of this is that we don’t have to go writing data types for each category. We are going to create the following files:

• PortfolioProject.php
• PortfolioPage.php
• PortfolioHolder.php

PortfolioProject is not a page, it is a dataobject, and it is the most specific of our files. This file creates the live entry for each portfolio piece that appears on your site. PortfolioPage is essentially the category. This means that if you ever want to change your portfolio so that pieces for each category are on their own page, you can. PortfolioHolder is the page that will display the content from all of its children (the portfolio pages).

Confused yet?

Let’s start by creating the PortfolioProject.php file.

<?php
class PortfolioProject extends DataObject
{
static $db = array (
'Title' => 'Text',
'Caption' => 'Text'
);
static $has_one = array (
'PortfolioPage' => 'PortfolioPage',
'Thumbnail' => 'Image',
'FullSize' => 'Image'
);

static $summary_fields = array (
'Title' => 'Title',
'Caption' => 'Caption'
);

public function getCMSFields()
{
return new FieldSet(
new TextField('Title'),
new TextareaField('Caption'),
new ImageField('Thumbnail'),
new ImageField('FullSize','Full size image')
);
}
}
?>

We just created a custom dataobject. Pretty cool, eh? We also told the system what fields we need to be able to edit on the front end. Copy your file to the mysite/code folder and go to yoursite.com/dev/build to create the page type in the database and make sure there are no errors.

Now the PortfolioPage (or category):

<?php
class PortfolioPage extends Page
{
static $has_many = array (
'PortfolioProjects' => 'PortfolioProject',
);

public function getCMSFields() {
$f = parent::getCMSFields();
$f->addFieldToTab("Root.Content.Portfolio Projects", new ImageDataObjectManager($this,'PortfolioProjects','PortfolioProject','Thumbnail', 'Category'));
return $f;
}
}

class PortfolioPage_Controller extends Page_Controller
{
}
?>

Copy your file again to the mysite/code folder and go to yoursite.com/dev/build to create the page type in the database and make sure there are no errors.

And finally the Portfolio Holder. This page is going to aggregate the information from its child pages.

<?php
class PortfolioHolder extends Page
{
static $allowed_children = array(
	'PortfolioPage'
);
}

class PortfolioHolder_Controller extends Page_Controller
{ 

}
?>

We have now written our “Holder” page.

Copy your file again to the mysite/code folder and go to yoursite.com/dev/build to create the page type in the database and make sure there are no errors.

Check back later this week for how to enter your data and then show it in a template.

This is my new favorite content management system and I am really excited to start working with it. There are a few things about this CMS that make it truly different. First being that it runs on its own PHP framework called Sapphire. The framework is based on object oriented programming, while the CMS is based on the Model-View-Controller method. This means that all programming logic is separate from the markup and the display is separate from the other two.

Getting this CMS installed is almost easier than WordPress’ “famous 5-minute installation”. I can get this one installed in 3 minutes, max.

It requires the following to be enabled on your server:

• PHP 5.2.0+ recommended
• gd2, mysql, hash, mbstring modules
• Set the maximum memory to at least 48 mb.
• Using a PHP accelerator or opcode cache (e.g. xcache) is strongly recommended to for performance reasons – SilverStripe creates large cache files as PHP code that are quite slow to open without an opcode cache. (There is a thread on creating the SilverStripe cache on MediaTemple’s grid server here)
• Apache 1.3+/2.0+/2.2+ with mod_rewrite, and the ability to set rewriting rules in .htaccess files via “Allow Override”.
• lighttpd 1.4+ with access to the server configuration

Most of these things are included in the hosting packages that developers chose, but might not be in your client’s set-up. Please verify with the hosting company that these specs are in place before either telling your client that it will work, or that they need a better hosting company.

Getting SilverStripe installed is a very painless process that includes giving it access to create a database, or providing it with access to an empty one that you have created. The longest part is actually uploading all the files to your webserver.

After you get the CMS installed, the rest is up to you. Every time you want to create a new page type, you can tell the software what fields and options need to appear for the page. You can handle meta-information on a page by page basis.

SilverStripe uses a custom file extension .ss and it can throw your IDE for a loop. I suggest using Aptana and doing the following: Opening the eclipse preferences. Under “General” select “Editors” > “File Associations” . There you add a new File Association for “*.ss” and set the associated Editor to “Aptana HTML Editor”.

Now, why the custom file extension? It is basically your template HTML file. There are different ones based on the different page types. Each page type will have a .ss file that tells the CMS how the page should look and a PHP file that tell the CMS what content should appear on the page and what fields should appear in the editor. Pretty nifty, eh?

One of the easiest things to do with SilverStripe is to change its look, since the look is separate from the code. You can upload one of the themes from here (there are some decent ones in the mix) to get you familiar with this process. Simply upload the theme to the themes directory. Next edit the _config.php file in the mysite folder to contain the following :

[/code]Hopefully you are intrigued with the robust yet still simple to use CMS. As they are posted, I will add links to the additional SilverStripe basics series here.