Inserting Thumbnails into a Table Template

4 posts by 2 authors in: Forums > CMS Builder
Last Post: April 26, 2010   (RSS)

By gkornbluth - April 25, 2010 - edited: April 26, 2010

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
The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

Re: [gkornbluth] Inserting Thumbnails into a Table Template

By gkornbluth - April 26, 2010 - edited: April 26, 2010

Well it's amazing what a good night's sleep will accomplish.

Problem solved.

For all of you who are interested, here's what I did (using a hint from my own CMSB Cookbook).

For each of the cells I defined 2 variables, one for the image and one for link to the detail page <?php @$myImage = $jewelryRecords[0]['image'][0]; ?>
<?php @$mylink = $jewelryRecords[0]['_link']; ?>

Then I inserted them in each cell, along with the appropriate record number and link code. <td align="center" valign="middle" class="noedge"><?php @$myImage = $jewelryRecords[0]['image'][0]; ?>
<?php @$mylink = $jewelryRecords[0]['_link']; ?>
<a href="<?php echo $mylink ?>"><img src="<?php echo $myImage['thumbUrlPath4'] ?>" width="<?php echo $myImage['thumbWidth4'] ?>" height="<?php echo $myImage['thumbHeight4'] ?>" alt="" border="0"/></a></td>

<td align="center" valign="middle" class="leftrightedge"><?php @$myImage = $jewelryRecords[1]['image'][0]; ?>
<?php @$mylink = $jewelryRecords[1]['_link']; ?>
<a href="<?php echo $mylink ?>"><img src="<?php echo $myImage['thumbUrlPath4'] ?>" width="<?php echo $myImage['thumbWidth4'] ?>" height="<?php echo $myImage['thumbHeight4'] ?>" alt="" border="0"/></a></td>

That did it.

Hope someone can benefit from my discovery.

Best,

Jerry Kornbluth
The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

Re: [Donna] Inserting Thumbnails into a Table Template

By gkornbluth - April 26, 2010

Thanks Donna
The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php