Thumbnails in Album list vertical align at top?

[femu]

Hi,

a little question. When I go in the album list, the thumbnails on the left of the description are vertically centered. Is there any way to get it valign'ed them on the top? You can see, what I mean over here.

So the current table looks like:

<tr>
  <td><a href="link"><img src="Thumbnail"></a></td><td>spacer</td><td>Description</td>
</tr>

So the larger the description is, the more the thumnail ist centered in relation to the description. So finally, what I want to have is:

<tr>
  <td valign="top"><a href="link"><img src="Thumbnail"></a></td><td>spacer</td><td>Description</td>
</tr>

Any hint/link/plugin tip would be really appreciated.


Thanks very much and regards,
Felix

[^DooM^]

try

align="texttop"

or

align="absmiddle"

Worth a shot.

[femu]

Thanks!

But where do I need to enter this (which file)? I use the classic theme.


Felix

[Joachim Müller]

edit themes/yourtheme/theme.php, find

Code Select Expand

// HTML template for the album listand modify the stuff beneath it. If you don't have such a section in your theme, copy the corresponding section

Code Select Expand

// HTML template for the album list
$template_album_list = <<<EOT

<!-- BEGIN stat_row -->
        <tr>
                <td colspan="{COLUMNS}" class="tableh1" align="center"><span class="statlink"><b>{STATISTICS}</b></span></td>
        </tr>
<!-- END stat_row -->
<!-- BEGIN header -->
        <tr>
<!-- END header -->
<!-- BEGIN album_cell -->
        <td width="{COL_WIDTH}%" valign="top">
        <table width="100%" cellspacing="0" cellpadding="0">
        <tr>
                <td colspan="3" height="1" align="left" valign="top" class="tableh2">
                        <span class="alblink"><a href="{ALB_LINK_TGT}"><b>{ALBUM_TITLE}</b></a></span>
                </td>
        </tr>
        <tr>
                <td colspan="3">
                        <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
                </td>
        </tr>
        <tr>
                <td align="center" valign="middle" class="thumbnails">
                        <img src="images/spacer.gif" width="{THUMB_CELL_WIDTH}" height="1" class="image" style="margin-top: 0px; margin-bottom: 0px; border: none;" alt="" /><br />
                        <a href="{ALB_LINK_TGT}" class="albums">{ALB_LINK_PIC}<br /></a>
                </td>
                <td>
                        <img src="images/spacer.gif" width="1" height="1" border="0" alt="" />
                </td>
                <td width="100%" valign="top" align="left" class="tableb_compact">
                        {ADMIN_MENU}
                        <p>{ALB_DESC}</p>
                        <p class="album_stat">{ALB_INFOS}</p>
                </td>
        </tr>
        </table>
        </td>
<!-- END album_cell -->
<!-- BEGIN empty_cell -->
        <td width="{COL_WIDTH}%" valign="top">
        <table width="100%" cellspacing="0" cellpadding="0">
        <tr>
                <td height="1" valign="top" class="tableh2">
                        <b>&nbsp;</b>
                </td>
        </tr>
        <tr>
                <td>
                        <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
                </td>
        </tr>
        <tr>
                <td width="100%" valign="top" class="tableb_compact">
                    <div class="thumbnails" style="background-color:transparent"><img src="images/spacer.gif" width="1" height="{SPACER}" border="0" class="image" style="border:0;margin-top:1px;margin-bottom:0" alt="" /></div>
                </td>
        </tr>
        </table>
        </td>
<!-- END empty_cell -->
<!-- BEGIN row_separator -->
        </tr>
        <tr>
<!-- END row_separator -->
<!-- BEGIN footer -->
        </tr>
<!-- END footer -->
<!-- BEGIN tabs -->
        <tr>
                <td colspan="{COLUMNS}" 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;from themes/sample/theme.php (or from this posting) and paste it into themes/yourtheme/theme.php into a new line right before

Code Select Expand

?>

Then find

Code Select Expand

                <td align="center" valign="middle" class="thumbnails">and change to

Code Select Expand

                <td align="center" valign="top" class="thumbnails">

@^DooM^: thanks for your readiness to help, but bothalign="texttop" as well as align="absmiddle" are made-up attributes that won't do anything afaik.

[^DooM^]

@^DooM^: thanks for your readiness to help, but bothalign="texttop" as well as align="absmiddle" are made-up attributes that won't do anything afaik.

Best tell that to macromedia then cuz I pulled those align tags straight from dreamweaver

[Joachim Müller]

better use the W3C docs as reference than Dreamweaver - an app that uses a height attribute for table cells can't be taken serious as a reference. Dreamweaver doesn't create valid HTML code out-of-the-box.

[femu]

Hi gaugau,

I modified the theme.php from my classic style as you described below, but no changes visible. The HTML part wasn't inside and therefore I copied the below one before the ?> Also tried to put it on the top, but the same result. Here my theme.php:

Code Select Expand

<?php
/*************************
  Coppermine Photo Gallery
  ************************
  Copyright (c) 2003-2006 Coppermine Dev Team
  v1.1 originally written by Gregory DEMAR

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.
  ********************************************
  Coppermine version: 1.4.4
  $Source: /cvsroot/coppermine/stable/themes/classic/theme.php,v $
  $Revision: 1.15 $
  $Author: gaugau $
  $Date: 2006/02/24 13:32:45 $
**********************************************/

// ------------------------------------------------------------------------- //
// This theme has all CORE items removed                                     //
// ------------------------------------------------------------------------- //
define('THEME_IS_XHTML10_TRANSITIONAL',1);

// HTML template for the album list
$template_album_list = <<<EOT
<!-- BEGIN stat_row -->
        <tr>
                <td colspan="{COLUMNS}" class="tableh1" align="center"><span class="statlink"><b>{STATISTICS}</b></span></td>
        </tr>
<!-- END stat_row -->
<!-- BEGIN header -->
        <tr>
<!-- END header -->
<!-- BEGIN album_cell -->
        <td width="{COL_WIDTH}%" valign="top">
        <table width="100%" cellspacing="0" cellpadding="0">
        <tr>
                <td colspan="3" height="1" align="left" valign="top" class="tableh2">
                        <span class="alblink"><a href="{ALB_LINK_TGT}"><b>{ALBUM_TITLE}</b></a></span>
                </td>
        </tr>
        <tr>
                <td colspan="3">
                        <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
                </td>
        </tr>
        <tr>
                <td align="center" valign="top" class="thumbnails">
                        <img src="images/spacer.gif" width="{THUMB_CELL_WIDTH}" height="1" class="image" style="margin-top: 0px; margin-bottom: 0px; border: none;" alt="" /><br />
                        <a href="{ALB_LINK_TGT}" class="albums">{ALB_LINK_PIC}<br /></a>
                </td>
                <td>
                        <img src="images/spacer.gif" width="1" height="1" border="0" alt="" />
                </td>
                <td width="100%" valign="top" align="left" class="tableb_compact">
                        {ADMIN_MENU}
                        <p>{ALB_DESC}</p>
                        <p class="album_stat">{ALB_INFOS}</p>
                </td>
        </tr>
        </table>
        </td>
<!-- END album_cell -->
<!-- BEGIN empty_cell -->
        <td width="{COL_WIDTH}%" valign="top">
        <table width="100%" cellspacing="0" cellpadding="0">
        <tr>
                <td height="1" valign="top" class="tableh2">
                        <b>&nbsp;</b>
                </td>
        </tr>
        <tr>
                <td>
                        <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
                </td>
        </tr>
        <tr>
                <td width="100%" valign="top" class="tableb_compact">
                    <div class="thumbnails" style="background-color:transparent"><img src="images/spacer.gif" width="1" height="{SPACER}" border="0" class="image" style="border:0;margin-top:1px;margin-bottom:0" alt="" /></div>
                </td>
        </tr>
        </table>
        </td>
<!-- END empty_cell -->
<!-- BEGIN row_separator -->
        </tr>
        <tr>
<!-- END row_separator -->
<!-- BEGIN footer -->
        </tr>
<!-- END footer -->
<!-- BEGIN tabs -->
        <tr>
                <td colspan="{COLUMNS}" 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;
// Added to display flim_strip
function theme_display_film_strip(&$thumb_list, $nbThumb, $album_name, $aid, $cat, $pos, $sort_options, $mode = 'thumb')
{
    global $CONFIG, $THEME_DIR;
    global $template_film_strip, $lang_film_strip;

    static $template = '';
    static $thumb_cell = '';
    static $empty_cell = '';
    static $spacer = '';

    if ((!$template)) {
        $template = $template_film_strip;
        $thumb_cell = template_extract_block($template, 'thumb_cell');
        $empty_cell = template_extract_block($template, 'empty_cell');
    }

    $cat_link = is_numeric($aid) ? '' : '&amp;cat=' . $cat;

    $thumbcols = $CONFIG['thumbcols'];
    $cell_width = ceil(100 / $CONFIG['max_film_strip_items']) . '%';

    $i = 0;
    $thumb_strip = '';
    foreach($thumb_list as $thumb) {
        //modify $new_size for max dimension of thumbnails in filmstrip
        $new_size = 65;
        preg_match('/(?<=width=")[0-9]*/',$thumb['image'],$matches,PREG_OFFSET_CAPTURE);
        $srcWidth=$matches[0][0];
        preg_match('/(?<=height=")[0-9]*/',$thumb['image'],$matches,PREG_OFFSET_CAPTURE);
        $srcHeight=$matches[0][0];
        $ratio = max($srcWidth, $srcHeight) / $new_size;
        $ratio = max($ratio, 1.0);
        $destWidth = (int)($srcWidth / $ratio);
        $destHeight = (int)($srcHeight / $ratio);
        $thumb['image']=preg_replace('/width="[^"]*"/','width="'.$destWidth.'"',$thumb['image']);
        $thumb['image']=preg_replace('/height="[^"]*"/','height="'.$destHeight.'"',$thumb['image']);
        $i++;
        if ($mode == 'thumb') {
            $params = array('{CELL_WIDTH}' => $cell_width,
                '{LINK_TGT}' => "displayimage.php?album=$aid$cat_link&amp;pos={$thumb['pos']}",
                '{THUMB}' => $thumb['image'],
                '{CAPTION}' => $thumb['caption'],
                '{ADMIN_MENU}' => ''
                );
        } else {
            $params = array('{CELL_WIDTH}' => $cell_width,
                '{LINK_TGT}' => "index.php?cat={$thumb['cat']}",
                '{THUMB}' => $thumb['image'],
                '{CAPTION}' => '',
                '{ADMIN_MENU}' => ''
                );
        }
        $thumb_strip .= template_eval($thumb_cell, $params);
    }

    if (defined('THEME_HAS_FILM_STRIP_GRAPHICS')) {
        $tile1 = $THEME_DIR . 'images/tile1.gif';
        $tile2 = $THEME_DIR . 'images/tile2.gif';
    } elseif (defined('THEME_HAS_FILM_STRIP_GRAPHIC')) {
        $tile1=$tile2=$THEME_DIR . 'images/tile.gif';
    } else {
        $tile1=$tile2= 'images/tile.gif';
    }

    $params = array('{THUMB_STRIP}' => $thumb_strip,
        '{COLS}' => $i,
        '{TILE1}' => $tile1,
        '{TILE2}' => $tile2,
        );

    ob_start();
    starttable($CONFIG['picture_table_width']);
    echo template_eval($template, $params);
    endtable();
    $film_strip = ob_get_contents();
    ob_end_clean();

    return $film_strip;
}
?>

and my template (just in case I need to change something over here).

Code Select Expand

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html dir="{LANG_DIR}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
<meta http-equiv="Pragma" content="no-cache" />
<title>{TITLE}</title>
{META}
<link rel="stylesheet" href="themes/classic/style.css" type="text/css" />
<script type="text/javascript" src="scripts.js"></script>
<!-- $Id: template.html,v 1.6 2005/12/04 03:22:35 donnoman Exp $ -->
</head>
<body bgcolor="#70A5CC">
    <center>
    <table cellspacing="0" cellpadding="0" border="0">
<br />
      <tr>
      <td width="18px" align="right" style="vertical-align:top;background:url(../../../../templates/cback/images/orion/backgrounds/shadow_left.jpg);"><img src="../../../../templates/cback/images/orion/backgrounds/shadow_left_top.jpg" border="0"></td>
        <td width="944px" align="left" class="bodyline" rowspan="2">
        <table class="#70A5CC" width="100%" cellspacing="0" cellpadding="0" border="0">
    <tr>
    <td><a href="../index.php"><img src="../../../templates/cback/images/orion/backgrounds/header_bg.jpg" border="0" alt="Die Müllers Foren-&uuml;bersicht" title="Die Müllers Foren-&uuml;bersicht" /></a></td>
</tr>
</table>
<table bgcolor="#FFFFFF" width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td><center>
<br />
{CUSTOM_HEADER}
<table width="100%" border="0" cellpadding="20" cellspacing="20">
<tr>
<td valign="top" style="border: 1px solid #666666;background-color:#FFFFFF;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><font size="1">
{SYS_MENU} <br /> {SUB_MENU}</font>
</td>
</tr>
</table>
<img src="images/spacer.gif" width="1" height="15" alt="" />
<br />
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top">
{ADMIN_MENU}
{GALLERY}
</td>
</tr>
</table>
</td>
</tr>
</table>
</tr>
</table>

</td>
<td width="18px" align="left" style="vertical-align:top;background:url(../../../../templates/cback/images/orion/backgrounds/shadow_right.jpg);"><img src="../../../../templates/cback/images/orion/backgrounds/shadow_right_top.jpg" border="0"></td>
</tr>
<tr>
<td width="18px" align="right" style="vertical-align:bottom;background:url(../../../../templates/cback/images/orion/backgrounds/shadow_left.jpg);"><img src="../../../../templates/cback/images/orion/backgrounds/shadow_left_bottom.jpg" border="0"></td>
<td width="18px" align="left" style="vertical-align:bottom;background:url(../../../../templates/cback/images/orion/backgrounds/shadow_right.jpg);"><img src="../../../../templates/cback/images/orion/backgrounds/shadow_right_bottom.jpg" border="0"></td>
</tr>
</table>
<br /><br />
</body>
</html>

Thanks again for your help!
Felix