We already finished the PHP and have a design, now let’s finish!
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"> </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"> </div>
<% control Children %>
<div class="grid_3 textright" >
<span class="meta">$NavSubTitle</span>
<h4 class="title ">$Title</h4>
<div class="hr clearfix dotted"> </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.
