The single-page layout is a quick and effective way to present a portfolio for easy viewing and easy updating. Once the basic structure is created, a more personal touch can be added in the form of graphic and typographic elements. In this tutorial, we will create a page with a horizontal list of links to each individual work at the top, and a vertical listing of images and descriptions below. When clicked, these links will make the user's browser jump down to that specific work, wherever it lies on the page.

Step 1: The Structure

First, we must write the HTML structure of our page. Using a text-editor or HTML editing software create a file named index.php. Enter the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
	<head> 
		<title>My Portfolio</title> 
	</head> 
	<body> 
		<div class="center"> 
			<span class="title">My Portfolio</span><br /> 
			<span class="sub_title">A collection of random works.</span> 
			<div id="WorkLinks"> 
 
			</div> 
			<div id="WorkList"> 
 
			</div> 
		</div> 
	</body> 
</html>

This code creates a content area (which we will center on the page), an area for our links, “WorkLinks”, and another area, “WorkList”, for our images to load.

Step 2: The Style

Take a look at the Recommended Reading page for useful links about HTML and CSS.

This step is where we define how all the elements of our page will play together - size, colour, spacing, etc. Create a new file called styles.css and paste in the following:

html { 
	font-size: 62.5%; 
	padding: 0; 
	margin: 0; 
} 
 
body { 
	padding: 0; 
	margin: 0; 
	font-family: Georgia, serif; 
	font-size: 1.2em; 
	color: #555; 
	background: #222; 
} 
 
.center { 
	width: 75%; 
	margin-left: auto; 
	margin-right: auto; 
	background: #FFF; 
	padding: 15px; 
} 
 
.title { 
	font-size: 1.7em; 
	font-style: italic; 
	font-weight: bold; 
} 
 
.sub_title { 
	font-size: 0.9em; 
	font-style: italic; 
} 
 
#WorkLinks { 
	padding: 5px; 
	margin: 10px 0 20px 0; 
	color: #777; 
	background: #EEE; 
} 
 
#WorkLinks a { 
	margin: 0 5px 0 5px; 
	color: #477DF4; 
} 
 
#WorkLinks a:hover { 
	color: #8B32B8; 
} 
 
.work_block { 
	margin-bottom: 20px; 
	border-bottom: 1px solid #CCC; 
} 
 
.work_block .info { 
	padding: 5px; 
	background: #EEE; 
} 
 
.images img { 
	margin-right: 1px; 
}

Step 2.5: Structure & Style Together

Now we must connect the two - our HTML structure and our CSS - to create a properly functional page. Switch back to index.php and find the line <title>My Portfolio</title>. Immediately after this line place the following:

<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />

Step 3: The Template

For this particular design, we actually need two templates - one for our links and one for our images.

The Links Template

Log-in to your installation of The Secretary and navigate to Gallery > Templates > Add. You can enter any name for this template, but for the sake of this tutorial we will call our new template “Single Page Links”. Click the “List” tab, enter the following code and save the template.

<a href="#<?php set_simpletitle(); ?>"><?php set_title(); ?></a>

set_simpletitle() is a Template Widget that outputs the set's “simple title” - a version of the title that does not contain spaces or punctuation, in lowercase - which is perfect for things like links.

OK, we have a couple things going on here. Because we want to create a link for each set, we begin by writing the HTML code for a link (<a href=“URL”>TextToClick</a>). Next, we want to make the link take our viewers to a specific point on the page, so we will link to what is called an “anchor”. To do this, we change the href attribute to #<?php set_simpletitle(); ?>. The # sign tells the browser that the target of the link is on the current page, so don't remove it!

And the last little bit is using the set_title() function to display the set's title as the text to be clicked on.

The Works Template

Now we must make the second template. Head back to Gallery > Templates > Add, name it “Single Page Works” and enter this:

<div class="work_block"> 
	<a name="<?php set_simpletitle(); ?>"></a> 
	<div class="images"> 
		<?php set_list_images(); ?> 
	</div> 
	<div class="info"> 
		<strong><?php set_date("M d Y"); ?></strong> / <?php set_description();?> 
	</div> 
</div>

Here is where we make a little bit of magic to make our anchor links work. Ignoring the rest of it, focus on the line <a name=”<?php set_simpletitle(); ?>”></a>. Here we use the HTML tag for a link again, but instead of a “href” attribute we use only the “name” attribute. To make it all work, we use the set_simpletitle() function again. This makes the two reference each other.

We use the set_list_images() function to display our images. This will display each image in the set, one next to the other (so if you have super large images this example may look a little screwy for you). The rest of this template is simply presentational HTML, making use of two other view functions to display the date and set description.

Step 4: Bam!

Now, here comes the fun part: getting The Secretary into your page! Switch back to index.php and at the the very top insert an HQ Link and Load function:

Make sure to set the $HQ variable to your own, otherwise you will get nasty errors!

<?php 
	$HQ= "/path/to/secretary"; 
	include_once "$HQ/secretary_loader.php"; 
 
	secretary_load( "gallery" ); 
?>

Find the line <div id=“WorkLinks”> and after it write a bam() function (see here for other options), like so:

<?php bam( "gallery", "template= Single Page Links" ); ?>

Next, find the line <div id=“WorkList”> and make another bam() function (note the template value has changed to “Single Page Works”):

<?php bam( "gallery", "template= Single Page Works" ); ?>

Save and upload. Finished!

It's all in the details

I often get lost in the details and I find that it's the small things that can make or break a design. This next tip introduces a few new concepts and begins to demonstrate how dynamic templates in The Secretary can get.

I want my links to be separated by a slash, but the problem is that if we simply add a slash after the link (in the template, of course), the last link displayed in our list will also have a slash after it. Being picky, I do not like this - the list just does not terminate nicely. To save my design, I will make use of another really nifty View Function, if_this_set_is_not_last(), which, as the name suggests, determines if the link is NOT the last one to be displayed.

To do this, switch back to The Secretary and navigate to Gallery > Templates > Edit and select the “Single Page Links” template. Append the following:

<?php	 
	if ( if_this_set_is_not_last() ): 
?> 
 /  
<?php 
	endif; 
?>

Now, let's say you wanted the last link in the list to end with something else, you would write this:

<?php	 
	if ( if_this_set_is_not_last() ): 
?> 
 /  
<?php 
	else: 
?> 
 ALTERNATE SYMBOL HERE 
<?php 
	endif; 
?>

Yay!