I recently updated my portfolio page at www.d-allison.com, which took some pains to set up. I had very specific needs, some of which I still haven’t completely figured out, but I think that it turned out nicely.

Much of my website is done using WordPress, with a template that I’ve completely designed myself.  What I wanted to accomplish is to have my portfolio main page display a thumbnail of the website that I was featuring along with a title. When you click on it, it takes you to a another POST page which shows the portfolio item.

Individual Pages

To accomplish this, I had to create an individual post for each portfolio item. I included them into one specific category; in this case web design.  At this point, each page look like every other post in my blog which I did not want. To distinguish these pages from the others, I created a single post template based on the category.

Custom Category & Single Post Pages

To find the category number in WordPress, go to the categories section in the WordPress administration panel, hover over the category that you’re working on, and you should see the category id in the status bar of your browser.  Now, armed with my category number, I take the single.php template in WordPress, copy it, and append the category id number to it. Example: Copy of single.php becomes single-9.php. WordPress will now look for the single-9.php template for individual Web Design posts rather than the default single.php template.  This should also be done for the category page as well. WordPress will automatically look for the archives template unless you specify (ie. category-9, category-10, etc).  So now when a user goes to the Web Design category, a specific page will show the listings, and a specific page will show the individual posts. Now, you can format the single-9.php page (or something similar) to look how you want it to look.

Back to my site, I deleted the dates, comments, and other default options in the single template in favor of my own custom formatting.  Besides the changes I made in the style sheet, I have a custom sidebar, which includes a related posts listing and links to the rest of the site, and a description of the post, using the Custom Fields feature built into WordPress.

Using Custom Fields

I enter the name , type of project and other title information in the “Key” field, and the corresponding information, such as “John Smith” in the “Value” field, then click Add Custom Field. Keep adding as much information as you need. Those keys will be available for re-use on your next posting.  The information that you enter here wont be useful unless it corresponds to a value on your template.  To just have all the information show up in your template, simply place this code:

<?php the_meta(); ?>

Again this just displays all the information in alphabetical order. I’m sure there’s away besides CSS to format this but I don’t know how.  Anyway, to get a better grasp on the items, place this code:

<?php $values=get_post_custom_values(“ClientType”);echo $values[0];?>

where “ClientType” matches the item that you used as your “Key” in the custom field.  By placing this code in your template, you can arrange individual items in your post, style them however you please, and have more overall control of the look and feel of you custom fields.

The Excerpt Field

Next I include a link to an image file that Ive already created in the “excerpt” section, so that I can show that information on the category page. Here’s an example:

<a href=”http://www.d-allison.com/blog/chado-designs”><img class=”alignnone size-thumbnail wp-image-429″ title=”Chado Advertising &amp; Designs” src=”http://www.d-allison.com/blog/wp-content/uploads/2008/09/picture-111-125×125.png” alt=”" width=”125″ height=”125″ /></a>

When I have finished the look of the single-9.php page, I move to the category-9.php page. I design the page to look a certain way using CSS. I want to show the image that I placed in the “excerpt” of the posts, so I change the coding on the category-9.php page. Take this coding:

<?php the_content() ?>

and change it to

<?php the_excerpt(); ?> .

This will display the excerpt instead of the content.  Place a div or table around the posting on the category-9.php page that’s only slightly larger than the image, make sure it floats left and you can have a gallery that looks like mine! Here’s the link again: http://www.d-allison.com/blog/category/web-design

Future Revisions

The only things I wished I could do different is  to have images on my posts in the “related posts” area. Not quite sure how to do that, and suggestions here would certainly be welcomed!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

I am no expert at this, but I prefer Javascript pop ups that display images inline so that they don’t open a new window. There are still a few that will open a window that look really nice, and I will give space to those as well.

I use Dreamweaver and/ or WordPress to design most of my sites. In Dreamweaver, you can install extensions to give you added functionality.  The Just So PhotoAlbum3 from Valleywebdesigns is a great tool that allows you to specify a folder and automatically create thumbnails, and pop up images using Fireworks and Dreamweaver.

Just So PhotoAlbum3

Just So Photo Album 3 Window

The first tab allows you to specify where you want to pull the images from, what size to make the thumbnails, how good you want the quality to be, etc. The second tab lets you choose from a few pre-made CSS templates already built in to spice up your thumbnails.  You can also choose to make them plain and apply your own styling and CSS later. The third tab allows you to specify the settings for the pop up; borders, backgrounds and other details.

This extension requires obviously Dreamweaver, but Fireworks as well. That make rule out some users unless you owned both packages.  It also opens a pop up window, which may not be seen by users with a pop up blocker turned on. The gallery’s can be very visually appealing however, which can outweigh all those other cons. Go to the website here and see examples.

Lightboxes, Thickboxes, Fancyboxes, Multiboxes…..

This is where many designers are headed now.  I use a few of these quite frequently in my designs.  These are inline unobtrusive windows that can be altered with CSS to show images, video, inline content, html pages, pdf’s and more.  Generally, this is accomplished by downloading the code / files from a developer (listed below) and inserting the style sheets and scripts into your page. Most require a class or an ID to be attached to the text or image to trigger the effect.  I use Multibox on this website to show images in the portfolio page, as well as when you click to Contact link in the sidebar and footer.  The nice thing about these windows too are that some can darken the background of the page to give more focus to the image or item being displayed.

I won’t go into detail on how to install those items because they are tirelessly documented on the web already, but I will provide links and links to examples.

These don’t require any specific web design platform and there are many plugins available for WordPress that make these options even more user friendly.

• Thickbox 3.1 -ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
• Lightbox 2 – Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.
• FancyZoom – Automatically scales large images to fit in window with a Mac like feel.
• Multibox – lightbox that supports images, flash, video, mp3s, html.
• And LOTS of other clones with many, many options.  The place to see them all COMPARED is The Lightbox Clones Matrix.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.