My Portfolio

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 [[http://www.ufex.dk|Ufex]] design (also using The Secretary). {{:tutorials:gallery:ufex_current.jpg?w=200}} ====== 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 [[main:tools|Tools]] page for help creating HTML pages.




	
		My Portfolio
	
	
		
			My Portfolio

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

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

Click the "Full View" tab and write this:

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 [[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!

Next, find the line ''My Portfolio

'' and enter the following:

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 [[main:secretary-terms#view-modes|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 ''

'' and immediately after it write this:

====== 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 [[http://www.varal.org/media/imageswitcher/index.html|documentation]].