Download the beta version (v0.1 beta)

Download the beta version of the Plogger 3 Broadway theme here. I still need to clean up the code and the CSS, and check it more thoroughly in IE6 and some other browsers.

Download the “Broadway” Plogger 3 theme

Updated: Broadway 2

I’ve changed the theme to display the album thumbnails in the same grid format as the picture thumbnails, and also fixed a few other layout bugs.

Download the “Broadway 2″ Plogger 3 theme

Update 12/19/09: I’ve updated the theme to be compatible with the recently-released Plogger v.1.0. If you’re running an earlier version, I would recommend that you update to the current stable release.

Want this with Lightbox?

I’ve incorporated the Lightbox 2 JavaScript into the Broadway 2 theme. You can download it at Broadway 2 + Lightbox.

This method is implemented in the Plogger 3 theme: Air, but it should work in any theme that uses the unordered list derived from the default Plogger theme and that has a fixed and determinable width for the element ‘ul.slides’.

Overview of the method

In brief, the template file album.php is edited to add a PHP script that figures out how many thumbnails are in the first row and then adjusts the left margin of each ‘li.thumbnail’ in order to keep the same amount of space on either side of each image. The user is required to manually set 3 variables: $center_thumbs, $total_space and $thumb_padding, and the script does the rest.

Line-by-line documentation

Below is all of the relevant code, to be placed into the theme file ‘album.php’.

>

Here’s how the whole thing works, with each code section followed by a description of what’s happening:

$center_thumbs = 'true'; // When the value of "$center_thumbs" is set to 'true', the theme will center the thumbnail images
$total_space = 798; // Set the value of $total_space to equal the width, in pixels, of the interior of 'ul.slides' (e.g.: after deducting for any padding)
$thumb_padding = 33; // Set the value of $thumb_padding to equal the sum of all padding and borders on 'ul.slides li.thumbnail', the thumbnail image and the anchor tag (this can be tricky to calculate)

The centering feature can be toggled on and off by setting $center_thumbs to ‘true’ or any other value. The user will need to specify integer values for $total_space and $thumb_padding, as described in the commented lines.

$thumbs_on_page = $GLOBALS["available_pictures"];

The number of available pictures on the current page is assigned to the $thumbs_on_page variable.

$actual_thumb_width = $thumb_width + $thumb_padding;

The actual width of each ‘li.thumbnail’ is calculated and saved as the variable $actual_thumb_width. The width of the thumbnail image is available to the theme as $thumb_width, but the user must specify a value for $thumb_padding, which is an integer equal to the sum of all of the padding and borders on the thumbnail image, the surrounding anchor tag, and the ul list item ‘.thumbnail’. This can be rather tricky to calculate, so you may want to increase your figure by a few pixels just to be safe.

$max_thumbs_per_row = floor($total_space / $actual_thumb_width);

The maximum possible number of thumbnails per row is calculated by dividing the useable width of ‘ul.slides’ by the actual width of a ‘li.thumbnail’, then rounding down the quotient to the next lowest integer using the PHP function floor(). For example, if the quotient of $total_space / $actual_thumb_width is 4.9, $max_thumbs_per_row would equal 4, because 5 thumbnails would be wider than the available space.

($thumbs_on_page < $max_thumbs_per_row)? $thumbs_per_row = $thumbs_on_page : $thumbs_per_row = $max_thumbs_per_row ;

The actual number of thumbs in the first row is calculated and assigned to $thumbs_per_row using a ternary operator. If the number of thumbs on the current page is less than the maximum number possible in a single row, it follows that the row isn't full, and the number of thumbs on the page is assigned to the variable $thumbs_per_row. However, if the number of thumbs on the page is equal to or greater than the maximum number possible in a single row, it follows that the first row contains the maximum number possible, and so the thumbs will be spaced as though every row is full. Doing it this way maintains the grid, but if one wanted partially filled rows to be centered according to the number of remaining images, that would be possible.

$avail_space = $total_space - ($thumbs_per_row * $actual_thumb_width);

The amount of white space, $avail_space, is calculated by subtracting from the total usable space the sum of the widths of the thumbs in the first row.

$left_margin = floor($avail_space / ($thumbs_per_row + 1));

Finally, the number of pixels for the left margin of each 'li.thumbnail', $left_margin, is calculated by dividing $avail_space by the sum of 1 plus the number of thumbs in the first row, and then rounding down the quotient to the next lowest integer. The number of thumbs must be increased by 1 to account for the white space to the right of the last thumbnail.

In practice, the white space to the right of last thumbnail may be a few pixels wider or narrower than the left margins, but this deviation should be limited to within 4 or 5 pixels.

The fundamental changes are:

• The theme template files are now primarily HTML with some PHP, rather than being entirely written in PHP. This will make it easier for people with basic knowledge of HTML to further customize the theme.
• The compatibility with Internet Explorer 7 has been greatly improved. Among other things, a new float and clear bug introduced in IE 7 has been avoided. The theme is inherently much more stable and less prone to breaking in different browsers.

Note that this theme is only for use with Plogger 3. If you’re using an earlier version, it’s recommended that you upgrade.

Download the stable version (v0.1)

Download the latest stable version of the Plogger 3 Air theme here. Because I tend to tinker with things, the files here will probably be slightly more up-to-date than those bundled with the full Plogger download.

Download the “Air” Plogger 3 theme

Download the beta version (v0.2 beta)

If you don’t mind the occasional bug or glitch, download the beta version to get a look at some new features. The album view in v0.2 beta supports centered thumbnails and can be set to display each picture’s date when no description exists – take a look at album.php for commented instructions. I’ve posted some documentation regarding the method for centering the thumbnails at Centering the thumbnails in Plogger. The code should work for any fixed-width theme derived from the default, but the method could be adapted to center many other layouts that use floated list items instead of tables.

Download the “Air” Plogger 3 theme – beta