Building a web portfolio using SilverStripe

Building a web portfolio using SilverStripe

I know, we all love WordPress, but sometimes, you just need to try something else.

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.

Posted in: Featured, SilverStripe, Uncategorized, Web on May 19th by mary fran

DeliciousFacebookDigg
RSS FeedStumbleUponTwitter

About mary fran

Mary Fran has been obsessed with the web for over 12 years. She owns Purple Crayon Web Studio. She even has a personal portfolio called OriginalMoxie. She is a seasoned web developer and this year she finally decided to write this blog.

1 Comment

RSS feed for comments on this post. TrackBack URL

Leave a comment