Inserting Thumbnails into a Table Template

Hi All,

OK, I need help again.

An artist client would like me to create a template to display thumbnail images in a 3 row by 4 column table as in the sample at www.jkwebdesigns.com/tabletest.php.

The thumbnails will eventually lead to detail pages for each image, but I think I’ve got that part under control.

The client would also like to limit the amount of images in the table to 12 and if there are more than 12, to link to a new page for images 13 - 14.

The template is a table which uses a number of CSS classes to generate the horizontal and vertical lines, and the grey background fill image: dcdcdc.gif.

I’d like to use something like the concept <?PHP $maxCols=4; if (@++$count % $maxCols == 0): ?></tr><tr><?PHP endif; ?> to automatically insert the thumbnails into the appropriate cells in the template, but I’m afraid the more I try, the more lost I get.

Maybe this approach is not appropriate, but I can’t think of anything else to try.

Here’s the HTML code for the table so far:

<table width="1000" border="0" align="center" cellpadding="10" cellspacing="0">
<tr>
<td align="center" valign="middle" class="noedge"><img src="images/25-200.jpg" /></td>
<td align="center" valign="middle" class="leftrightedge"><img src="images/42-150.jpg" /></td>
<td align="center" valign="middle" class="rightedge"><img src="images/32-150.jpg"/></td>
<td align="center" valign="middle" class="noedge"><img src="images/62-150.jpg" /></td>
</tr>
<tr>
<td align="center" valign="middle" class="topedge"><img src="images/17-150.jpg" /></td>
<td align="center" valign="middle" class="toprightleftedge">&nbsp;</td>
<td align="center" valign="middle" class="toprightedge">&nbsp;</td>
<td align="center" valign="middle" class="topedge">&nbsp;</td>
</tr>
<tr>
<td align="center" valign="middle" class="topedge"></td>
<td align="center" valign="middle" class="toprightleftedge">&nbsp;</td>
<td align="center" valign="middle" class="toprightedge">&nbsp;</td>
<td align="center" valign="middle" class="topedge">&nbsp;</td>
</tr>
</table>

And here’s the CSS style sheet:

.noedge {background-image:url(../images/dcdcdc.gif);
background-position: center;
background-repeat:no-repeat;
}
.toprightedge {
border-color: #E82127 #B6D321 black #B6D321;
border-style: solid;
border-top-width: 5px;
border-right-width: 5px;
border-bottom-width: 0px;
border-left-width: 0px;
width: 250px;
height: 185px;
background-image:url(../images/dcdcdc.gif);
background-position:center;
background-repeat:no-repeat;
}

.toprightleftedge {
border-color: #E82127 #B6D321 black #B6D321;
border-style: solid;
border-top-width: 5px;
border-right-width: 5px;
border-bottom-width: 0px;
border-left-width: 5px;
width: 250px;
height: 185px;
background-image:url(../images/dcdcdc.gif);
background-position:center;
background-repeat:no-repeat;
}

.rightedge {
border-color: #E82127 #B6D321 black #B6D321;
border-style: solid;
border-top-width: 0px;
border-right-width: 5px;
border-bottom-width: 0px;
border-left-width: 0px;
width: 250px;
height: 185px;
background-image:url(../images/dcdcdc.gif);
background-position:center;
background-repeat:no-repeat;
}

.leftrightedge {
border-color: #E82127 #B6D321 black #B6D321;
border-style: solid;
border-top-width: 0px;
border-right-width: 5px;
border-bottom-width: 0px;
border-left-width: 5px;
width: 250px;
height: 185px;
background-image:url(../images/dcdcdc.gif);
background-position:center;
background-repeat:no-repeat;
}

.topedge {
border-color: #E82127 #B6D321 black #B6D321;
border-style: solid;
border-top-width: 5px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
width: 250px;
height: 185px;
background-image:url(../images/dcdcdc.gif);
background-position:center;
background-repeat:no-repeat;
}

I sure could use a hand.

Best,

Jerry Kornbluth