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.

I know these cards will be useful!

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.

CONTEST IS CLOSED!

These are the folks who handle my printing services (and most of my clients’ printing). I have never been disappointed with what arrived from them. They even have a picture of my business cards on their Yelp! page…Their color business cards are always spot on with what I sent.

To enter:

Leave a comment here.
Tweet this post with @purpleurbia and @uprinting mentioned.
Leave a comment on our Facebook page.
(you may enter once via each method for a total of three entries)

Giveaway Prize:

500 Business Cards
2 x 3.5”, 2 x 2” (square card) or 1.75 x 3.5” (slim card)
14 pt gloss cardstock, 14 pt matte cardstock or 13 pt recycled uncoated cardstock
Full Color Both Sides; Offset Press; 3 Business Day Printing
Shipping: FREE UPS Ground Shipping
Eligibility: Limited to US Residents only. Must be 18 years old and up.

Contest ends May 22.

I now am an award winning designer. I now have a design degree (before I was making things happen with a French/Marketing degree and my awesomely good looks).

I now have time to write tutorials. And thoughts on design. And that my friends, is awesome sauce.

This week, I will show you how to use SilverStripe to build a clone of my new personal portfolio site (originalmoxie). I might even have a Drupal article or two up my sleeves.

Thanks UPrinting!

I have been ordering business cards from them for a while now, and have never been disappointed with what I have gotten for myself and my clients. I refuse to tell my clients how little I pay for the printing, because every where I go, I get compliments on them! (They are the 2″ square ones). So, I let them give me a box of cards for myself in return for giving a box of cards to you.

Here are the details:

Giveaway Prize: 250 Business Cards for one (1) lucky winner

Size: 2 x 3.5”, 2 x 3”, 2 x 2” (square card) or 1.5 x 3.5” (skinny card)

Paper: 14 pt gloss cardstock, 14 pt matte cardstock or 13 pt recycled uncoated cardstock

Shipping: Sponsored bloggers and Winners have to pay for shipping

Eligibility: Limited to US Residents due to shipping costs.

To enter: Comment below. For a second entry retweet the giveaway with “@purpleurbia @uprinting #giveaway” in it somewhere. Contest ends on the 18th.

Please don’t hate me for calling these folks out. There is nothing inherently bad about their sites. However, the layots & graphic elements are becoming all too common from one site to the next. These are all well put together examples, and to someone who doesn’t read 30 design blogs everyday, they look pretty darn good. But are they worthy of being showcased for their individuality? Probably not.

“3 bar” layout

Here are 5 sites with the “3 bar” layout – a top nav with a logo, a middle bar with headline content and main content below that. Usually the top nav is in a dark grey, the middle is a bright blue or green and the bottom is a light color.

http://www.solidshops.com/ – This layout has become ubiquitous with web apps. I could have filled 5 blog posts with web apps that use this style and layout. It looks clean and professional, but gets an F for layout originality.

http://niagakit.com/ – Same as above.

?http://www.proudcloud.net/

http://www.yaronschoen.com/ – At least the illustrations and breaking of the grid make up for the standard layout used.

http://www.nabru.co.uk/ – Again, it looks clean and professional and the elements add a more organic feel, but the layout is still too out-of-the-box for me.

Here is where to go to learn how to do this effect:

PSD Tuts+ – How to design a family of websites

And, here is how to do it right:

http://madebygiant.com/ – Giant Creative has taken this layot and made it their own simply by making their navigation “talk”. The bright colors contrast with the neutral background. The superb typography makes the design shine.

http://www.stanleysolutions.in/ – This site is broken into those same 3 visual sections, but the diagonal lines on the center text box as well as the lack of line dividing the nav and the feature area make this site own its design.

The pinking shear effect.

I like textured edges as much as the next guy. Heck, I probably like sewing and handmade edges more than the next guy. But it has become an over-used design trend. Evidence below:

https://epicevent.com.au/ – To me this site is overdone and Photoshop heavy. The overall effect is nice, but there is just one too many effects here.

http://www.stthomasartgallery.org/ – You cannot take pinking shears to wood. The zig-zag line makes little to no sense here. No background behind the nav and darker text would have made more sense.

Culinary Culture

http://www.culinaryculture.com/- This one has me on cute overload. This is another case where someone needed to turn off 30% of the Photoshop effects. It isn’t bad, but it isn’t terribly awesome either.

Here is where to go to learn how to do this effect:

Grafpedia – Design a unique WordPress theme

Grafpedia – Gritty website design

And here is how to do it right:

http://analog.coop/ – The effect is used sparingly. And tastefully. It adds to the design without being an over-powering element.

In conclusion, the web design world is slowly being over taken by what is “trendy”. And, yes, it can still be good design even if it is “trendy”. What you want is a site that acknowledges the trends in the industry and then takes them and makes them their own, instead of letting the trends take control.

That being said, all of the websites here are designed well (I don’t like ugly websites, and don’t want to call out people for having terrible skills, just doing what is “trendy” or “typical”), some are just more original than others. These sites were all put together by designers with tremendous skill. Some are just a little too attached to the bandwagon.

1. Listen. Listen more. Question. Understand.
2. Exercise the creative muscle. Be creative every day. And not by doing client work. Create something daily that has no restrictions.
3. Get away from the computer. It can be for a date with my oft neglected sketchbook or something of the New York Times best seller list, but even the computer needs a rest every now and then.
4. Learn new coding techniques. The more ways there are to solve a problem, the better the final solution will be.
5. Revel in accidents. Sometimes they are even happy.
6. Have a connection. Both with the creation and the audience.
7. Ignore convention. The masses are rarely right.
8. Take field trips. Change the scenery.
9. Collect inspiration. Harvest ideas. Grow creativity.
10. Stretch. Adapt. Bend.

This list is meant to guide my way through 2010 and beyond. To make it better than 2009. To aid my choices. I know that being creative takes effort and growth. I know I need to listen better to clients and myself in order to understand their needs and my ability to fulfill those needs. I know I need to create outside of the confines of client work and grad school portfolio pieces to become truly creative. I need to step away from my computer, even though it is my main tool, it should not be my only tool or my only connection to the outside world.

Development techniques are always changing, it would be stupid not to learn new techniques. I have grand plans for my skills. This year is the year that it all happens. And we all know that accidents happen. Make them happy and learn something. Or maybe they are happy and you already have something useful for them. All creation should be personal and bear a personal creation. It should never be about the money.

The masses are frequently wrong. And my friends, with websites looking so much alike in this age of infinite possibility, that is not a good thing. Grids are for breaking, trends are for ignoring.

I am going to get out of the office more this year. I am going to enjoy the view both in Chicago and around the world. The more I see, the more inspiration I can collect. I can have more ideas from which to pluck the good ones. I can grow as a designer, or “creative”.

I will adapt to the changing landscape of design and make this world my own. I will bend my designs to the limits of today’s technologies.

I will be better.

Have you written your own manifesto? Do you have professional resolutions for the new year?