Portfolio Catalog

To create a portfolio you will first need to setup a page with a Portfolio-Catalog.
In this page you can define the size of the images used in the portfolio, any extra field you might want to use, the behavour of the carousel and the layout of the generated page.

There are 3 different images used in the Portfolio. A thumbnail that is used in the carousel, A medium image you can use to display in the page and a large image that will be used in a fancybox popup when clicked on the medium image.
All three images can have their own size, so they will be automatically resized on upload to the best quality and smallest filesize.

The resize of the images will keep images in its original aspect ratio, so the values given will be the maximum values used.

For the thumbnails, the height value is the leading value. This is because it looks better to have all images the same height.

When you have set the values for the image sizes you need to define how the carousel will look.

Width

The first thing is the width of the carousel. (Note that this is the width without the arrows)
If your thumbnail images all are going to be the same size, you can calculate the optimal size by taking the number of images you want to show at once, multiplay that by the width of the images, adding 10 pixels for the space between the images for each image.
Example: You want to show 5 images that are 100px width, the optimal width of the carousel would be 5*(100+10)=550px.

Autoplay

This setting tells the carousel to use the autostepping mode, or just wait for the user to click an arrow.

Images to move on click

This setting tells the carousel how many images it should jump when one of the earrows is clicked. It has no effect on the autoplay mode. Autoplay will allways jump opne image at a time.

Scroll speed

This setting is the time (in milliseonds) for the carousel the slide to the next image. This way you can make the sliding very smooth or jumpy.

Delay between steps

This will tell the carousel the time (in miliseconds) to wait before sliding to the next thumbnail. This setting is only used in autoplay mode.

Border Width

Used to create a border around the carousel images. Set to 0 if you don't want the border to show.

Border Color

If the border is used, set the (hex)color value in this field. Do not use the #, just the 6 HEX color values.
 

User Defined Fields

The user defined fields are used to create the portfolio effect.
The fields will generate input fields in the Portfolio Details page, and can be used in the Portfolio Template to show up in the generated page.

The fields are filled as a comma seperated list.
Note: Please be sure NOT to use any whitespace in the fieldnames. (no checks yet in the current version)

Presentation Template

The presentation template is the HTML code that is used to output your Portfolio page.

All data that is used in the Portfolio can be added as simple words (must be uppercase) enclosed in curly brackets.
The standard components to use are:

{CAROUSEL} (the complete carousel)
{IMAGE} (the medium image including a FancyBox link to the large image)
{THUMBNAIL} (the thumbnail image)
{MEDIUMIMAGE} (the medium image)
{FULLIMAGE} (the large image)
{WYSIWYG} (the wysiwyg content part of the page)

The User Defined Fields can be used the same way.
The standard included fields (Name, Website, Email) are used as:

{NAME}
{WEBSITE}
{EMAIL}

Note that they are used in all capitals.

When you have created your template (or decide to use the standard template) you should save the pagedata and you can start adding Portfolio Detail pages.