This tutorial will lead you through the process in creating a simple, two-column layout with a listing of works on the left that users can click to load full-size images on the right. We will base our design on the current Ufex design (also using The Secretary).

Step 1: The Structure

First, we must write the HTML structure of our page. Using your favourite text-editor or any HTML editing software, create a file named index.php. This will be the main page of your website. Copy and paste the following code:

Take a look at the Tools page for help creating HTML pages.

<!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 id="WorkList"> 
			My Portfolio<br /><br /> 
 
		</div> 
		<div id="Content"> 
 
		</div> 
	</body> 
</html>

What we have done here is define an area for our text links to reside in - which will become a left sidebar, called “WorkList”, and another area for our images and any other content to load, simply named “Content”. We have also written a simple title for the page which will appear before our work links.

Step 2: The Style

Now we must write some CSS to control the look and feel of the page, as well as define how the elements are placed on the page. Create a new file called styles.css and paste in the following:

See Important Definitions for clarification on all these crazy terms like HTML and CSS.

html { 
	font-size: 62.5%; 
	padding: 0; 
	margin: 0; 
} 
 
body { 
	padding: 0; 
	margin: 0; 
	font-family: Arial, sans-serif; 
	font-size: 1.2em; 
	color: #000; 
	background: #FFF; 
} 
 
#WorkList { 
	float: left; 
	position: fixed; 
	top: 0; 
	overflow: auto; 
	padding: 20px 20px 0 20px; 
	margin-right: 20px; 
	width: 200px; 
	height: 100%; 
	background: #FFF; 
} 
 
#Content { 
	top: 0; 
	margin: 20px 0 0 240px; 
	height: 100%; 
} 
 
#WorkList a, #WorkList, #Content { 
	font-size: 0.9em; 
	color: #000; 
} 
 
.imgsw_image { 
	border: 0; 
} 
 
.imgsw_list_numbers a, .imgsw_prevnext a { 
	color: #000; 
	margin-right: 10px; 
} 
 
.imgsw_list_numbers a.active { 
	font-weight: bold; 
} 
 
.imgsw_prevnext, .imgsw_list_numbers { 
	display: inline; 
} 
 
.imgsw_viewport { 
	margin-top: 10px; 
}

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 the index.php we created earlier 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

The next step is to create a template that will be used to display our works/images. 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 “Clean”. Click the “List” tab and enter the following:

<?php title_linkToFullview(); ?><br />

Click the “Full View” tab and write this:

<?php gallery_varal_imageswitcher(); ?>

Make sure to save the template by clicking “Create Template”!

Step 4: Bam!

Now, here comes the fun part: getting The Secretary into your page and loading in your newly dynamic content! 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" ); 
?>

Next, find the line My Portfolio<br /><br /> and enter the following:

<?php bam( "gallery", "template=Clean, mode= list, force_display= true" ); ?>

Notice the use of the mode and force_display options. By setting mode to list we are telling The Secretary to always use the List template we created, regardless of the View Mode. Setting force_display to true forces this template and related content to always be shown, also regardless of the View Mode. We do this because we want the work links - the titles of and links to our images - to always be visible in the sidebar. Try setting force_display to false and see how it changes the functionality.

Finally, find the line <div id=“Content”> and immediately after it write this:

<?php bam( "gallery", "mode= fullview" ); ?>

Finish

Save your page, upload it to your server and point your browser to your new gallery! Assuming you have created at least one set, you should see a listing of them on the left, be able to click the links and view full-size images on the right. It is important to note that there are many more options to control how the ImageSwitcher looks and behaves (which are out out of the scope of this tutorial), so it is recommended that you read the documentation.