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 (http://www.die-muellers.org/cpg/index.php).
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
try
align="texttop"
or
align="absmiddle"
Worth a shot.
Thanks!
But where do I need to enter this (which file)? I use the classic theme.
Felix
edit themes/yourtheme/theme.php, find// 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// 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> </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 ?>
Then find <td align="center" valign="middle" class="thumbnails">and change to <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.
Quote from: GauGau on March 16, 2006, 05:26:31 PM
@^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 ;)
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.
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:
<?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> </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) ? '' : '&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&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).
<!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-übersicht" title="Die Müllers Foren-ü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