crop images to display thumbnails the same size

[jonnyfreak]

I have thumbnails that are using the Tom Muck horizontal looper.
however the uploader that i have used only scales the images from their orginal size so when the thumbs are displayed they are all different sizes, Is there a way that i can have them all the same size, i have used lightroom to display larger images as the gallery

here is what i have


<table>
<tr>
<?php
$rsCakesSelect_endRow = 0;
$rsCakesSelect_columns = 4; // number of columns
$rsCakesSelect_hloopRow1 = 0; // first row flag
do {
if($rsCakesSelect_endRow == 0 && $rsCakesSelect_hloopRow1++ != 0) echo "<tr>";
?>
<td valign="top">
<p><a href="images/uploads/cakes/<?php echo $row_rsCakesSelect['cakeImage']; ?>" rel="lightbox[<?php echo $row_rsCakesSelect['cakeCatID']; ?>]" title="<?php echo $row_rsCakesSelect['cakeTitle']; ?>"><img src="images/uploads/cakes/thumbs/<?php echo $row_rsCakesSelect['cakeImage']; ?>"/></a></p></td>
<?php $rsCakesSelect_endRow++;
if($rsCakesSelect_endRow >= $rsCakesSelect_columns) {
?>
</tr>
<?php
$rsCakesSelect_endRow = 0;
}
} while ($row_rsCakesSelect = mysql_fetch_assoc($rsCakesSelect));
if($rsCakesSelect_endRow != 0) {
while ($rsCakesSelect_endRow < $rsCakesSelect_columns) {
echo("<td>&nbsp;</td>");
$rsCakesSelect_endRow++;
}
echo("</tr>");
}?>
</table>

thanks in advance

[Beverleyh]

I'm not really sure what you're saying. Can you not just set an explicit size in the img tag?
<img src="images/uploads/cakes/thumbs/<?php echo $row_rsCakesSelect['cakeImage']; ?>" height="100" width="150" />
If your asking how to resize the images during upload, here are some resources that might help: http://www.google.com/m?q=resize%20image%20while%20uploading%20in%20php

[jonnyfreak]

I'm not really sure what you're saying. Can you not just set an explicit size in the img tag?
<img src="images/uploads/cakes/thumbs/<?php echo $row_rsCakesSelect['cakeImage']; ?>" height="100" width="150" />
If your asking how to resize the images during upload, here are some resources that might help: http://www.google.com/m?q=resize%20image%20while%20uploading%20in%20php

no i cant do that because it will distort the images.

i need to just show part of the image as a thumbnail so if the image uploaded isnt the correct size it wont matter and it will just show what it can as the thumbnail. I was going to set a div with a size of say 200 X 200 and then maybe set the thumbnail image as the background to that div then make that div a link to the large image..but thats tricky

make sense?

[Beverleyh]

That sounds like it would work - something like;
<div style="background:url(images/uploads/cakes/thumbs/<?php echo $row_rsCakesSelect['cakeImage']; ?>) 50% 50% no-repeat; width:200px; height:200px;"></div>of course I don't know how big the thumbnail pics are so centering them into the background like that might cause some strange looking results. Give it a try though.

You might also like to play around with some CSS3 background sizing to try and create a "best-fit" scenario - "background-size:contain;" looks like it could be of use to you. http://www.sitepoint.com/css3-background-size-property/ Just bear in mind that IE8 and lower wont recognise this CSS3 property.

[jonnyfreak]

i have sorted by problem to a certain extent

<style type="text/css">
.crop{
height: 200px;
width: 200px;
overflow:hidden;
margin: 5px;
}

</style>

<a href="images/uploads/cakes/<?php echo $row_rsCakesSelect['cakeImage']; ?>" rel="lightbox[<?php echo $row_rsCakesSelect['cakeCatID']; ?>]" title="<?php echo $row_rsCakesSelect['cakeTitle']; ?>"><div class="crop"><img width="200" src="images/uploads/cakes/thumbs/<?php echo $row_rsCakesSelect['cakeImage']; ?>"/></div>


however the picture is showing from the top left and i need them to display the centre of the picture. can this be done?

[Beverleyh]

If you remove reference to the img tag and set the pic as a background image on the .crop div instead, as described in my post above, the 50% 50% background positioning shorthand will take care of horizontal and vertical centering of your thumbnail image.