My Portfolio

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. {{:tutorials:gallery:singlepage_preview.jpg?w=200}} ====== 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:




	
		My Portfolio
	
	
		
			My Portfolio

			A collection of random works.

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 [[main:recommended-reading|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 ''My Portfolio''. Immediately after this line place the following:

====== 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.

''set_simpletitle()'' is a [[documentation:template-widgets/gallery|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 (''TextToClick''). 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 ''#''. 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:

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 ''''. 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 [[tutorials:getting-started#step-1the-hq-link|HQ Link]] and [[tutorials:getting-started#step-2load|Load function]]: Make sure to set the $HQ variable to your own, otherwise you will get nasty errors!

Find the line ''

'' and after it write a [[tutorials:getting-started#step-3bam|bam()]] function ([[documentation:gallery:view-functions#bam|see here]] for other options), like so:

Next, find the line ''

'' and make another ''bam()'' function (note the template value has changed to "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:

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


 / 

 ALTERNATE SYMBOL HERE

Yay!