Frame for thumbnails!

[olti]

I would like to add to the thumbnails of my gallerry frames like this gallery on Opera Community: http://my.opera.com/kf-elbasan/albums/

Any code how to do it?

Thanks.

[Joachim Müller]

The site you refer to uses a crude method to specify a background image for the thumbnails (http://my.opera.com/community/graphics/users/1/album1.gif), which has a fixed width and height. The then just wrap the thumbnail into a div container with fixed width, height, padding and the above mentioned image as a background. This is not a very flexible approach, as it requires all your thumbnails to have exactly the same dimensions and aspect ration. Usually, this is not the case for regular coppermine installs, so you can't use the method they use. However, the place to add the wrapper div would be themes/yourtheme/theme.php. Find

Code Select Expand

$template_thumbnail_viewand modify the code below it accordingly. If you don't have that section inside your custom theme, copy

Code Select Expand

// HTML template for thumbnails display
$template_thumbnail_view = <<<EOT

<!-- BEGIN header -->
        <tr>
<!-- END header -->
<!-- BEGIN thumb_cell -->
        <td valign="top" class="thumbnails" width ="{CELL_WIDTH}" align="center">
                <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                                <td align="center">
                                        <a href="{LINK_TGT}">{THUMB}<br /></a>
                                        {CAPTION}
                                        {ADMIN_MENU}
                                </td>
                        </tr>
                </table>
        </td>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
                <td valign="top" class="thumbnails" align="center">&nbsp;</td>
<!-- END empty_cell -->
<!-- BEGIN row_separator -->
        </tr>
        <tr>
<!-- END row_separator -->
<!-- BEGIN footer -->
        </tr>
<!-- END footer -->
<!-- BEGIN tabs -->
        <tr>
                <td colspan="{THUMB_COLS}" style="padding: 0px;">
                        <table width="100%" cellspacing="0" cellpadding="0">
                                <tr>
                                       {TABS}
                                </tr>
                        </table>
                </td>
        </tr>
<!-- END tabs -->
<!-- BEGIN spacer -->
        <img src="images/spacer.gif" width="1" height="7" border="" alt="" /><br />
<!-- END spacer -->

EOT;into a new line before

Code Select Expand

?>and then apply the wrapper.

As suggested above, applying a background image is not a bright move, as it won't work for all thumbnails. A better method would be to create a wrapper that takes care of all possible resolutions. To do so, you could wrap your thumbs into a 3x3 table that looks like this:
+--------+--------+--------+
+   /    +   -    +   \    +
+--------+--------+--------+
+   |    +   @    +   |    +
+--------+--------+--------+
+   \    +   -    +   /    +
+--------+--------+--------+
with @ being the actual thumbnail and the red lines being the frame image parts.
If you need the wrapper, create the frame parts first, using your favorite image editor (MS Paint is fine).

Joachim