Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Larger Image on Product Details Page Rate Topic   - - - - -

 
  • elmer328
  • Member
  • Members
  • Join Date: 12-Jan 09
  • 59 posts

Posted 26 February 2010 - 11:27 PM #1

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?
- Jeff

 

Posted 27 February 2010 - 12:44 AM #2

Looking for the same functionality
I've moved on from CS-Cart to WooC******** - If you need anything I can be of little help.

 
  • ogia
  • Senior Member
  • Members
  • Join Date: 09-Aug 09
  • 503 posts

Posted 27 February 2010 - 04:51 PM #3

vote here:
http://cscart.uservo...tions?ref=title
CS-Cart 2.1.3 | Selling downloads
I recommend Newsletter Integration with Mailchimp

 
  • adodric
  • Senior Member
  • Members
  • Join Date: 14-May 09
  • 320 posts

Posted 27 February 2010 - 06:49 PM #4

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.


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.

 
  • elmer328
  • Member
  • Members
  • Join Date: 12-Jan 09
  • 59 posts

Posted 01 March 2010 - 06:16 PM #5

@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!
- Jeff

 

Posted 01 March 2010 - 08:08 PM #6

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.


that also means that your category pages are bloated with 300px images that are shrunk to 85px wide = Unstable browsers. Been there, Done that.
I've moved on from CS-Cart to WooC******** - If you need anything I can be of little help.

 
  • adodric
  • Senior Member
  • Members
  • Join Date: 14-May 09
  • 320 posts

Posted 01 March 2010 - 08:16 PM #7

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


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.

 

Posted 01 March 2010 - 08:51 PM #8

Resizing an image should not make your browser unstable.


It does if your images are large and many.

5MB on page makes any browser jittery.
I've moved on from CS-Cart to WooC******** - If you need anything I can be of little help.

 
  • adodric
  • Senior Member
  • Members
  • Join Date: 14-May 09
  • 320 posts

Posted 01 March 2010 - 08:58 PM #9

It does if your images are large and many.

5MB on page makes any browser jittery.


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

 
  • Ion_Cannon
  • Senior Member
  • Members
  • Join Date: 28-Oct 09
  • 178 posts

Posted 01 March 2010 - 10:11 PM #10

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.
--
Lolita Glasses
Currently Running: CS-Cart 2.2.4

 
  • knoxbury
  • Senior Member
  • Members
  • Join Date: 14-Jan 08
  • 483 posts

Posted 22 March 2010 - 07:30 PM #11

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.

 
  • jobosales
  • Senior Member
  • Members
  • Join Date: 04-Nov 06
  • 3114 posts

Posted 22 March 2010 - 07:34 PM #12

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.

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

Bob
CS-Cart 2.0.14 (testing)

 
  • knoxbury
  • Senior Member
  • Members
  • Join Date: 14-Jan 08
  • 483 posts

Posted 06 April 2010 - 08:40 PM #13

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.


Would you mind sharing these code changes with us?

 
  • psirus0588
  • Newbie
  • Trial users
  • Join Date: 24-Mar 16
  • 2 posts

Posted 25 April 2016 - 10:45 AM #14

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