www.peterberger.at > BB template "PBase"
BB template "PBase"
[ About ] [ Download ] [ HTML Generation ] [ Customization ] [ Examples ]

About the template
This is an HTML template for the picture browser BreezeBrowser. With this template you are able to generate a web gallery in the style(s) of the famous PBase image platform. For full functionality please use BreezeBrowser version 2.8 or higher. You need to install BreezeBrowser first in order to use the template. You donīt need to buy the product, the trial version is fully functional but limited by the number of images it can handle. My HTML template "PBase" is free of charge. However if you want to honor my efforts a donation is welcome. :-)

Δ

Download
You can install the "PBase" template by downloading the file pbase.zip and extracting it to your default template directory (which is usually located at C:\Program Files\BreezeSys\BreezeBrowser\templates). You should end up with a directory called "pbase" underneath the template folder.
Δ
HTML generation
You should be familiar with BreezeBrowserīs HTML generation feature. If not, please read the online help pages first.
click to enlarge...
In version 2.8 BreezeBrowser intruduced two template specific user settings in the HTML dialogue. The PBase template makes use of these two variables to set the style and the caption. At the bottom of the HTML dialogue you will find two drop down boxes, "Style:" on the left and "Caption:" on the right side. Try out the different styles to see which one you prefer.

A big advantage of this template is that itīs possible to offer the fullsize images in different sizes. To achieve this itīs necessary to generate the other sizes in separate steps using separate target directories. I.e. if you want offer two larger sized versions of the images then you have to run the HTML generation process two more times with larger size settings. The possibility to save different HTML settings (new feature in BreezeBrowser version 2.8) will be a great help for this. See the next chapter for a detailed description how to make a multi-sized gallery.
Δ

Customization
In the following paragraphs Iīll explain some variables for customization. You will find them in the file "settings.js". To set a new value you have to open this file in a text editor.

Number of rows and columns:
var numColumns = 4
var numRows = 3

These two variables defines the layout of the index page. The number of index pages is a result of these settings and the total amount of images.

EXIF data:
var showExif = 1

If this variable is set to 1 then a short comment of the shooting data will be shown, including a link to the "full exif" data. If set to 0 no shooting or EXIF data wil be shown at all.

Image comments:
var showComment = 0

Set this variable set to 1 to show the image comments in the fullsize view underneath the image caption. The source for this text is the @caption@ item which is either the JPG comment field or the IPTC caption field, depending on your settings in the BreezeBrowser preferences.

Personal information:
var myname = "Peter Berger"
var myhomepage = "http://www.peterberger.at"
var mygallery = "/galleries.html"
var copyright = "All images are copyrighted."

If you leave these variables empty the following default values will be used: @owner@ for myname, @homeURL@ for myhomepage, and "../" (=parent directory) for mygallery. Note that you can set two different sources for the @owner@ token in BreezeBrowser preferences.

Different image sizes:
var defaultSize = 2
size[1] = "small"
size[2] = "medium"
size[3] = "large"

Using the size array you can define alternative image sizes. There is no limit, you can offer as much sizes as you like. Also the text strings can be changed to your needs. Itīs important to set the defaultSize variable to a valid value. As already mentioned you have to start the HTML generation for each size separately. Choose your target directory and start with the default size. Then generate the other sizes in sub-folders. In the example above the small images need to be in a sub-folder called "size1" and the large image need to be in a sub-folder called "size3". Note that there is NO sub-folder called "size2" because itīs the default size!

Alternatively you can use BreezeBrowserīs "proofs" function to generate the other sizes. That is possible because only the image files in the sub-folders are used (HTML files can be deleted). Just make sure that the file names of the images in the sub-folders are identical to the ones in the main folder. So when you rebuild your gallery (chaging text, layout, image order, etc.) you only have to rebuild the main folder (default size) and donīt worry about the other sizes.

Variations instead of image sizes:
var sizename = "Variations:"
var defaultSize = 1
size[1] = "color"
size[2] = "b/w"
size[3] = "sepia"

Instead of different sizes of one image itīs possible to offer variations of one image or subject! You can overwrite the "other sizes:" string with the variable sizename. In the example above I offer the same image in b/w and sepia toned. The name of the sub-folders remains the same though ("size2" for b/w images and "size3" for sepia ones). Another idea is to offer different views of the subject (front, side, back, detail). See below for working examples!

Thumbnail preview images:
var navigAsThumbs = 1
var sizesAsThumbs = 1

If you set the variable navigAsThumbs to 1 the links to the previous and next images will show a thumbnail preview. If you set the variable sizesAsThumbs to 1 then thumbnail previews will be shown for the "other sizes". Of course this only makes sense if you do not offer other sizes but alternative views (like I mentioned in the paragraph above and show in the examples below).
If you want to use the second feature you have to provide the thumbnails in the sub-folders. Also make sure that the thumbnails are in the same directory as the web-sized images and not in a special thumbnail folder (you can set this option in the BreezeBrowser preferences). Only when the sizesAsThumbs variable is set the thumbnails will be taken from the sub folders! (Otherwise only the thumbnails from the main folder will be used.)
Δ

Example 1
click for example 1... // Example with 3 sizes:
// ---------------------
var sizename = "other sizes:"
var defaultSize = 3
size[1] = "small"
size[2] = "medium"
size[3] = "large"
var showExif = 1
var showComment = 1
var navigAsThumbs = 0
var sizesAsThumbs = 0
// ---------------------

This example gallery shows the images in different sizes. The browser will remember your preferred size while you navigate through the gallery. With these settings you are as close as possible to the original PBase site. Remember that you only need the sub-folders "size1" (small images) and "size2" (medium images). Because "large" is the default size the images (plus HTML and CSS files) have to be in the galleryīs main folder. Once the alternative sizes are generated you can delete all thumbnail, .htm and .css files in these sub-folders. The text underneath the fullsize images (also in the "text view") comes from the JPG comment fields (showComment = 1). For this gallery I used the famous PBase style "webdev".
Δ

Example 2
click for example 2... // Example with variations:
// ------------------------
var sizename = "Variations:"
var defaultSize = 1
size[1] = "watercolor"
size[2] = "b/w"
size[3] = "original"
var showExif = 0
var showComment = 0
var navigAsThumbs = 0
var sizesAsThumbs = 1
// ------------------------

This example shows different variations of one image. The main folder contains the watercolor images which are the topic of this gallery. In the fullsize view you will find links to a black and white version and the original photograph. Next to the links are thumbnail previews of the alternative images. The b/w images (incl. thumbnails) are located in a sub-folder called "size2" and the unedited images (incl. thumbnails) are located in the sub-folder "size3". Note that the image size of the different variations need not to be the same. However I highly recommend to set the same thumbnail size for design reasons. In this example I used the PBase style "zeroscan". EXIF data is not shown.
Δ

Example 3
click for example 3... // Example with other views:
// -------------------------
var sizename = "other views:"
var defaultSize = 1
size[1] = "front"
size[2] = "side"
size[3] = "detail"
var showExif = 1
var showComment = 0
var navigAsThumbs = 0
var sizesAsThumbs = 1
// -------------------------

In this example I expanded the idea of variations and show different views from one object. Before the HTML generation I put the images in 3 different folders "front", "side" and "detail". I made sure that the order is the same in all folders and then used the batch rename function of BreezeBrowser in each directory to assign the same file names to the same penguins. So each view of the penguin 1 is called "penguin_1.jpg". Again I enabled the thumbnail preview feature (set the variable sizesAsThumbs to 1 in the settings.js file). After the HTML generation the "side" images were in the "size2" folder and the "detail" images in the "size3" folder. Then I deleted all .htm and .css files (and not the thumbnails!) in these two sub-folders. As design I used the self-written style "winterfun".
Δ

Diese Seite auf Deutsch...