Larger Image on Product Details Page

How would I go about changing the size of the image on the product details page? The thumbnail is to small, but the zoom is too big. I’d like to code it to call the zoom image, but size it at 300 x 300.



Also, I have many alternate images. Is there a way to better space them out?

Looking for the same functionality

vote here:

[url]http://cscart.uservoice.com/forums/40782-general/suggestions/500243-more-image-sizing-options?ref=title[/url]

[quote name=‘elmer328’]How would I go about changing the size of the image on the product details page? The thumbnail is to small, but the zoom is too big. I’d like to code it to call the zoom image, but size it at 300 x 300.[/QUOTE]



Maybe I’m missing your issue here. My product page images are 250x250 and my product thumbnail images on my category pages are 142x142. My detailed product images vary and are larger. You can do exactly what you want with the system as it is.



I made my product images at 250x250, you could make them at 300x300. I don’t use the auto resize functionality but if you do set the “Product thumbnail width” and “Product thumbnail height” to both be 300 for your case. This is found under “Administration->Settings->Thumbnails”. This should make the product page image be 300.



Then under “Design->Appearance Settings” set the “Thumbnail width on product list page (leave empty to use original size)” field to be the size you want your product thumbnails (the ones on the category and cart pages).



This should give you a 300x300 image on the product page. A smaller thumbnail on the other pages. And your detailed image will be whatever it currently is as we have not touched that.

@adodric Thank you! Perhaps CS Cart could add your explanation to the manual. If it’s in there, I missed it. You solved a HUGE problem for me and I greatly appreciate you taking the time to do so!

[quote name=‘adodric’]Maybe I’m missing your issue here. My product page images are 250x250 and my product thumbnail images on my category pages are 142x142. My detailed product images vary and are larger. You can do exactly what you want with the system as it is.



I made my product images at 250x250, you could make them at 300x300. I don’t use the auto resize functionality but if you do set the “Product thumbnail width” and “Product thumbnail height” to both be 300 for your case. This is found under “Administration->Settings->Thumbnails”. This should make the product page image be 300.



Then under “Design->Appearance Settings” set the “Thumbnail width on product list page (leave empty to use original size)” field to be the size you want your product thumbnails (the ones on the category and cart pages).



This should give you a 300x300 image on the product page. A smaller thumbnail on the other pages. And your detailed image will be whatever it currently is as we have not touched that.[/quote]



that also means that your category pages are bloated with 300px images that are shrunk to 85px wide = Unstable browsers. Been there, Done that.

[quote name=‘JesseLeeStringer’]that also means that your category pages are bloated with 300px images that are shrunk to 85px wide = Unstable browsers. Been there, Done that.[/QUOTE]



Resizing an image should not make your browser unstable. It’s a display setting nothing more. Displaying lots and lots of images and going through page after page of them may have issues with the amount of memory your browser is using but most customers don’t scan through loads of pages, they come and go if they don’t find what they want quickly.



One thing that will occur is that the images will not be as crisp looking as an image that is made to be 85px. I use 142px images on my category pages. Plus I am changing the code so that the category images are pulled from a different image directory of images that I made in 142x142 rather than resizing the product page images. This will allow for better looking images and faster loading pages, plus less bandwidth usage.

[quote name=‘adodric’]Resizing an image should not make your browser unstable. [/quote]



It does if your images are large and many.



5MB on page makes any browser jittery.

[quote name=‘JesseLeeStringer’]It does if your images are large and many.



5MB on page makes any browser jittery.[/QUOTE]



I covered that in the memory section of my post. :slight_smile: Regardless, that’s a lot of images or some poorly optimized images.

Most carts offer 3 image sizes, that’s usually standard…prestashop does, also squirrel cart and many others I’ve messed with. Was kind of surprised this cart did not have that functionality out of the box.

Also, unless your largest photo is a square (e.g. 600 x 600), CS-Cart will skew the photo when it automatically resizes the photo in a block.

[quote name=‘knoxbury’]Also, unless your largest photo is a square (e.g. 600 x 600), CS-Cart will skew the photo when it automatically resizes the photo in a block.[/QUOTE]

This has always annoyed me - they should use the long dimension to determine the scaling factor.



Bob

[quote name=‘adodric’]Plus I am changing the code so that the category images are pulled from a different image directory of images that I made in 142x142 rather than resizing the product page images. This will allow for better looking images and faster loading pages, plus less bandwidth usage.[/QUOTE]



Would you mind sharing these code changes with us?

Would you mind sharing these code changes with us?

find in /app/functions/fn.images.php string:

if (fn_get_image_size($detailed[$k]['path'])) {    $data['detailed_id'] = fn_update_image($detailed[$k], !empty($pair_data['detailed_id']) ? $pair_data['detailed_id'] : 0, 'detailed');
}

and replace to this:


if ($size = fn_get_image_size($detailed[$k]['path'])) {
$resized_w_h = 1600;
if ($size[0] > $resized_w_h || $size[1] > $resized_w_h) {
$ratio = $size[0]/$size[1]; // width/height
if( $ratio > 1) {
$width = $resized_w_h;
$height = $resized_w_h/$ratio;
}
else {
$width = $resized_w_h*$ratio;
$height = $resized_w_h;
}
$src = imagecreatefromstring(file_get_contents($detailed[$k]['path']));
$dst = imagecreatetruecolor($width,$height);
imagecopyresampled($dst,$src,0,0,0,0,$width,$height,$size[0],$size[1]);
imagedestroy($src);
imagepng($dst,$detailed[$k]['path'].'_resized', 9); // adjust format as needed
imagedestroy($dst);
$detailed[$k]['path'].= '_resized';
}
$data['detailed_id'] = fn_update_image($detailed[$k], !empty($pair_data['detailed_id']) ? $pair_data['detailed_id'] : 0, 'detailed');
}

set your limit for widht or height to $resized_w_h