Image Size
Just a quick question...not that important
Is there a way to set a maximum image size for the product pages?
The majority of the products I am promoting don't cause a problem as you can see here -
http://www.getgoodatgolf.com/equipment/product/Callaway-X-18-Iron-Set-WGraphite-Shaft.html -
But I have one supplier I use who's images are very big and I want to be able to set a maximum image width for them. You can see the problem I have here -
http://www.getgoodatgolf.com/equipment/product/Big-Bertha-2004-Mens-Graphite-Shaft-Fairway-Wood-19.html -
I'm not sure if this is possible...I know if I set an image width it will automatically stretch all the images to that width...I didn't know if there was a way to say if image width = over 400 pixels then set image width at 400 pixels?
I suppose this is set by the image on the other server so there might not be a solution but could you let me know if you have any ideas on this.
Thank you in advance
Adam
Hi Dave,
Works like a charm
Cheers for your help
Adam
Hi David,
I would like to keep the max size of the images and also their aspect ratio.
I used the following php code to resize the images:
<?php
function imageResize($width, $height, $target)
{
if ($width)
{
if ($width > $height) {
$percentage = ($target / $width);
} else {
$percentage = ($target / $height);
}
$width = round($width * $percentage);
$height = round($height * $percentage);
print "width='$width' height='$height'";
} else {
print "width='$target' height='$target'";
}
}
?>
And using the function calling it in product.php:
<?php
$OrigImgSize = getimagesize($mainProduct["image_url"]);
<img class='leftimage' <?php imgResize($OrigImgSize[0], $OrigImgSize[1], 150); ?> src='<?php print $mainProduct["image_url"]; ?>' alt='<?php print $mainProduct["name"]; ?>' title='<?php print $mainProduct["name"]; ?>' />
?>It works perfectly but it slowdown the appearance of the pages.
Any suggestion how to improve its performance? Will javascript will be faster?
Regards,
Danny
Hi Danny,
The reason it is slow of course is because whilst generating the page the image is having to be fetched in order to get its dimensions.
JavaScript may work; but the only problem with that is that unless you get into some quite fancy DHTML (Dynamic HTML) coding you can often end up with a messy appearance where the image starts off at full size before being scaled. You also have cross-browser issues to contend with - making sure that your code works in all browsers.
However, what would be relatively straight forward to do would be to cache the image width and height in the database; so getimagesize() would only ever be called once per product per import rather than being called every time the page was viewed. Subsequent page views can use the width and height from the database instead of fetching the image.
To do this, you will need to add 2 extra fields to your products table - image_width and image_height, both of type INT. If you have phpMyAdmin that is the easiest way to do this, but you could also add the fields using the following PHP code which you only need to run once (from the main Price Tapestry directory):
dbmod.php
<?php
require("includes/common.php");
$sql = "ALTER TABLE `products` ADD `image_width` INT NOT NULL , ADD `image_height` INT NOT NULL ;";
$sql = str_replace("products`",$config_databaseTablePrefix."products`",$sql);
database_queryModify($sql,$result);
?>
Having done that, you can now replace the following line in your modification in html/product.php
$OrigImgSize = getimagesize($mainProduct["image_url"]);...with the following code, which should be much faster on every page view except the first:
if ($mainProduct["image_width"])
{
$OrigImgSize[0] = $mainProduct["image_width"];
$OrigImgSize[1] = $mainProduct["image_height"];
}
else
{
$OrigImgSize = getimagesize($mainProduct["image_url"]);
$sql = "UPDATE `".$config_databaseTablePrefix."products` SET image_width='".$OrigImgSize[0]."',image_height='".$OrigImgSize[1]."' WHERE id='".$mainProduct["id"]."'";
database_queryModify($sql,$result);
}Hope this helps!
Cheers,
David.
Thanks David it works great.
The only improvement I think it needs is batch script that will update the images dimensions after importing them to the DB.
Danny
Hi,
I just tried an experiment in Firefox, and you can change the image width with a bit of JavaScript. Therefore, you should be able to test the image width in the onLoad event of the IMG tag, and resize it if it is too large for display.
The image on product pages is displayed by this line in html/products.php:
<img width='180' src='<?php print $mainProduct["image_url"]; ?>' alt='<?php print $mainProduct["name"]; ?>' />You could try adding some JavaScript to resize if necessary:
<img width='180' onload='JavaScript:if(this.width > 200) this.width=200;' src='<?php print $mainProduct["image_url"]; ?>' alt='<?php print $mainProduct["name"]; ?>' />That would set the width to 200 pixels if the width was larger than that...